📌 7주차 과제[Mission7]

모든 CSS 과제는 개발자 도구로 긁어오지 않고, 본인이 직접 구현해봅니다! 아래 두 과제 중 한 개를 수행해 주시면 됩니다. :)

• 과제 기한
  • 과제 수행 기간: 2022년 5월 2일 ~ 2022년 5월 6일 오후 23시 59분
  • 코드 리뷰 기간: 2022년 5월 9일 ~ 2022년 5월 13일 오후 23시 59분
  • 코드 리뷰 반영 기간: 2022년 5월 13일 ~ 2022년 5월 16일

💡 네이버 or 유튜브 메인 레이아웃 클론

• 내용
  • 네이버 모바일 혹은 유튜브 메인 페이지 중 하나를 선택해 레이아웃을 클론 코딩하세요.

기본 요구사항

• SCSS로 스타일을 작성하세요.
• 작성된 SCSS를 CSS로 컴파일하세요.
• 제출 프로젝트에 확인 가능한 HTML, CSS, SCSS 파일이 모두 포함돼야 합니다.
• 브라우저에서 정상적으로 출력돼야 합니다.
• @media를 활용해 반응형 레이아웃으로 구현해야 합니다.

선택 요구사항

• JS가 필요한 부분은 생략하고 이유를 명시해 보세요.(CSS로 대체 가능한지 피드백이 있을 수 있어요)
• JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해 보세요.
• 레거시 코드 활용보단 최신의 CSS Flex와 Grid를 활용해 보세요.
• 시멘틱 태그를 최대한 활용해 보세요.
• SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해 보세요.
• BEM 방법론을 도입해 보세요.

💡 자신이 원하는 사이트 레이아웃 클론

• 내용:
  • 원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
  • 평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.

기본 요구사항

• 결과와 비교할 수 있도록 선택한 클론 사이트의 URL 주소를 명시하세요.
• SCSS로 스타일을 작성하세요.
• 작성된 SCSS를 CSS로 컴파일하세요.
• 제출 프로젝트에 확인 가능한 HTML, CSS, SCSS 파일이 모두 포함돼야 합니다.
• 브라우저에서 정상적으로 출력돼야 합니다.

선택 요구사항

• JS가 필요한 부분은 생략하고 이유를 명시해 보세요.(CSS로 대체 가능한지 피드백이 있을 수 있어요)
• JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해 보세요.
• 레거시 코드 활용보단 최신의 CSS Flex와 Grid를 활용해 보세요.
• 시멘틱 태그를 최대한 활용해 보세요.
• SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해 보세요.
• BEM 방법론을 도입해 보세요.

이미지 추출 방법

사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.

1. 원하는 사이트 접속
2. Image Downloader 확장 프로그램 실행
3. 다운로드 원하는 이미지 선택
4. 서브 폴더 이름(Save to subfolder) 명시
5. 다운로드!