HTML 공간 분할 - 레이아웃

웹 페이지의 레이아웃(layout)은 콘텐츠를 깔끔하고 직관적으로 배치하여 사용자 경험을 극대화하는 데 중요한 역할을 합니다. HTML에서는 다양한 방법을 통해 레이아웃을 설계할 수 있으며, 이 글에서는 대표적인 3가지 방식을 소개합니다.

1. div 태그를 활용한 레이아웃

div 태그는 CSS와 결합하여 웹 페이지 레이아웃을 설계할 때 가장 널리 사용됩니다.
유연성과 구조적 분리가 뛰어나 레이아웃 설계에 적합한 요소입니다.

 

예제 코드

<div id="header">
    <h2>헤더(Header)</h2>
</div>

<div id="nav">
    <h2>네비게이션(Navigation)</h2>
</div>

<div id="section">
    <p>섹션(Section)</p>
</div>

<div id="footer">
    <h2>푸터(Footer)</h2>
</div>

 

위 코드처럼 div 태그를 사용하면 레이아웃을 구성하는 각각의 영역에 CSS 스타일을 쉽게 적용할 수 있습니다.
특히 float, flexbox, grid와 같은 CSS 속성을 통해 더욱 정교한 배치가 가능합니다.

2. HTML5의 시맨틱 태그 활용

HTML5는 웹 페이지의 구조를 명확히 표현하기 위해 시맨틱 태그(semantic tag)를 도입했습니다.
이 태그들은 요소의 역할을 직관적으로 나타내어 코드 가독성을 높이고 SEO(Search Engine Optimization)에도 유리합니다.

 

대표적인 시맨틱 태그

태그	설명
<header>	페이지나 섹션의 헤더 영역을 정의
<nav>	내비게이션 링크를 정의
<section>	콘텐츠 섹션을 정의
<article>	독립적인 콘텐츠(예: 글, 포스트)
<aside>	페이지의 보조 콘텐츠를 정의
<footer>	페이지나 섹션의 푸터 영역을 정의

 

예제 코드

<header>
    <h2>헤더(Header)</h2>
</header>

<nav>
    <h2>네비게이션(Navigation)</h2>
</nav>

<section>
    <p>섹션(Section)</p>
</section>

<footer>
    <h2>푸터(Footer)</h2>
</footer>

 

HTML5 시맨틱 태그는 단순히 디자인을 위한 요소가 아니라, 검색 엔진이 콘텐츠의 구조를 이해하기 쉽게 도와줍니다.
또한 브라우저 및 보조 기술에서도 효과적으로 동작합니다.

 

 

3. table 태그를 이용한 레이아웃 (비추천)

과거에는 레이아웃 설계에 <table> 태그를 사용하는 경우가 많았습니다.
하지만 table 태그는 본래 데이터를 표현하기 위해 설계된 요소로, 레이아웃을 만들기에는 비효율적입니다.
코드 유지보수가 어렵고 SEO에도 불리하므로, 현대 웹 개발에서는 사용을 권장하지 않습니다.

 

예제 코드

<table style="width:100%; border:none; text-align:center;">
    <tr>
        <td colspan="2" style="background-color:lightgrey;">
            <h2>헤더(Header)</h2>
        </td>
    </tr>
    <tr>
        <td style="background-color:#339999; color:white; width:20%;">
            <h2>네비게이션(Navigation)</h2>
        </td>
        <td style="text-align:left; height:200px;">
            <p>섹션(Section)</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFCC00;">
            <h2>푸터(Footer)</h2>
        </td>
    </tr>
</table>

 

왜 table 태그는 사용하지 않을까요?

• table 기반 레이아웃은 수정이 어렵고, 유연하지 않음
• 접근성과 SEO에서 불리
• CSS 기반의 레이아웃 설계 방식이 더 현대적이고 효율적임

결론

• div 태그는 간단하고 유연한 레이아웃 설계에 적합합니다.
• HTML5 시맨틱 태그를 활용하면 가독성과 SEO를 동시에 잡을 수 있습니다.
• table 태그는 레이아웃 설계용으로는 적합하지 않으므로 피해야 합니다.

웹 페이지 레이아웃 설계 시, HTML5 시맨틱 태그를 적극 활용하고, CSS의 다양한 기능을 결합하여 사용자 경험을 극대화해 보세요.