HTML과 CSS를 공부하면서 유튜버 "드림코딩 엘리"의 유튜브 클론코딩 영상을 보면서 HTML, CSS에 익숙해지려고 했다. 최대한 많이 반복하는 것이 빨리 익숙해지기 위한 지름길이라고 생각했다. 이를 위해 반응형 헤더를 만들어보고 Youtube 클론코딩을 시작했다. 하지만 반응형 헤더와 달리 웹 페이지의 구조가 복잡했다. 마크업을 하면서 따라하기보다 구조를 파악하고 생각하면서 하는 것이 빨리 익숙해지기 위해 더 좋은 방법일 것 같아 클론 코딩한 Youtube 페이지의 레이아웃을 분석하려고 한다.
먼저 작성한 페이지는 다음과 같다.
 |
먼저 크게 세 개의 부분으로 나눌 수 있다. header, video player가 들어있는 section1, 채널 정보와 동영상 정보가 들어있는 section2와 같이 나눈다. 여기서 section2는 반응형으로 제작하여 브라우저가 커졌을 때 위아래가 아닌 왼쪽 오른쪽으로 나누기 위해 하나로 묶는다.
 |
위의 그림은 HTML로 아래와 같이 마크업할 수 있다. 이제 각 구역을 자세하게 살펴보자.
<body>
<header> </header>
<section class="player"> </section>
<section class="infoAndUpNext"> </section>
</body>
▶ header
header를 보면 Youtube가 적혀있는 logo부분과 검색과 더보기 아이콘이 있는 icons 부분으로 나눌 수 있다. 각각의 요소들을 <div>를 통해 감싸고 flex를 통해 스타일링할 수 있을 것이다.
 |
▶ section1
section1같은 경우는 <video>를 통해 비디오 플레이어를 생성할 수 있다. 해당 구역에는 <video>만 존재한다.
▶ section2 -> info
먼저 section2에서 영상정보와 채널정보가 들어있는 부분을 살펴본다. 아래 그림과 같이 세 부분으로 나눌 수 있고 세 부분으로 나눈뒤 상세하게 더 나눌 수 있을 것이다. 여기서 파란색 박스로 되어있는 부분은 아이콘들이 정렬되어 있으므로 <ul>를 통해 감싸면 될 것이다. 나머지 박스들은 <div>에 class를 명명하여 작성하도록 한다.
 |
▶ section2 -> upNext
다음 구역은 Up Next라는 title이 존재하고 아래에 이미지와 이미지 설명이 나열되어 있다. 아래 그림은 전체 부분에서 잘린 부분이지만 파란색 박스 안에는 노란색과 초록색 박스와 같은 요소가 여러개 있다. 따라서 파란색 박스를 <ul>로 구성하고 flex로 노란색박스와 초록색박스를 정렬하기 위해 각각 <div>로 감싼다. 또한 초록색 박스안의 더보기 아이콘도 단독으로 <div>로 감싸주면 될 것이다.
 |
이보다 더 복잡한 페이지를 효율적으로 마크업하기 위해서는 페이지를 박스형태로 분석하고 나누는 것이 중요하다. 나중에 경험이 생긴다면 CSS로 어떻게 배치할지도 생각하면서 HTML 태그를 작성해야겠다.
'WEB' 카테고리의 다른 글
| [CSS] flex 속성 (0) | 2021.01.19 |
|---|---|
| [WEB] API가 무엇일까? (0) | 2021.01.15 |
| [CSS] flex box를 위한 속성들 (0) | 2021.01.11 |
| [CSS] flex 이해하기 (0) | 2021.01.10 |
| [HTML] 시맨틱 태그에 대하여 (0) | 2021.01.10 |