레이아웃(HTML5 추가 의미요소)

Mark Up/Html 레이아웃(HTML5 추가 의미요소)

Dexter_- 2018. 10. 4. 09:57

728x90

레이아웃

HTML 레이아웃(Layout)

📌 레이아웃(layout) 이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다.

웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다.

HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있다.

div 요소를 이용한 레이아웃
HTML5 레이아웃
table 요소를 이용한 레이아웃

div 요소를 이용한 레이아웃

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML Layouts</title>
    <style>
        #header {
            background-color:lightgrey;
            height:100px;
        }
        #nav {
            background-color:#339999;
            color:white;
            width:200px;
            height:300px;
            float:left;
        }
        #section {
            width:200px;
            text-align:left;
            float:left;
            padding:10px;
        }
        #footer {
            background-color:#FFCC00;
            height:100px;
            clear:both;
        }
        #header, #nav, #section, #footer { text-align:center; }
        #header, #footer { line-height:100px; }
        #nav, #section { line-height:240px; }
   </style>
</head>

<body>
    <h1>div 요소를 이용한 레이아웃</h1>
    <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>
</body>

</html>

실행결과 :

HTML5 레이아웃

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML Layouts</title>
    <style>
        header {
            background-color:lightgrey;
            height:100px;
        }
        nav {
            background-color:#339999;
            color:white;
            width:200px;
            height:300px;
            float:left;
        }
        section {
            width:200px;
            text-align:left;
            float:left;
            padding:10px;
        }
        footer {
            background-color:#FFCC00;
            height:100px;
            clear:both;
        }
        header, nav, section, footer { text-align:center; }
        header, footer { line-height:100px; }
        nav, section { line-height:240px; }
   </style>
</head>

<body>
    <h1>HTML5 레이아웃</h1>
    <header>
        <h2>HEADER 영역</h2>
    </header>
    <nav>
        <h2>NAV 영역</h2>
    </nav>
    <section>
        <p>SECTION 영역</p>
    </section>
    <footer>
        <h2>FOOTER 영역</h2>
    </footer>
</body>
</html>

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

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

의미 요소(semanic element)

📌 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.

의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있다. 하지만 의미 요소인 table요소는 코드를 보지 않아도 해당 요소가 표를 만드는데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있다.

HTML5에서 추가된 의미 요소

📌 HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같다.

header 요소
nav 요소
main 요소
section 요소
article 요소
figure와 figcaption 요소
footer 요소

header 요소

📌header 요소는 HTML 문서나 섹션(section) 부분에 대한 헤어(header)를 정의 한다. 헤더(header)란 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미한다. 또한, 한 문서 내에 여러 개의 header 요소가 존재할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <header>
        <h1>전체 문서에 대한 헤더(header)입니다.</h1>
    </header>

    <section>
        <header>
            <h2>섹션 부분에 대한 헤더(header)입니다.</h2>
            <p>헤더 부분에 들어간 단락입니다.</p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
        </p>
    </section>
</body>
</html>

실행결과 :

전체 문서에 대한 헤더(header)입니다.

섹션 부분에 대한 헤더(header)입니다.

헤더 부분에 들어간 단락입니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.

nav 요소

📌 nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의한다. nav 요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav 요소에 포함되는 것은 아니다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <nav>
        <a href="/html/html5_element_semantic">의미 요소</a> |
        <a href="/html/html5_element_form">Forms 요소</a> |
        <a href="/html/html5_element_inputtype">Input 요소</a>
    </nav>
    
    <p>문서 내의 링크가 모두 nav 요소에 포함되는 것은 아니에요!</p>
    <p>이 링크는 nav 요소에 포함되지 않는 <a href="/html/html5_element_inputattr">Input 요소의 속성</a>
    에 관한 링크에요!</p>

</body>
</html>

실행결과 :

의미 요소 | Forms 요소 | Input 요소

문서 내의 링크가 모두 nav 요소에 포함되는 것은 아니에요!

이 링크는 nav 요소에 포함되지 않는 Input 요소의 속성 에 관한 링크에요!

section 요소

📌 section 요소는 HTML 문서에서 섹션(section) 부분을 정의한다. 섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집함을 의미한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <section>
        <h2>섹션(section) 영역입니다.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
        </p>
    </section>

    <section>
        <h2>또 다른 섹션(section) 영역입니다.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
        </p>
    </section>

</body>
</html>

실행결과 :

섹션(section) 영역입니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.

또 다른 섹션(section) 영역입니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.

article 요소

