KDT0_KimMiJung 폴바셋 웹사이트 클론코딩 (PR Closing 후 재 제출)

[mysdpy30s]

☕️ 폴바셋(Paul Bassett) 홈페이지 클론 코딩

카페 프랜차이즈 '폴바셋(Paul Bassett)' 공식 홈페이지를 클론 코딩한 개인 프로젝트입니다.

🖱 프로젝트 관련 사이트 주소

• 원 사이트 주소 : https://www.baristapaulbassett.co.kr/Index.pb
• 클론 코딩 사이트 주소 : https://superlative-puppy-9a8f2a.netlify.app/

📑 프로젝트 간략 설명 및 주제 선정 이유

평소 커피를 즐겨 마셔서 카페 프랜차이즈 중 한 곳의 사이트를 직접 구현해보고 싶었고, 그 중 폴바셋 웹사이트가 시각적으로 굉장히 인상 깊게 다가왔습니다. 하지만 폴바셋 메인 페이지의 대부분이 반응형으로 제작되어 있어, 제가 현재 사용 가능한 수준인 HTML과 CSS, 그리고 약간의 JavaScript 를 최대한 활용하여 클론 코딩을 진행하고자 하였습니다.

💡 프로젝트 수행 목표

1. HTML

- 사이트 레이아웃을 직접 구현하고, 실제로 각 영역에 맞는 <header>,<footer> 등 시멘틱 태그 활용하기
- HTML 문서가 CSS 파일과 JavaScript 파일과 함께 어떻게 구현되는지 보기

2. CSS

- 각 영역별 클래스 지정 및 부모 요소 & 자식 요소 간 적용 속성 이해하기
- position 속성의 relation, absolute, z-index 등의 상관 관계 이해하기
- margin, padding, justify-content 등 속성을 활용해 각 요소별 정렬 양상 확인하기
- 특정 메뉴 영역 또는 이미지 hover 효과 적용시 필요한 코드 감 익히기

📑 구현한 내용

• Navbar 내부 로고 및 세부 메뉴 hover 효과 적용
  

• Sidebar 이미지 hover 효과 및 툴팁 적용
  

• 이벤트 배너 부분 hover 효과 적용
  

🥈 아쉬운 점

1. CSS 속성에 대한 전반적인 이해도 부족

CSS의 세부 속성들에 대한 이해와 실습 경험이 아직 부족하여, 제가 실제 구현하고자 했던 많은 기능들이 생략되거나 비교적 간단한 형태로만 구현하게 된 것이 아쉬웠습니다.

2. 각 부모 요소/자식 요소에 대한 속성 활용의 어려움

페이지 레이아웃 내에서 특정 요소들을 추가/수정/삭제 할 때마다 전체적인 구조가 틀어지거나, 생각지 못했던 특정 부모 요소 / 자식 요소가 영향을 받아 매번 원인을 추적하는 데에 많은 시간을 할애할 수 밖에 없었던 점이 아쉬웠습니다.

📢 앞으로 개선할 방향

1. '실험'해본다는 생각으로 최대한 여러 가지 코드를 많이 써보고, 각 속성이 바뀔 때마다 실제 화면에 어떻게 출력되는지 자주 보고 익숙해지기

2. 비슷한 부분에서 실수나 어려움이 계속 반복된다면, 그 부분에 대한 이해가 아직 많이 부족하다는 뜻이니 기본기부터 확실히 짚고 넘어가기

3. '내가 원하는 사이트를 최대한 비슷하게 만들어냈다'라는 것에 안주하기보다는, 계속 부지런히 나만의 아이디어로 새로운 웹사이트 만들어보기

[KittelLee]

hover부분이 매우 인상적입니다. 고생하셨습니다!

[junkue20]

하단 이미지 부분에 원본 페이지와 다른 방식으로 Hover 애니메이션 구성하신게 인상적이네요! 고생많으셨습니다!!

[seacrab808]

리드미를 깔끔하고 이해하기 쉽게 작성해주셨네요. 실험해보며 코드를 써보시는 모습이 인상 깊습니다.

[Sinary00]

원본페이지와 다르게 미정님만의 기능으로 재해석한 부분에 감탄했습니다 :)!