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

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

 

 

정말 기초적인 HTML/CSS 지식으로 정말 기초적인 Youtube 사이트의 레이아웃을 만들어 보자.

 

 (본문에서 사용되는 코드에 대해서는 대략적으로 설명하는 부분이 많고, 레이아웃을 만드는 것 자체에 초점을 두었기 때문에 

자세히 알고 싶다면 따로 검색을 해보는 것을 권장한다.)

 

(필자가 실제로 학습한 기초적인 지식을 이용하므로 코드가 깔끔하지 않을 수 있다는 점 주의하자......)

 

 

만들고자 하는 목표는 위의 사이트를 그대로 구현하는 것이 아니라, 기초적인 틀만 만드는 것이다.

즉, 위의 예시에서 왼쪽에 나와있는 메뉴바, 메인에 있는 광고, 주제별 영상 등이 담기는 '틀'을 의미한다.

 

매우 기초적인 HTML/CSS 지식을 이용하기 때문에 처음 HTML/CSS를 배우는 사람들에게 연습용으로는 괜찮을 것 같다.

 

우선 홈페이지부터 만들어보자.

해당 코드는 웹 페이지를 만들기 위한 가장 기본적인 틀이다. C언어를 예로 들면

#include<stdio.h>

int main(void){ }

정도라고 생각하면 될 것 같다.

(이 부분 (html, head, body)은 자세히 설명하지는 않겠다.)

 

  

 

위의 코드처럼 'title' 태그를 이용하면 탭의 이름을 바꿀 수 있다.

title 태그는 head 태그 안에 작성해야 한다는 점을 유의하자.

이 상태에서는 화면으로 나타나는 홈페이지에는 아무 것도 나타나지 않는다. 

 

화면에 나타나는 부분은 'body' 태그 안에 작성해야 한다.

우선 header라는 semantic tag를 이용하자.

semantic tag는 코더가 임의로 tag에 이름을 붙여 의미를 부여하는 것이다.

Youtube의 최상단 줄을 만드는 과정이므로 이름은 header로 하였다.

위의 코드를 실행시키면 아래와 같이 Youtube 글자가 제일 위에 생기게 된다. 

 

제일 최상단 줄을 만들었으니 이제 메뉴바, 동영상 등이 나오는 본문을 만들어보자.

 

 

최상단 줄의 아래 부분을 main이라고 이름을 짓고, main안에

왼쪽의 메뉴바인 menu와 동영상 목록이 나타나는 content로 구분하였다.

그리고 이 둘을 하나의 div로 묶어 middle로 설정하였다.

단순히 이렇게 코드를 작성하면 Youtube 아래에 menu, 그 아래에 content라는 글자가 바로 출력이 된다.

즉, 우리가 원하는대로 왼쪽에 menu, 오른쪽에 content 로 나타나지 않는다는 것이다.

 

따라서 이제부터 CSS를 이용할 것이다.

HTML에서 div라는 태그는 div 태그 하나 당 한 줄을 차지하기 때문에 동일한 줄에서

왼쪽에 menu, 오른쪽에 content를 나타내려면 CSS를 이용하여야 한다.

 

우선 CSS파일을 생성하자.

CSS 파일 (style.css)을 생성하고 HTML 파일과 연결하기 위해서는 위와 같이 link를 해주어야 한다.

rel 속성은 연결하는 파일이 현재 문서와 어떠한 관계인지를 나타낸다.

이 코드에서는 style.css 파일이 스타일시트로 연결되는 경우이다.

 

그리고 type 속성은 연결 문서의 유형을 의미한다.

CSS파일인 경우 위와 같이 text/css로 작성해준다.

(js 파일인 경우는 text/javascript , xml 파일인 경우는 application/xml)

 

그리고 href는 파일을 연결하는 속성이다.

 

이제 CSS 파일을 작성해보자.

 

 

우선 처음에 box의 기본 사이즈를 content-box 에서 border-box로 바꾼다.

 

그리고 Youtube 글씨가 적히는 header의 높이를 50px로 하고, 아래 경계선을 회색으로 바꿔준다.

실제로 경계선이 나타나도록 하기 위해서는 경계션의 두께와, 선 스타일 속성도 추가해줘야 한다. (추후에 추가된다)

여기서 주의할 점은 semantic tag는 앞에 점을 붙이지 않는다.

 

왼쪽의 메뉴바를 의미하는 menu는 너비를 200px로 설정하고, 배경색을 #dcdcdc색으로 바꿔준다.

CSS에서 배경이나 선 등의 색을 #_ _ _ _ _ _ 로도 설정할 수 있는데, #뒤에 오는 6자리 수는 16진수로

RGB에서 앞의 두자리는 R, 중간 두자리는 G, 뒤의 두자리는 B를 의미한다. 

그러므로 예를 들어 #101010과 같이 작성한다면 R:G:B = 16:16:16인 색을 의미한다. 

(위의 dcdcdc는 연한 회색이다)

 

그리고 이제 원하는 바였던 menu와 content를 한줄에 이어서 표시하기 위해서는

menu와 content를 묶고 있던 middle 박스에 display : flex라는 속성을 추가해준다.

이는 middle 박스를 flexbox로 설정하겠다는 의미이다.

 

따라서 위의 style.css 파일을 작성하고 실행을 시키면 아래와 같이 나오게 된다.

 

이제 조금 더 Youtube 사이트와 비슷하도록 각각의 박스를 수정해보자.

 

header 박스의 경계선을 조금 수정하고, 나타나도록 작성하였다.

아래 경계선의 두께와 색, 그리고 선 스타일도 설정하였다.

 

그리고 menu 박스의 높이도 설정을 하고, 상단 여백도 설정하였다.

content 박스의 경우 이전에는 글씨가 경계선에 붙어서 나왔기 때문에 왼쪽 여백을 추가하였다.

그리고 menu와 content를 포함하는 middle박스의 배경색도 설정을 하였다.

 

그 결과는 아래와 같이 나왔다.

 

이제 실제 Youtube 사이트와 비교하였을 때 배경 틀은 비슷(?)하게 나온 것을 알 수 있다.

 

다음 게시글에서는 menu 박스와 content 박스에 구체적으로 틀을 만들어 보겠다.

 

 다음 게시글 : https://wogud6792.tistory.com/17

 

 

 

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

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