[HTML] HTML - 16.레이아웃

이번 시간에는 HTML에 레이아웃에

대해 배워보도록 하겠습니다.

 

HTML 레이아웃(layout)

 

레이아웃(layout)이란 특정 공간에 

여러 구성 요소를 보기 좋게 효과적으로

배치하는 작업을 의미합니다.

 

웹 페이지의 레이아웃은 

웹 사이트의 외관 사항을 결정하는데

매우 중요한 요소입니다.

HTML에서 다음과 같이 레이아웃을 

작성할 수 있습니다.

1. div 요소를 이용한 레이아웃
2. HTML5 레이아웃
3. table 요소를 이용한 레이아웃

---

div 요소를 이용한 레이아웃

 

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>

---

HTML5 레이아웃

 

HTML5에서 웹 페이지의 레이아웃만을

위한 별도의 새로운 요소들을 제공합니다.

 

이러한 요소들을 

의미(semantic) 요소라 합니다.

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

---

table 요소를 이용한 레이아웃

 

table 요소를 이용해 레이아웃을 

작성하는 방법은 오래전 사용하던 

방식으로 현재는 거의 사용하지 않습니다.

 

table 요소는 레이아웃을 만들기 위해

설계된 요소가 아니므로,

 

테이블로 작성된 레이아웃은

수정이 매우 힘듭니다.

<table width="100%" style="text-align:center; border:none">
   <tr>
      <td colspan="2" style="background-color:lightgray"><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>

---

참고 자료

코딩교육 티씨피스쿨

 

GitHub - Koras02/html-study: html 블로그 작성용 - study1