[HTML] 공간 분할

 

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 블록(block) 혹은 인라인(inline)  두 가지 값 중 하나를 가지고 있습니다.

 

1. 블록(block) 타입의 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작합니다. 그리고 해당 라인의 모든 너비를 차지합니다.

<p>p tag는 display block 속성을 가지고 있습니다.</p>

태그	속성
<p>	block
<div>	block
<h>	block
<ul>	block
<ol>	block
<form>	block

 

2. 인라인(inline) 타입의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 그리고 해당 라인의 모든 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

<span>span tag는 display inline 속성을 가지고 있습니다 </span>

 

3. iframe 

iframe은 inline frame의 약자로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다.

<iframe src="삽입할 페이지 주소"></iframe>

iframe 요소는 frame 요소와 달리 종료 태그가 존재합니다. 또한 iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정됩니다.  iframe 요소는 기본적으로 검정색 테두리를 가지고 있습니다. 하지만 style 속성에서 border 속성을 이용하면 변경할 수 있습니다.

<iframe src="삽입할 페이지 주소" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>

테두리를 표시하고 싶지 않다면 border 속성값을 none으로 설정하면 됩니다.

<iframe src="삽입할 페이지 주소" style="border: none;"></iframe>

iframe은 웹 페이지 안의 또 다른 페이지로 기존 페이지를 변경하는 것처럼 iframe 요소의 페이지도 변경할 수 있습니다.

<iframe src="삽입할 페이지 주소" name="frame-target"></iframe>
<p> 
	<a href="변경할 페이지 주소" target="frame-target"></a>
</p>

 

4. 프레임셋(frameset)

프레임셋(frameset)을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있습니다. 이러한 프레임 셋은 iframe 요소와 달리 하나 이상의 페이지를 동시에 가질 수 있습니다. 단 noresize 속성을 명시하지 않으면 사용자가 마음대로 페이지의 크기를 조절할 수 있습니다. 프레임셋에서 각각의 페이지는 frame 요소로 표현되며 frame 요소는 iframe 요소와 달리 종료태그를 가지지 않는 empty tag 입니다. noframes 요소는 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 권장합니다.

 

하지만 frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원하지 않습니다. 따라서 하나의 브라우저 창에 여러 페이지를 표현하고 싶을 때는 iframe 요소를 사용하거나 CSS를 이용하여 표현해야합니다.

 

5. 레이아웃(Layout)

레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.  HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공하고 있습니다. 이러한 요소들을  의미(semantic) 요소라고 부릅니다.

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다.

의미 요소	설명
<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의합니다.
<nav>	HTML 문서의 탐색 링크를 정의합니다.
<section>	HTML 문서에서 섹션(section) 부분을 정의합니다.
<article>	HTML 문서에서 독립적인 하나의 글(article) 부분을 정의합니다.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의합니다.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer) 를 정의합니다.