[Html] 공간 분할 방법 - 블록/인라인

HTML 레이아웃(Layout) 방법

• 과거에는 table 요소를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 의미(semantic) 요소나 div 요소를 사용하여 레이아웃을 구성한다.
• div 태그는 의미론적으로 의미가 없기 때문에 HTML5에서 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에 따라서 작동하지 않기 때문에 주의가 필요하다.

1. 의미요소를 이용한 레이아웃

• HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공하는데 이를 의미(semantic) 요소라고 한다.

<header><h2>Header 영역</h2></header>
<nav><h2>Nav 영역</h2></nav>
<section><p>Section 영역</p></section>
<footer><h2>Footer 영역</h2></footer>

2. 공간 분할 요소를 이용한 레이아웃

• div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용된다.

<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>

3. table 요소를 이용한 레이아웃

• table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니며 수정이 매우 힘드므로 현재는 거의 사용하지 않는다.

<table width="100%" style="text-align:center; border:none">
    <tr>
        <td colspan="2" style="background-color:lightgrey"><h2>Header 영역</h2></td>
    </tr>
    <tr>
        <td style="background-color:#339999; color:white; width:20%"><h2>Nav 영역</h2></td>
        <td style="height:200px; text-align:left"><p>Section 영역</p></td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFCC00"><h2>Footer 영역</h2></td>
    </tr>
</table>

 

디스플레이 속성값

• HTML의 모든 요소는 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성값으로 ① 블록(block)과 ② 인라인(inline) 값 중 하나를 가진다.

블록(block) 타입 - div

• <p>, <div>, <h>, <ul>, <ol>, <form>요소는 대표적인 블록 타입 요소로, 언제나 새로운 라인에서 시작하며 해당 라인의 모든 너비를 차지한다.
• <div>는 여러 요소들을 하나로 묶어 스타일을 한 번에 적용하기 위해 사용되며, 문서 전체를 block 형식으로 나눈다.

<div style="background-color:lightgrey; color:green; text-align:center">
    <h1>div요소를 이용한 스타일 적용</h1>
    <p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
    한 번에 스타일을 적용할 수 있다.</p>
</div>

인라인(inline) 타입 - span

• <span>, <a>, <img>요소는 대표적인 인라인 타입 요소로, 새로운 라인에서 시작하지 않고 요소의 너비도 해당 요소의 내용만큼만 차지한다.
• <span>는 텍스트의 특정 부분을 묶어 따로 스타일을 적용하기 위해 사용되며, 웹 문서의 한 줄에 대해서 inline 형식으로 분할한다.

<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/