[CSS] HTML5 시멘틱 태그란? 웹 표준을 준수하는 마크업 가이드

crushed-taro 2025. 3. 23. 13:09

728x90

[CSS] CSS 애니메이션 완벽 가이드 | keyframes와 transition 활용법

[CSS] CSS 변형(Transform) 속성 완벽 가이드 | 회전, 크기 조절, 기울이기 [CSS] CSS 변형(Transform) 속성 완벽 가이드 | 회전, 크기 조절, 기울이기[CSS] CSS 레이아웃 스타일 총정리 | 반응형 웹 디자인 필수

crushed-taro.tistory.com

1. 시멘틱 태그

HTML5에서 새롭게 추가된 시멘틱 태그는 문서의 구조를 더욱 명확하게 표현 가능
이 태그들은 검색 엔진, 웹 브라우저, 스크린 리더 등이 내용을 이해하는 데 도움이 됨

<header>	문서의 머리말을 나타냅니다. 일반적으로 로고, 검색 창, 메뉴 등이 포함됨
<nav>	문서의 네비게이션 링크를 나타냄
<article>	문서에서 독립적으로 구분되거나 재사용 가능한 영역을 나타냄. 일반적으로 블로그 글, 뉴스 기사 등이 포함됨
<section>	문서에서 관련된 콘텐츠를 그룹화하는 영역을 나타냄
<aside>	문서의 본문과 직접적인 연관성은 적지만, 부가 정보를 제공하는 영역을 나타냄. 일반적으로 광고, 사이드바, 카테고리 목록 등이 포함됨
<footer>	문서의 꼬리말을 나타냄. 일반적으로 저작권 정보, 연락처, 소셜 미디어 링크 등이 포함됨
<main>	문서의 주요 컨텐츠를 나타냄

2. 시멘틱 태그 예제 1

예제 코드

k<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            background: blue;
            width: 500px;
            height: 50px;
        }
        nav {
            float: left;
            width: 80px;
            height: 300px;
            background: red;
        }

        section {
            float: left;
            width: 340px;
            height: 300px;
            background: green;
        }

        article {
            width: 300px;
            height: 90px;
            margin: auto;
        }

        .a1 {
            background: yellowgreen;
        }
        .a2 {
            background: pink;
        }
        .a3 {
            background: cyan;
        }

        aside {
            float: left;
            width: 80px;
            height: 300px;
            background: cornsilk;
        }

        footer {
            width: 500px;
            background: purple;
        }

    </style>
</head>
<body>

    <!-- HTML5의 레이아웃인 시멘틱 태그를 CSS를 적용하여 알아보자. -->

    <!--
        header: 머리말로 주로 로그인(form태그), 검색(form태그), 메뉴(nav태그)가 존재
        nav: 메뉴와 관련된 태그로 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그
             (네비게이션 태그)(주로 사이드 또는 header 안에 존재)
        section: 웹 화면의 컨텐츠가 들어가는 영역으로 주제별로 영역을 나누어 묶을 때 사용하며
                 화면이 전환되는 것(페이지가 바뀜)과 관련된 태그이다.
                 주제별로 article 태그를 묶어주는 태그이기도 하다.
        article: 웹 페이지는 내용(기사거리, 하나의 세부 주제에 대한 내용)이 들어가는 영역
                 내부에 또 다른 section 태그를 가질 수 있음
        aside: 사이드 바로 본문 외에 광고나 링크 모음 같은 기타 내용을 담고 있음
               왼쪽이나 오른쪽 사이드에 존재
        footer: 맨 아래쪽에 위치하는 태그로써 회사, 저작권, 연락처 관련 정보를 지니고 있음

        시멘틱 태그는 clear="both" 속성이 기본적으로 적용된 태그들이다.
    -->
    <h1>페이지 레이아웃 설정</h1>
    <br>
    <header>header</header>

    <nav>nav</nav>

    <section>section
        <!-- article.a$*3{article}         -->
        <article class="a1">article</article>
        <article class="a2">article</article>
        <article class="a3">article</article>
    </section>

    <aside>aside</aside>
    <footer>footer</footer>
</body>
</html>

결과 화면

