[HTML] 구성 관련 요소

HTML : 구조 관련 요소 = 시멘틱 태그

시멘틱 태그란 해석 그대로 의미가 있는 태그로도 볼 수 있습니다. 즉 구조를 나타내는 태그로 정보를 구체적으로 선언하여 웹표준과 접근성을 준수하기 위한 태그이기도 합니다.
먼저 구조 요소가 어떤 것이 있는지 살펴본 후 시멘틱 태그를 사용하여 레이아웃을 구성해보도록 하겠습니다.

---

구조 관련 요소(=시멘틱 태그)

구조 관련 요소에는 <header>, <section>, <footer>, <nav>, <article>, <aside>가 있습니다.

요소 유형	태그형	태그의 의미 및 특징
블록 레벨 요소	<header> </header>	1. HTML문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있다.
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만,<header>, <footer> 태그는 포함할 수 없다.
	<section> </section>	1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며, 섹션 주세에 대한 제목 요소 (<h2> ~ <h6>) 를 포함하는 게 좋다.
		2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있다.
	<footer> </footer>	1. HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있다.
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만,<header>, <footer> 태그는 포함할 수 없다.
	<nav> </nav>	1. HTML문서의 메인 메뉴나 목차 등을 정의해 주는 태그이다.
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다.
	<article> </article>	1. HTML문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소 (<h2> ~ <h6>)를 포함하는 것이 좋다.
		2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있다.
	<aside> </aside>	1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 사용된다.
		2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있다.

---

#1. HTML

다음은 위 요소들로 HTML 마크업을 해보도록 하겠습니다!

<div id="wrap" class="container score">
    <header id="header" class="header__box">
        <h1>반응형 웹</h1>
        <nav>
            <ul>
                <li><a href="#"></a>메뉴01</li>
                <li><a href="#"></a>메뉴02</li>
                <li><a href="#"></a>메뉴03</li>
                <li><a href="#"></a>메뉴04</li>
                <li><a href="#"></a>메뉴05</li>
            </ul>
        </nav>
    </header>
    <main id="main" class="main__box">
        <div class="section__box">
            <section class="st01">
                <h2>콘텐츠 그룹01</h2>
            </section>
            <section class="st02">
                <h2>콘텐츠 그룹02</h2>
            </section>
        </div>
        <div class="article__box">
            <article>
                <h2>주요 기사</h2>
            </article>
            <aside>광고</aside>
        </div>
    </main>
    <footer id="footer" class="footer__box">
        <div class="footer__main">
            <address>경기도 XXX XXXX 031)000-0000 honggildong@naver.com</address>
            <p>COPYRIGHT © All rights reserved.</p>
        </div>
    </footer>
</div>

---

#2. css

마크업에 스타일을 부여해보겠습니다!
아직 미숙하니 그저 참고만 해주세요!

@import url('https://webfontworld.github.io/score/SCoreDream.css');

.score {
    font-family: 'SCoreDream';
    font-weight: 400;
    font-size: 18px;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-weight: normal;
    font-size: 18px;
}

ul {
    list-style: none;
}

ul a {
    text-decoration: none;
    color: #000;
}

/* container */
.container {
    width: 1200px;
    height: 1060px;
    margin: 0 auto;
    background: #eee;
}

.container .header__box {
    width: 100%;
    height: 200px;
    background-color: #d7c8d5;
    display: flex;
}
.container .header__box h1 {
    display: inline-block;
    width: 140px;
    height: 140px;
    margin: 30px 30px;
    background-color: #be9bbb;
    text-align: center;
    line-height: 140px;
}

.container .header__box nav {
    width: 970px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    margin: 100px 30px 30px;
    background-color: #be9bbb;
}

.container .header__box nav ul li {
    margin: 0 50px;
    display: inline-block;
    justify-content: space-between;
}

/* main */
.container .main__box {
    box-sizing: border-box;
    height: 600px;
    background-color: #d7c8d5;
    margin-top: 30px;
    padding-top: 30px;
    display: flex;
    justify-content: space-evenly
}
.container .main__box section {
    width: 400px;
    height: 540px;
    text-align: center;
    line-height: 540px;
    background-color: #be9bbb;
}
.container .main__box .section__box {
    display: flex;
}
.container .main__box .section__box .st01 {
    margin-right: 30px;
}
.container .main__box .article__box {
    text-align: center;
    line-height: 255px;
}
.container .main__box article {
    width: 280px;
    height: 255px;
    margin-bottom: 30px;
    background-color: #be9bbb;
}
.container .main__box aside {
    width: 280px;
    height: 255px;
    background-color: #be9bbb;
}

/* footer */
.container .footer__box {
    height: 200px;
    background-color: #d7c8d5;
    margin-top: 30px;
    display: flex;
    justify-content: right;
}
.container .footer__box .footer__main {
    justify-content: center;
    margin: 30px;
    height: 200px;
    line-height: 200px;
}
.container .footer__main > address {
    width: 970px;
    height: 65px;
    margin: 0 0 10px;
    line-height: 70px;
    text-align: center;
    background-color: #be9bbb;
}
.container .footer__main > p {
    width: 970px;
    height: 65px;
    line-height: 70px;
    text-align: center;
    background-color: #be9bbb;
}

---

결과보기

원본 소스 보기

원본 페이지 보기