Kdt5 park choul min

README.md

@@ -1,59 +1,42 @@
-# 👀 사이트 레이아웃 클론
-
-래퍼런스 사이트 : https://hkd-microbiome.com/ko/
-
-## 작업 사항
-
-사용 기술 HTML, CSS, SCSS, JS
-
-이번 클론코딩 과제에서는 시멘틱 태그와 명시적인 태그 네이밍을 주의하며 구조를 만들었습니다.
-사이트의 디자인 요소 중 기술이 부족하여 구현하지 못한 부분은 CSS 및 다른 방법으로 대체 구현해 보았습니다.
-( 화살표, 버튼, 이미지 등 활성화 할 수 있는 요소들에는 css로 작업할 수 있는 간단한 모션을 추가했습니다.)
-복잡한 작업환경을 개선하기위해 scss를 활용하여 스타일링 파일의 코드를 줄일 수 있도록 하였습니다.
-추후에 반응형, JS 기술 부분도 지속적으로 업데이트 할 예정입니다!
-
-# CSS, JS 요소
-
-    CSS 효과
-    0. 부드럽게 효과 변환시키기.
-    1. 버튼 Hover :
-    2. <a> 텍스트 hover : 화살표 transform, border_bottom 라인 생성, 글자 크기 변화
-    3. Img hover : filter 기능으로 색 변화. 이미지 사이즈 변화,
-    4. cursor: pointer활용 링크 기능없는 경우 링크 있는것 처럼
-    5. 빈 링크에 javascript:void(0)
-
-    JS 효과
-    1. gsap,lodash 활용
-        <header> top:0일때 Opacity:0 / 지정 부분 아래에서 요소 노출
-    2. <footer> 웹페이지 최상단으로 가기 버튼
-        (사이트 명들도 최상단 이동으로 지정)
-
-# ❗️구현하지 못한 부분
-
-    현재 본인 수준이 부족해 구현하지 못하고 CSS로 대체한 부분들. 추후 더 공부해 디벨롭할 부분들 리스트!
-
-## 효과
-
-- <a> 태그 border_bottom의 애니메이션 효과 (좌에서 우로 라인 그어짐)
-- butoon의 애니메이션 효과 (원형으로 퍼지며 배경,글자 색상 변경)
-
-## 구성
-
-- header
-  [1] 아래로 스크롤 하는 동안은 네비 노출 x, 위로 스크롤 할때에만 나타내야 함.
-  [2] 햄버거 애니메이션 🔥
-  [3] 드롭다운 페이지
-- big_banner 🔥🔥
-  테스트 모션 [1]페이드 인 [2]아래에서 위로 팝업
-  이미지 모션 [1]자동 롤링 [2] 사용자 액션 없이 이미지 사이즈 변화 애니메이션[3].dot을 누르면 해당 배너로 수동 전환 [4]자동 롤링 일시정지 기능 [5] .dot hover 시 애니메이션
-- center_guide
-  [1] 타이틀 hover시 화살표 움직임 반복
-  [2] 뷰포트 외부의 이미지 롤링 및 롤링 버튼 활성화 🔥🔥
-  [3] 이미지 hover 시 관련 아이콘 팝업
-- VR_guide
-  배경 일러스트 형식 SVG 이미지 사용했으나, 화면 구성이 깨짐 (사이즈 조절해도 같은 문제가 발생해 JEPG로 대체)
-  마우스 hover 시 일러스트 애니메이션 필요 (창문에 불 들어옴)
-- REASERCH
-  연구 리스트 클릭 시 관련 이미지, 텍스트로 전환 🔥
-- INGREDIENTS
-  순차적으로 요소 지정 효과 나타내기
+# 클론코딩 과제
+
+<br/>
+
+## 선정된 사이트
+### 에어비앤비 : [사이트 바로가기](https://www.airbnb.co.kr/)
+### 클론코딩 작업 사이트 : [사이트 바로가기](https://642d45dbbb1b680965cf519b--celebrated-salamander-68b92d.netlify.app/)
+
+<br/>
+
+## 선정 이유
+1. 상단 중앙에 위치한 검색 기능을 구현하고 싶었습니다.
+2. 서비스 스타일의 사이트를 클론코딩하고 싶었습니다.
+3. 그리드를 활용하고 싶었습니다.
+
+<br/>
+
+## 작업 기간
+1. 5일 정도 작업 하였습니다.
+
+<br/>
+
+## 구현한 부분
+1. 에어비앤비 메인 페이지 레이아웃 작업
+2. 각 버튼별 효과 작업
+3. 그리드 활용으로 콘텐츠 작업
+
+<br/>
+
+## 구현하지 못한 부분
+1. 웹페이지 반응형 미디어쿼리 너비 조절 미구현
+2. 검색창 기능 미구현
+3. 우측 상단 프로필 버튼 기능 미구현
+4. 중앙 숙소 콘텐츠의 이미지 슬라이드 미구현
+5. 상단 두번째 숙소 스타일 아이콘 슬라이드 메뉴 기능 미구현
+6. 상단 두번째 최 우측 필터 버튼 모달 기능 미구현
+
+<br/>
+
+## 미흡한 부분
+1. BEM 작성법으로 시작하였지만 나중에 요소를 붙이다 보니 후반에 가서 제대로 활용하지 못하였습니다.
+2. 후반 포지션 `relatve`와 `absolute` 작업에서 헤매였습니다.