[프론트엔드 개발] 유튜브 클론코딩 완성! (feat. 드림코딩 by.엘리)

html, css, js를 배우고있다.

입문은 노마드코더로 했는데, 좀더 세세하고 체계적인 강의를 찾아다니다가 유튜브에서 엘리님의 강의를 발견!

엘리님의 프론트엔드 입문 재생목록을 싹다 봤다.

마지막에 유튜브 클론코딩하는 프로젝트가 있길래 도전했다.

 

일단 완성본!

모바일 버전,제목이 길면 2줄정도만 보이도록 설정했다. 

삼각형 버튼으로 토글한다.

제목이 2줄이상일 때, 접혀져서 나온다.

옆에 삼각형 버튼을 누르면, 180도 돌아가면서 접혀진 제목이 펼쳐진다.

모바일 기준으로 우선 만들고, 테블릿형태로 확장했다.

너비가 일정이상일 때,

가장 밑에 위치했던 추천영상리스트를 가로로 정렬되도록 재배치했다.

그리고 영상의 뒷배경을 검정색으로 지정하여 배경과 잘 어우러지도록 설정함.

 

 

 

이 프로젝트에 엄청난(?) 기술이 쓰인 건 아니지만, 

보통 프론트엔드 개발자들이 마주치는 상황에서 어떤 식으로 생각하는지 배울 수 있었다.

 

미리 폰트사이즈, 컬러 등을 설정해놓는다던지

html뼈대를 생각하는 방식이나,

중간에 필요하다면 뼈대를 합치거나 나누는 등 수정을 하는 과정도 자연스럽게 배웠다.

클래스명도 겹치지 않게 짜는게 중요하다고 하심.

 

 

뭔가 혼자 만들때는 패딩, 마진을 하나하나 넣는다던지

1px씩 옮겨가며 조잡..스럽게 ㅠㅠ 코딩한다는 느낌이 있었는데

 

 

확실히 엘리님의 강의를 따라가니까,

큰 그림을 먼저 샥샥 잘 그리면 작은 부분은 크게 신경쓰지 않아도 되겠다고 생각했다.

미리 전체 패딩을 설정한다던지? 큰 윤곽을 먼저 다 그리고 세부로 들어간다던지.

 

자꾸 한 파트를 완성시키고 넘어가려고 하다보니까 요상하게 조잡해짐.

마인드셋이 중요하다!

 

 

 

이제 다음 프로젝트를 생각해봐야겠다!

정말 많은 도움이 된 강의였음!!

 

나의 코드는 여기!

 

https://github.com/Hong-been/Youtube-CloneCoding/tree/main/youtube_mobile/youtube_mobile

Hong-been/Youtube-CloneCoding

 

 

영상링크는 여기!

https://www.youtube.com/watch?v=67stn7Pu7s4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=15