3. 시멘틱 태그 예제 2

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            background: blue;
            width: 500px;
            height: 50px;
        }

        nav {
            width: 400px;
            height: 30px;
            background: red;
            margin: auto;
        }

        section {
            float: left;
            width: 420px;
            height: 300px;
            background: green;
        }

        article {
            width: 300px;
            height: 90px;
            margin: auto;
        }

        .a1 {
            background: yellowgreen;
        }
        .a2 {
            background: pink;
        }
        .a3 {
            background: cyan;
        }

        aside {
            float: left;
            width: 80px;
            height: 300px;
            background: cornsilk;
        }

        footer {
            width: 500px;
            background: purple;
        }

    </style>
</head>
<body>

    <!-- HTML5의 레이아웃인 시멘틱 태그를 CSS를 적용하여 알아보자. -->

    <!--
        header: 머리말로 주로 로그인(form태그), 검색(form태그), 메뉴(nav태그)가 존재
        nav: 메뉴와 관련된 태그로 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그
             (네비게이션 태그)(주로 사이드 또는 header 안에 존재)
        section: 웹 화면의 컨텐츠가 들어가는 영역으로 주제별로 영역을 나누어 묶을 때 사용하며
                 화면이 전환되는 것(페이지가 바뀜)과 관련된 태그이다.
                 주제별로 article 태그를 묶어주는 태그이기도 하다.
        article: 웹 페이지는 내용(기사거리, 하나의 세부 주제에 대한 내용)이 들어가는 영역
                 내부에 또 다른 section 태그를 가질 수 있음
        aside: 사이드 바로 본문 외에 광고나 링크 모음 같은 기타 내용을 담고 있음
               왼쪽이나 오른쪽 사이드에 존재
        footer: 맨 아래쪽에 위치하는 태그로써 회사, 저작권, 연락처 관련 정보를 지니고 있음

        시멘틱 태그는 clear="both" 속성이 기본적으로 적용된 태그들이다.
    -->
    <h1>페이지 레이아웃 설정</h1>
    <br>
    <header>header

        <nav>nav</nav>
    </header>

    

    <section>section
        <!-- article.a$*3{article}         -->
        <article class="a1">article</article>
        <article class="a2">article</article>
        <article class="a3">article</article>
    </section>

    <aside>aside</aside>
    <footer>footer</footer>
</body>
</html>

결과 화면

4. 시멘틱 태그 예제 3

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            background: blue;
            width: 500px;
            height: 50px;
        }

        nav {
            width: 400px;
            height: 30px;
            background: red;
            margin: auto;
        }

        section {
            float: left;
            width: 420px;
            height: 300px;
            background: green;
        }

        article {
            width: 300px;
            height: 90px;
            margin: auto;
        }

        .a1 {
            background: yellowgreen;
        }
        .a2 {
            background: pink;
        }
        .a3 {
            background: cyan;
        }

        aside {
            float: left;
            width: 80px;
            height: 300px;
            background: cornsilk;
        }

        footer {
            width: 500px;
            background: purple;
        }

        .wrap {
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>

    <!-- HTML5의 레이아웃인 시멘틱 태그를 CSS를 적용하여 알아보자. -->

    <!--
        header: 머리말로 주로 로그인(form태그), 검색(form태그), 메뉴(nav태그)가 존재
        nav: 메뉴와 관련된 태그로 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그
             (네비게이션 태그)(주로 사이드 또는 header 안에 존재)
        section: 웹 화면의 컨텐츠가 들어가는 영역으로 주제별로 영역을 나누어 묶을 때 사용하며
                 화면이 전환되는 것(페이지가 바뀜)과 관련된 태그이다.
                 주제별로 article 태그를 묶어주는 태그이기도 하다.
        article: 웹 페이지는 내용(기사거리, 하나의 세부 주제에 대한 내용)이 들어가는 영역
                 내부에 또 다른 section 태그를 가질 수 있음
        aside: 사이드 바로 본문 외에 광고나 링크 모음 같은 기타 내용을 담고 있음
               왼쪽이나 오른쪽 사이드에 존재
        footer: 맨 아래쪽에 위치하는 태그로써 회사, 저작권, 연락처 관련 정보를 지니고 있음

        시멘틱 태그는 clear="both" 속성이 기본적으로 적용된 태그들이다.
    -->
    <div align="center">
        <h1>페이지 레이아웃 설정</h1>
        <br>
        <header>header

            <nav>nav</nav>
        </header>

        
        <div class="wrap">
            <section>section
                <!-- article.a$*3{article} -->
                <article class="a1">article</article>
                <article class="a2">article</article>
                <article class="a3">article</article>
            </section>

            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    <div>

</body>
</html>

결과 화면

728x90