일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 웹개발
- 멋쟁이사자처럼
- SS
- 네트워크
- array
- 코딩
- 반복문
- frontend
- 제주코딩베이스캠프
- likelion
- 배열
- 비동기
- 내일배움카드
- JavaScript
- 메소드체이닝
- react
- 개발자
- for문
- 리액트
- VAR
- CSS
- useState
- 자바스크립트
- 멋사
- Let
- 이벤트루프
- 국비지원
- 화살표함수
- 프론트엔드
- 타입스크립트
- Today
- Total
Ch.Covelope
간단한 유튜브 <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>태그를 사용해 로컬에서 링크를 걸어 올렸다.
한 시간 반 정도 걸린 거 같은데 내용물은 완벽하지 않지만 처음 해보는 클론 코딩이라 보람찼고 시간이 되는 한도 내에서 계속해봐야 할거 같다. 잘하는 사람들이 너무 많다..
결과물
유튜브 페이지 클론코딩
subscribe
chry8822.github.io
chry8822 - Overview
‘Keep true to the dreams of thy youth’ . chry8822 has 11 repositories available. Follow their code on GitHub.
github.com
'private' 카테고리의 다른 글
오늘의집 조은님의 Front-end(프론트엔드) 특강 수업! (0) | 2021.11.29 |
---|---|
tailwindcss (테일윈드) 를 사용해서 이력서를 만들어 보자! (0) | 2021.11.24 |
자판기 만들기 과제. (0) | 2021.11.22 |
멋,사 과제 로그인 모달창 만들기.<css 체크박스 디자인 바꾸기> (0) | 2021.11.14 |
CSS : flex 노트정리. (0) | 2021.11.09 |