[html&CSS Clone] YouTube & 당근마켓

❗❗  데브코스 8주차 09.20 ~ 09.24

8주차는 추석 기간이 껴있었다. 추석 기간에는 강의가 없었지만

밀린 강의와 html&css Clone 과제를 수행했다.

 

지난 시간에 배웠던 SCSS를 활용하여 네이버 or 유튜브 한 개,

자유 주제 한 개, 총 두개의 사이트를 SCSS로 Clone하는 주제였다.

지정 과제는 flex를 실습하고 싶어서 일정한 구조를 가진 유튜브를 선택했고,

자유 주제는 가고 싶은 회사인 당근 마켓을 정했다.

 

✏️ HTML&CSS Clone Tip

✅ colorzilla

사이트의 배경색, 폰트 색상 등 여러 색상을 적용해야 할 때,

해당 색상을 알려주는 Chrome 확장 프로그램이다.

해당 확장 프로그램을 설치해주고 실행시키고 난 후,

색상을 추출하고 싶은 곳에 커서를 가져 놓고 클릭하면 해당 컬러 값이 복사된다. 

 

✅ Image Downloader

사이트에서 사용하는 이미지 파일들을 다운로드 할 수 있도록 도와주는

확장 프로그램이다. 이녀석도 유용하다. svg파일도 추출 할 수 있다.

 

✏️ 결과물

youtube는 화면 사이즈 넘어가면 스크롤로 구현되어 있어 화면 전체 캡쳐시에 적용이 안되는 점 양해 부탁드립니다.

Flex를 이용해서 Layout을 구성했습니다.

 

당근마켓  section요소는 flex로 구성했고, 마지막 중고거래 인기매물은 Grid로 구성했습니다.

 

👨‍💻 과제 레파지토리는 private로 되어 있어 소스 코드 공개는 어려운점 양해 부탁드립니다.!

 

아쉬웠던 점 : 매번 CSS 작업이 필요하면 Bootstrap, Ant Design와 같은 프레임 워크만을 이용해서

프레임워크없이 CSS로만 작업하니깐 조금 어렵게 느껴졌고, 디테일에서 많이 부족한 것 같다.

또한 SCSS를 활용하라고 했었는데, 공통적으로 쓰이는 요소를 제대로 파악하지 못해 SCSS를 제대로 

활용하지 못한 점이 아쉽다.

+YouTube의 경우 반응형으로 작성하라는 조건도 있었는데, (핑계 : 고향에서 명절을 보내서 시간 관계상 구현하기 못했다.) 

 

그래도 이번 과제를 통해 CSS Layout을 조금 더 잘 다룰 수 있게 되었다.