간단한 유튜브 <Youtube> 페이지 클론코딩 하기!

 

 

Youtube 클론 코딩 하기!

<약간 반응형ㅋㅋ>

 

 

---

 

 

 수업을 하면서 이해가 되는 부분들도 있고 안 되는 부분들이 있는데 안 되는 부분들이 시간이 갈수록 점점 많아지면서 이걸 어떻게 해야 할까 고민이 많았다. 첫 번째는 그냥 모르는 부분 부분만 따로 공부하기 두 번째는 그냥 클론 코딩이나 직접 뭔가를 만들면서 쓰게 되는 태그나 속성들 그리고 모르는 부분들을 사용하면서 익혀나가기 뭐 둘 다 다하면 좋겠지만 물리적인 시간은 정해져 있고 체력도 무한이 아니라 어느 때는 첫 번째 어느 때는 두 번째로 번갈아가면서 너무 지겹지 않은 공부가 되게 하는 걸로 방향을 정했다.

 

처음 해보는 클론 코딩이라 너무 거창 한거 말고 그리고 유튜브를 보면서 천천히 따라 하되 이해가 안 되는 부분에서 스탑 하고 구글링 하고 이해하고 그다음 다시 시작하는 방식으로 했다. 참고한 영상은 1년? 전 혹은 좀 더 오래된 영상으로 보고 만든 거라 지금 유튜브(youtube)와 UI , 폰트 , 배열 , 등등이 다르지만 완벽히 똑같은 게 목적이 아닌 한 페이지를 구성할 때 구조가 어떻게 되며 어떤 스타일 속성들이 사용되는지가 중요했기 때문에 그렇게 시작하게 되었다.

 

 

---

 

 

간단하고 의미에 맞는 마크업 구조

 

 

 HTML 구조는 <header> <section>*3 으로 나뉘고 <footer>는 없다. 페이지의 전체가 보이는게 아닌 일부분만 한 거라서 저런 식으로 진행한 거 같다. 마크업 자체는 단순하고 해당 위치의 역할과 의미에 맞게 클래스를 지어주고 나서 CSS로 넘어갔다.

 

 

CSS 스타일 작업

 

css에서는 처음 해보는 부분들이 있었다 :root {} 안에 자주 사용되거나 편의를 위해서 변수?처럼 색이나 사이즈를 할당해 놓으면 재사용에 있어서 엄청 편한 방법이었는데 예를 들어  --red-color : #원하는 색상  이렇게 해놓으면 다음 사용 때 color : red라고 하면 자동완성 도우미에서 --red-color 이렇게 나온 거 그걸 눌러서 사용하면 된다 일일이 원하는 색상을 타이핑하거나 복붙 하지 않아도 되기 때문에 굉장히 편하고 따로 적어놓을 필요도 없다. 컬러 말고도 패딩이나 폰트에서 사이즈를 미리 지정해 놓으면 계속해서 같은 사이즈가 필요할 때 사용할 수 있다.

 

flex !!!!!!!!!

 

플렉스는 수업으로도 실습 그리고 클론 코딩까지 의도치 않게 자주 접하게 됐는데 항상 머리로는 이해가 되는데 왜 직접 사용하면 헤매는지 모르겠다. 속성이 적용되면 내가 머릿속에서 그린 그림과 다르게 나타날 때가 많고 그럴 때마다 멘붕이 와서 flex 관련 속성들이 다 튀어나온다. 그렇다고 해결되지도 않고 더 엉망이 되었는데 아직도 잘 모르겠다. 그냥 모르는 건 계속 사용하고 찾아보다 보면 조금씩이라도 익숙해지고 나아지지 않을까 생각한다.

 

마지막으로 동영상은 free video를 구글링 해서 다운로드하여서 <video>태그를 사용해 로컬에서 링크를 걸어 올렸다.

 

한 시간 반 정도 걸린 거 같은데 내용물은 완벽하지 않지만 처음 해보는 클론 코딩이라 보람찼고 시간이 되는 한도 내에서 계속해봐야 할거 같다. 잘하는 사람들이 너무 많다..

 

---

 

 

결과물 

 

https://chry8822.github.io/BrushUp-Study/YoutubeClone/%EC%9C%A0%ED%8A%9C%EB%B8%8C%20%ED%8E%98%EC%9D%B4%EC%A7%80%20%ED%81%B4%EB%A1%A0%20%EC%BD%94%EB%94%A9/Youtube.html

유튜브 페이지 클론코딩

 

 

 

 

---

 

 

https://github.com/chry8822

chry8822 - Overview