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

원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!

과제 수행 및 제출 방법

1. 현재 저장소를 로컬에 클론(Clone)합니다.
2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_ParkYoungWoong)
3. 자신의 본명 브랜치에서 과제를 수행합니다.
4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_ParkYoungWoong)
5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_ParkYoungWoong)

• main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
• Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
• Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
• 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!

필수 요구사항

• [O] 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!

• 설명

  1. 각 헤더, 네비, 메인, 푸터 별로 블럭요소를 추가하면서 페이지를 확대, 축소하면서 화면을 맞출 수 있게 만듦.
  2. 페이지를 확대 했을 경우, 네비에 있는 영역이 자연스럽게 내려오면서 2줄을 만들게 해줬음.
  3. :hover 속성을 이용해서 해당 영역에 마우스를 올려놓으면 색이 바뀌면서 링크로 갈 수 있게 해줬음.
  4. header영역의 경우, flex, position를 주로 활용하면서, 배치와 정렬을 해줌.
  5. nav 영역의 경우, flex를 활용하면서 "전체 메뉴부터 반마리"까지의 영역을 고정 너비를 지정해주면서 흘러내리게 해줬음.
  6. main영역의 경우, 전체적인 틀은 flex, flex-direction속성,column 을 활용했고 탭과 탭안에 있는 상품 메뉴를 보여주는 content박스의 경우, Grid를 활용해서 해당 제품content를 배치했고 추가적으로 gap을 활용해서 전체 메뉴에 있는 탭 부분영역의 간격을 지정해줬음.

• 내가 생각하는 부족한 점의 경우,

1. 예를 들어 nav영역에 메뉴와 치킨 영역에 토글 부분에 드롭 메뉴바가 활용되어야 하는데, 보이게까지는 했지만, 메뉴와 치킨영역에 마우스 hover를 해제했을 경우, 드롭메뉴바가 사라짐.
2. 헤드 영역에 메뉴부분부터 교촌스토리 영역부분까지 마우스를 호버했을 경우, 드롭 메뉴박스가 가운데 정렬을 자연스럽게 하는 기술이 부족한 거 같음.(구현 자체도 못했음.)
3. main메뉴 영역에서 자세히 보기 버튼에 채우는 방법을 잘 모르겠음.
4. 밑으로 스크롤 했을 경우, nav메뉴바가 뷰포트 상단에 고정하지 못했음.

• [O] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! 교촌치킨 레드시리즈 페이지 https://www.kyochon.com/menu/chicken.asp?code=2

• [O] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!

• [O] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. https://lee-donggeun.github.io/git-branch-KDT7_LeeDongGeunWeb/

선택 요구사항

• [O] <header>, <section> 등 시멘틱 태그를 최대한 활용해보세요.
• [O] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
• [O] 부분적으로 BEM 방법론을 도입해보세요.
• JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
• JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
• SCSS 등의 CSS 전처리도구를 도입해보세요.
• SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.

손쉬운 이미지 추출 방법

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

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