유튜브 클론코딩 후기

📎 유튜브 클론코딩을 하게 된 이유

모던 웹을 위한 HTML5 CSS3 바이블을 공부한 뒤 하스스톤 클론코딩을 시도했다가 처참히 무너져 버렸다.
결국 엘리의 반응형 헤더 만들기 영상부터 차근차근 공부해보았다. 역시 영상으로 보니까 참 쉬워보이더라구 ~~
비록 html과 css뿐이지만 엘리의 답을 보지않고 해냈다는것에 행복했다. 아래는 결과물!!!!

📺 결과물

동영상 구하기 귀찮아서 그냥 태그만 넣어줬다. 사진도 컴터에 저장된거로 뚝딱 만들었다 여유롭게 한시간 반정도 걸린것 같다.

📱 Mobile 버전

💻PC 버전

💥 직접 하는 코드 리뷰

1. 먼저 아이콘이나 마우스에 반응하는 요소들에 a 나 button 등의 클릭 태그를 넣어줘야하는데 개무시했다. 그래서 액션 아이콘같은것은 마우스 오버시 클릭커서로 안바뀐다.
2. 초기화코드 작성할때 box-sizing: border-box를 적어줘야 원하는 padding이 적용된다는것.
3. 그리고 코드리뷰 하다가 발견한건데 비디오의 스티키 기능을 구현하지 않았다(뭘한거야)
4. 리뷰 영상 속에 saas, Postcss등등 다양한 라이브러리를 사용해야 하는 이유, 간단한 사용 방법을 알려주신다.
5. 사이즈나 컬러, 패딩의 사이즈를 변수로 선언해 두고 가져다 쓰는것 (패딩사이즈나 다 맞추긴 했지만, 하나하나 px사이즈로 기입함)
6. CSS line clamp : 컨텐츠의 내용을 제한하는 것 (...으로 표현)

결론 : 모자란것이 많은 코드였다 ㅋㅋ

👀 모자란 코드 보러가기

https://github.com/chestnut-TIL/Feb_22/blob/main/0214/0214_youtubeclone.html