시멘틱 구조 요소

728x90

⭐️ 시멘틱 구조 요소 ⭐️

01. 시멘틱 구조

시멘틱(semantic) 구조란, HTML 문서를 사람과 브라우저 모두가 이해할 수 있도록 의미에 맞는 요소를 사용하여 구조화한 것을 의미합니다.

과거에는 대부분의 구조를 < div > 태그로 만들었습니다.
이에 따라 클래스 또는 아이디로 < div > 태그를 구분하였고, 개발자들이 자주 사용하는 클래스와 아이디 명이 굳어지기 시작했습니다. ex) < div id = header >
HTML5 에서는 이렇게 굳어진 클래스와 아이디 명을 시멘틱 구조 요소(태그)로 정의하였습니다.

# 기본구성 태그의 표현방법 비교

# 이전의 < div > 태그 구조화		# 현재의 HTML5 시멘틱 구조 태그

02. 시멘틱 구조 요소

[1] 시멘틱 구조 요소의 종류

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

[2] 시멘틱 구조 요소의 활용

# 시멘틱 구조의 사이트 만들어보기

레이아웃 구상하기 ☛ 시멘틱 구조로 HTML 만들기 ☛ CSS 설정하기 ☛ 완성된 사이트 확인하기

# 1) 레이아웃 구상하기

# 2) 시멘틱 구조로 HTML 만들기

<!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>시멘틱 구조 요소 활용의 예</title>
</head>
<body>
    <header>
        <h1><a href="#">반응형 웹</a></h1>
        <nav>
            <ul>
                <li><a href="#">MENU 01</a></li>
                <li><a href="#">MENU 02</a></li>
                <li><a href="#">MENU 03</a></li>
                <li><a href="#">MENU 04</a></li>
                <li><a href="#">MENU 05</a></li>
            </ul>
        </nav>
    </header>
    <div id="container">
        <section>
            <h2>콘텐츠 그룹 01</h2>
        </section>
        <section>
            <h2>콘텐츠 그룹 02</h2>
        </section>
        <article>
            <h2>주요 기사</h2>
        </article>
        <aside>광고</aside>
    </div>
    <footer>
        <address> 경기도 어둠시 달님구 별님동   031) 반짝 - 반짝반짝    oranssy@daum.net</address>
        <p>COPYRIGHT © All rights reserved.</p>
    </footer>
</body>
</html>

# 3) CSS 설정하기

# 4) 완성된 사이트 확인하기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기

728x90

'HTML' 카테고리의 다른 글

블록 / 인라인 요소 (2)	2022.08.21
W3C (웹 표준, 웹 접근성, 웹 호환성) (7)	2022.08.09
기본 구성 (3)	2022.08.06

깜냥깜냥🐾코딩 혜윰

시멘틱 구조 요소

⭐️ 시멘틱 구조 요소 ⭐️

01. 시멘틱 구조

# 기본구성 태그의 표현방법 비교

02. 시멘틱 구조 요소

[1] 시멘틱 구조 요소의 종류

[2] 시멘틱 구조 요소의 활용

# 시멘틱 구조의 사이트 만들어보기

'HTML' 카테고리의 다른 글

댓글

티스토리툴바

시멘틱 구조 요소

⭐️ 시멘틱 구조 요소 ⭐️

01. 시멘틱 구조

# 기본구성 태그의 표현방법 비교

02. 시멘틱 구조 요소

[1] 시멘틱 구조 요소의 종류

[2] 시멘틱 구조 요소의 활용

# 시멘틱 구조의 사이트 만들어보기

'HTML' 카테고리의 다른 글

관련글

댓글

티스토리툴바