반응형
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 태그) (1) | 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 |