[HTML/CSS] 웹사이트(Youtube) 레이아웃 만들기 - (2)

[HTML/CSS] 웹사이트(Youtube) 레이아웃 만들기 - (2)

 

(이전 게시글 : https://wogud6792.tistory.com/16)

 

이제 오른쪽의 컨텐츠 부분의 레이아웃을 조금 더 구체화 시켜보자.

 

 

 

위의 코드는 오른쪽의 content부분에 추가할 레이아웃을 작성한 것이다.

크게 세 부분 (광고 , 두개의 주제 영상들)  cont1, cont2, cont3 로 나누었다.

위와 같이 작성하게 되면 아래와 같이 결과가 나온다.

 

이제 적절히 코드를 작성하여 각각의 단어가 알맞게 배치되도록 하는 것이 목표이다.

 

첫 번째로, 가장 위에 나오는 광고 파트를 꾸며볼 것이다.

 

 

이전 게시글에서 캡쳐한 유튜브 화면을 보면 '왼쪽'에는 광고가 나오는 화면,

'오른쪽'은 광고 사이트로 이동하는 화면으로 나뉜다.

따라서 광고가 나오는 화면(ad)과 사이트 이동 화면 (adplus) 박스를 각각 색을 다르게 지정하고,

높이와 너비, 그리고 여백을 알맞게 설정해준다.

마찬가지로 이 두 박스가 가로로 배열이 되어야 하므로 이 둘을 포함하는 cont1 박스를 flex로 설정해준다.  

 

그러고 나면 아래와 같이 결과가 나오게 된다. 

 

 

 

아래에 영상 목록도 동일한 방법으로 만들어 보자.

 

 

위와 같이 적절히 색과 너비, 높이, 여백을 설정하면 아래와 같이 나오게 된다.

 

드디어 기존의 Youtube 사이트와 비슷한 형태로 레이아웃이 만들어진 것을 알 수 있다.

 

다만, 영상 목록이 나오는 video1, video2 부분이 조금 아쉬운 부분이 있다.

이 부분도 각각의 영상 크기만큼 나누어보려고 한다.

계속 이용해왔던, box 내에 <div> 태그를 이용하여 또 여러 개의 box를 만든 후,

큰 box를 flexbox로 만들어주면 된다.

 

            

 

html 파일에는 각각의 영상이 담길 box를 div태그로 모두 선언해주고

css 파일에는 영상이 담기는 box에 대한 너비, 높이, 색, 여백을 위와 같이 모두 동일하게 작성한 후 복붙한다.

그리고 CSS에서 cont2와 cont3를 flexbox로 설정해준다.

 

 

그렇게 하면 결과가 위와 같이 나오게 된다.

 

이제 꼭 필요한 부분은 아니지만, 검색창 부분과 레이아웃에 쓰여진 글씨들을 가운데정렬을 한번 해보자.

 

 

text-align를 이용하면 box내의 텍스트를 정렬할 수 있다. 

 그리고 padding은 쉽게 말해, box 내부에서 바깥 여백을 의미한다.

즉, 실제 내용이 box에 작성될 때 padding 부분과 경계선(border) 부분을 제외하고 작성이 된다.

따라서 세로로 가운데 정렬을 하기 위해서 위쪽 padding을 설정해주면 된다.

 

모든 박스에 위와 같이 설정해주고, header부분에 검색창도 추가해주면 다음과 같이 완성이 된다.

 

 

 

 

 

 

PC로 보시는 것을 권장합니다.

피드백은 항상 환영입니다.