HTML, 웹페이지의 구조를 정의하는 문서
앞서 두 번의 포스팅에서 확인하였듯이 HTML문서는 기본 구조를 가지고 있다.
이 기본 구조를 통해 웹페이지의 어느 부분이 제목 영역이며, 어느 부분이 본문 영역인지 HTML문서는 결정한다. 따라서 HTML문서는 웹페이지의 구조를 정의한다고 할 수 있겠다.
또한, <title>과 <p>태그 역시, 태그 안의 내용을 웹페이지의 어느 영역에 표시할지 결정한다는 기능으로 미루어보면 역시나 웹페이지의 구조를 정의하는데 일조하고 있다.
웹페이지를 하나의 간단한 문서로 본다면 '제목'과 '본문'이라는 이분법적인 구조만으로 충분할 지 모르겠으나 인터넷 상의 웹페이지들은(유명 포털사이트와 각종 홈페이지를 포함하여) 제목과 본문만으로 이루어져있지는 않다.
한 페이지에 여러 구획으로 나뉘어진 홈페이지
아래는 타블렛 PC에서 접속한 네이버의 메인화면이다.
매일 보는 익숙한 화면이지만 이번 포스팅에서는 구조라는 관점에서 뜯어 보았다. 네이버의 메인화면은 크게 4가지 영역으로 나뉘어 있음을 알 수 있다.
HTML이 웹페이지의 구조를 다루는 문서라면 네이버의 메인화면처럼 웹페이지를 여러 영역으로 나누는 것 역시 HTML문서를 이용하여 가능하지 않을까?
결론적으로, 가능하다.
<div> 태그로 웹문서를 구획화 할 수 있다.
HTML은 여러가지 기능을 가진 태그의 사용을 지원하며 웹페이지를 구획화하는 태그도 존재한다. <div>태그가 그것이다.
사용법은 간단하다. 아래처럼 <div> 여는 태그와 </div> 닫는 태그를 적어주는 것만으로 충분하다.
<head>
<title>구획 나누기</title>
</head>
<body>
<div>
<div></div>
</div>
</body>
위 html 문서를 브라우저에서 실행하면 아래처럼 나온다.
텅빈 화면이 나왔다. 내가 나눈 구획은 모두 다 어디로 가버린 것일까?
내가 나눈 구역을 확인하고 싶다면?
구역의 테두리를 회색선으로 처리하든, 구역의 전체를 특정한 색으로 채우든해야 내가 나눈 구역의 형태를 확인할 수 있다.
다만, 이런 선처리, 배경색처리는 HTML문서의 영역이 아니다. 이런 처리들은 모두 CSS를 통해 이루어진다.
아래는 내가 나눈 영역의 범위를 눈으로 확인하기 위하여 각 영역에 CSS효과를 추가한 HTML 문서이다.
<head>
<title>구획 나누기</title>
</head>
<body>
<div style="border:1px solid #000000; margin:10px; width:400px; height:400px">
<p>첫번째 영역</p>
<div style="border:1px solid #000000; margin:10px; width:90%; height:50%">
<p>두번째 영역</p>
</div>
</div>
</body>
브라우저에서 실행해보면 웹페이지 문서 위에 두 개의 영역이 나타나는 것을 확인할 수 있다.
'HTML' 카테고리의 다른 글
| [HTML] padding을 입은 div 사이엔 간격(margin)이 필요해 (0) | 2021.03.19 |
|---|---|
| [HTML] HTML문서에 이미지를 넣어보자 (0) | 2021.03.15 |
| [HTML] HTML 문서의 기본 구조를 파헤쳐보자(2) (0) | 2021.03.01 |
| [HTML] HTML 문서의 기본 구조를 파헤쳐보자(1) (0) | 2021.02.22 |
| [HTML] 나는 왜 HTML을 배우는가? (0) | 2021.02.21 |
댓글