반응형
HTML에서 div 태그는 주로 웹사이트의 레이아웃 구조를 설계하고 화면을 분할할 때 쓰인다. 과거 웹사이트에서는 table 태그로 공간 분할을 많이 했지만 요즘엔 div 태그를 이용한다고 한다.
하지만 div 태그는 하나의 공간을 의미하는 태그로 정확히 어떤 역할을 하는지 알 수가 없다. 그로인해 HTML5에서 레이아웃 관련 새로운 태그들이 추가되었다. 추가된 태그는 다음과 같다.
| 태그 | 설명 |
| header | 웹사이트의 메타데이터를 담고 있고, 페이지의 타이틀을 보여주는 부분 |
| nav | 페이지 이동할 때 이용하는 부분 |
| aside | 본문 옆에 존재하면서 주로 광고나 카테고리 목록으로 이용하는 부분 |
| section | 본문을 여러 개 포함하고 있는 부분 |
| article | 본문의 주내용이 들어가는 부분 |
| footer | 웹사이트의 저작권, 대표자, 이메일 등 정보가 들어가는 부분 |
자세한 내용은 다음 포스팅에서 설명하고 div 태그로 화면을 분할하는 방법에 대해서 알아보겠다.
우선 큰 div에 여러 개의 div를 넣어주고, 큰 div에 float 속성을 꼭 넣어주면된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#full {
width: 600px;
height: 600px;
background-color: grey;
}
#screen_left {
width: 200px;
height: 600px;
background-color: black;
float: left;
}
#screenleft-1 {
width: 200px;
height: 400px;
background-color: red;
}
#screenleft-2 {
width: 200px;
height: 200px;
background-color: yellow;
}
#screenright {
width: 400px;
height: 600px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="full">
<div id="screen_left">
<div id="screenleft-1"></div>
<div id="screenleft-2"></div>
</div>
<div id="screenright"></div>
</div>
</body>
</html>
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML/CSS] <video> 태그로 간단한 동영상 설정하기(iframe 태그) (0) | 2021.12.18 |
|---|---|
| [HTML/CSS] table 태그로 표 만들기 (tr, th, td 태그) (0) | 2021.12.17 |
| [HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그) (0) | 2021.12.16 |
| [HTML/CSS] 기본적인 글꼴 태그 알아보기 (0) | 2021.12.08 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |