KDT5 Chadongmin Clone Coding PR

README.md

@@ -1,45 +1,27 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# 메가박스 클론코딩
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+### 메가박스 홈페이지 링크
 
-## 과제 수행 및 제출 방법
+https://www.megabox.co.kr/
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
+### 클론 메가박스 서비스 링크
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+https://kdt5-chadongmin--kdt5-cdm-megaboxclone.netlify.app/
 
-## 필수 요구사항
+## 과제 진행 내용
 
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- [ ] 메가박스 공식 홈페이지 내의 상단 메뉴바, 중앙 박스오피스 영역, 최하단 footer 영역의 클론코딩
+- [ ] 다른 페이지로 이동하는 링크를 제외하고 다른 기능은 가능한 한 최대한 구현
+- [ ] 원본 페이지의 코드를 최대한 배제하고 눈에 보이는대로 스스로 코딩
 
-## 선택 요구사항
+## 부족한 사항
 
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
-
-## 손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
-
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
+- [ ] 드롭다운 동작시 inner 영역에 맞게 가로 너비가 잘려버리는 문제
+- [ ] 네비게이션 바 하단 메뉴에 hover 했을때 나오는 하위메뉴가 우측으로 밀려서 정렬되는 문제
+- [ ] 브라우저 창 크기를 축소시켜 x축 스크롤 바가 생겼을 때, 스크롤시 background가 잘리는 문제
+- [ ] 다른 드롭다운을 닫을 때 쓰는 JS 코드가 지저분한 점
+- [ ] 마우스 아이콘의 반복적인 애니메이션의 부자연스러움
+- [ ] semantic 태그의 활용이 많이 부족한 점
+- [ ] 과제 초기부터 commit을 남기면서 작업하지 않은 점
+- [ ] class 사용에 있어 규칙이 다소 난잡하고 일관되지 않은 점
+- [ ] border-sizing : border-box 로 레이아웃 밀림을 초기에 방지하지 못한 점

css/footer.css

@@ -0,0 +1,106 @@
+footer {
+  height: 200px;
+  background-color: #f8f8fa;
+}
+
+.flex-space {
+flex-grow: 1;
+}
+
+/* TOP */
+footer .inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+footer .footer__top {
+  height: 20%;
+  padding: 20px 0;
+  display: flex;
+}
+
+footer .footer__top ul {
+  display: flex;
+  align-items: center;
+}
+
+footer .footer__top ul li {
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+footer .footer__top ul li:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+footer .footer__top ul li:nth-child(7) {
+  font-weight: 800;
+}
+
+footer .footer__top button {
+  font-size: 14px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  padding: 3px 20px;
+  border: 1.5px solid rgba(0, 0, 0, 0.3);
+  border-radius: 20px;
+}
+
+footer .footer__top button span:first-child {
+  font-size: 20px;
+}
+
+/* BOTTOM */
+footer .footer__bot {
+  height: 80%;
+  display: flex;
+  padding-top: 20px;
+}
+
+footer .footer__bot div:first-child {
+  height: 50px;
+  width: 150px;
+  background-image: url(../images/logo-opacity_new2.png);
+  margin-right: 15px;
+}
+
+footer .footer__bot ul {
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+}
+
+footer .footer__bot ul li {
+  padding-bottom: 7px;
+}
+
+footer .footer__bot div:last-child {
+  display: flex;
+}
+
+footer .footer__bot div:last-child i {
+  height: 30px;
+  width: 30px;
+  margin-left: 7px;
+}
+
+footer .footer__bot div:last-child i:hover {
+  cursor: pointer;
+}
+
+footer .footer__bot div:last-child i:nth-child(1) {
+  background-image: url(../images/ico-youtubeN.png);
+}
+footer .footer__bot div:last-child i:nth-child(2) {
+  background-image: url(../images/ico-instagramN.png);
+}
+footer .footer__bot div:last-child i:nth-child(3) {
+  background-image: url(../images/ico-facebookN.png);
+}
+footer .footer__bot div:last-child i:nth-child(4) {
+  background-image: url(../images/ico-twitterN.png);
+}

css/information.css

@@ -0,0 +1,173 @@
+aside {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.banner--moved {
+  transform: translateX(-185px);
+}
+
+.info__title {
+  display: flex;
+  height: 100px;
+  align-items: center;
+  font-size: 27px;
+  font-weight: 540;
+  color: #252451;
+}
+
+.info__banner {
+  width: 1300px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.info__banner button {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+
+.info__banner button:first-child {
+  left: 50px;
+}
+
+.info__banner ul + button {
+  right: 50px; 
+}
+
+.info__banner ul {
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+}
+
+.info__banner ul li {
+  width: 170px;
+  height: 170px;
+  flex-shrink: 0;
+  border-radius: 15px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin-right: 16px;
+  transition: transform .3s ease-in-out;
+}
+
+.info__banner ul li:hover {
+  cursor: pointer;
+  background-position-y: -170px;
+}
+
+.info__banner ul li:nth-child(1) {
+  background-image: url(../images/bg-main-megainfo-dolby.png);
+}
+.info__banner ul li:nth-child(2) {
+  background-image: url(../images/bg-main-megainfo-private.png) ;
+}
+.info__banner ul li:nth-child(3) {
+  background-image: url(../images/bg-main-megainfo-boutique.png) ;
+}
+.info__banner ul li:nth-child(4) {
+  background-image: url(../images/bg-main-megainfo-mx.png) ;
+}
+.info__banner ul li:nth-child(5) {
+  background-image: url(../images/bg-main-megainfo-comfort.png) ;
+}
+.info__banner ul li:nth-child(6) {
+  background-image: url(../images/bg-main-megainfo-puppy.jpg) ;
+}
+.info__banner ul li:nth-child(7) {
+  background-image: url(../images/bg-main-megainfo-kids.png) ;
+  margin-right: 0;
+}
+
+.info__text {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+}
+
+.info__text > div {
+  width: 100%;
+  border-top: .5px solid rgba(0, 0, 0, 0.2);
+  border-bottom: .5px solid rgba(0, 0, 0, 0.2);
+  padding: 20px;
+}
+
+.info__text .inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info__text .inner > span:first-child {
+  margin-right: 40px
+}
+
+.info__text .inner .text__center {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+  margin: 0 15px;
+}
+
+.info__text .inner .text__center div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.info__text .inner .text__center div span:first-child {
+  font-weight: 600;
+  color: #252451;
+}
+
+.info__text .inner .text__center > span {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.info__text .inner div:last-child {
+  margin-left: 20px;
+}
+
+.info__text .inner div:last-child:hover span:first-child{
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.info__text .inner div:last-child span:last-child {
+  font-size: 14px;
+}
+
+.info__icon {
+  height: 400px;
+}
+
+.info__icon .inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info__icon .inner div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 14px;
+}
+
+.info__icon .inner div:hover {
+  cursor: pointer;
+}
+
+.info__icon .inner div img {
+  margin: 15px 35px;
+}
+
+.info__icon .inner div:hover span {
+  text-decoration: underline;
+}