📌 article 요소는 HTML 문서에서 독립적인 하나의 기사(article)부분을 정의한다. article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <article>
        <h2>기사(article) 영역입니다.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
        </p>
    </article>

    <article>
        <h2>또 다른 기사(article) 영역입니다.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
        </p>
    </article>
</body>
</html>

실행결과 :

기사(article) 영역입니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.

또 다른 기사(article) 영역입니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.

위의 두 예제를 살펴보면 section 요소와 article 요소 간의 별다른 차이점을 발견할 수 없을 것이다. 실제로도 두 요소 간의 쓰임에 있어 큰 차이를 보이지는 않는다. 대체로 section요소는 HTML 문서의 전체적인 내용에 포함되며, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 된다.

figure 요소와 figcaption 요소

📌 책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션(caption)이 위치하게 된다.

HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있다.

figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용한다.

figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <h1>figure 요소와 figcaption 요소</h1>

    <figure>
        <img src="https://blog.hmgjournal.com/images_n/contents/180508_flower01.jpg" alt="flowers" width="350" height="263">
        <figcaption>[ 그림 1. 위의 그림은 이쁜 꽃이네요! ]</figcaption>
    </figure>
</body>
</html>

실행결과 :

figure 요소와 figcaption 요소

[ 그림 1. 위의 그림은 이쁜 꽃이네요! ]

footer 요소

📌 footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의한다.

또한, 한 문서 내에 여러개의 footer 요소가 존재할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Semantic Elements</title>
</head>
<body>

    <footer>
        <p>전체 문서에 대한 푸터(footer)입니다.</p>
        <p>Copyright 2016. 지은이 all rights reserved.</p>
        <p>연락처 : 02-1234-5678</p>
    </footer>

</body>
</html>

실행결과 :

전체 문서에 대한 푸터(footer)입니다.

Copyright 2016. 지은이 all rights reserved.

연락처 : 02-1234-5678

HTML5 에서 추가된 의미요소

📌 의미 요소가 추가되기 전인 HTML4까지는 div 요소를 사용하여 레이아웃을 작성했다.

의미 요소	설명
<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함
<nav>	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함
<main>	HTML 문서의 주요 콘텐츠(content)를 정의함
<section>	HTML 문서에서 섹션(section) 부분을 정의함
<article>	HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함
<figure>	HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함
<figcaption>	figure 요소를 위한 캡션을 정의함
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함
<bdi>	기존 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함
<mark>	하이라이팅된 텍스트를 정의함
<details>	사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함
<summary>	details 요소에 나타날 내용을 정의함
<dialog>	다이얼로그 <dialog> 박스나 다이얼로그 윈도우를 정의함
<menuitem>	사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함
<meter>	정해진 범위내의 스칼라 치수를 정의함
<progress>	작업에 대한 진행 정도를 정의함
<ruby>	루비(ruby) 문자를 정의함
<rt>	본문 위에 나타날 문자를 정의함
<rp>	루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함
<time>	날짜와 시간을 정의함
<wbr>	br 요소와 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈할 곳을 미리 정의함

table 요소를 이용한 레이아웃

📌 table 요소를 이용하여 레이아웃을 작성하는 방법은 오래전에 사용하던 방식이며, 현재는 거의 사용하지 않는다.

table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니므로, 테이블로 작성된 레이아웃은 수정이 매우 힘들다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML Layouts</title>
</head>

<body>
    <h1>table 요소를 이용한 레이아웃</h1>
    <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>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'Mark Up > Html' 카테고리의 다른 글

HTML 과 CSS (0)	2018.10.04
form 요소(feat.input 요소) (0)	2018.10.04
블록과 인라인 (0)	2018.10.04
HTML 색 (0)	2018.10.03
문자셋(Character set) (0)	2018.10.03

Embedded Software Embedded Software

HTML 레이아웃(Layout)

div 요소를 이용한 레이아웃

HTML5 레이아웃

의미 요소(semanic element)

HTML5에서 추가된 의미 요소

header 요소

전체 문서에 대한 헤더(header)입니다.

섹션 부분에 대한 헤더(header)입니다.

nav 요소

section 요소

섹션(section) 영역입니다.

또 다른 섹션(section) 영역입니다.

article 요소

기사(article) 영역입니다.

또 다른 기사(article) 영역입니다.

figure 요소와 figcaption 요소

figure 요소와 figcaption 요소

footer 요소

HTML5 에서 추가된 의미요소

table 요소를 이용한 레이아웃

'Mark Up > Html' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바