1. HTML 시맨틱 태그
* Semantic(의미론적인, 의미있는) 의미론적인 이란 뜻으로 시맨틱 태그는 의미있는 태그라는 의미를 갖음
* 시맨틱 태그는 기능적인 태그가 아닌 의미만 가지는 태그
- 장점
- 시각장애가 있는 사용자에게 텍스트 판독기(스크린 리더)를 통해 의미 있는 내용을 전달하여 사용 가능하도록 제공(웹 표준, 웹 접근성)
- 태그를 기반으로 페이지 내 검색 키워드 우선순위를 판단
- 코드 블록의 가독성이 좋음 - 종류
<header> 페이지의 머리말을 의미하는 헤더 영역 <main> 사이트의 핵심 컨텐츠를 표시하는 영역
<nav> <aside> <section> <article> 등 포함 가능<nav> 일반적으로 메뉴(네비게이션 링크)를 포함하는 영역 <section> 주제별 문서의 콘텐츠를 표시하는 영역
하나 이상의 <article> 포함 가능<article> 섹션의 하위 항목으로 본문 이외의 개별 콘텐츠를 표시하는 영역 <aside> 좌/우측 사이드 영역으로 일반적으로 사이바라고 말함 <footer> 일반적으로 화면의 제일 하단에 위치
회사소개/저작권/약관 등을 표시그외 <mark> <figure> <summary> <address> <iframe>
2. 시맨틱 예시
<body>
<header>머리말</header>
<main>
<nav>
<div>
<span>홈</span>
<span>메일</span>
<span>뉴스</span>
</div>
</nav>
<section>
<article>
첫번째 아티클(블로그 포스팅)
</article>
<article>
두번째 아티클(블로그 포스팅)
</article>
<article>
세번째 아티클(블로그 포스팅)
</article>
</section>
<aside>
<ul>
<li>사이드바 메뉴 1</li>
<li>사이드바 메뉴 2</li>
<li>사이드바 메뉴 3</li>
</ul>
</aside>
</main>
<footer>
<p>바닥글</p>
<span>회사소개</span>
<span>서울 강남 역삼동...</span>
<span>대표 : 홍길동</span>
</footer>
</body>
<style>
header, footer, nav, section, article, aside { padding: 10px; }
body { margin: 0; }
header { height: 40px; background: rgb(255, 181, 181); }
main { height: calc(100vh - 240px); background: rgb(255, 248, 188); padding: 2px; position: relative; }
footer { height: 200px; background: rgb(201, 223, 255); }
header, main, footer {
border: 1px solid gray;
box-sizing: border-box;
}
nav { border: 1px solid rgb(255, 86, 86); }
section { border: 1px solid rgb(117, 107, 255); height: calc(100% - 64px); width: calc(80% - 44px); }
aside { border: 1px solid rgb(0, 133, 22); height: calc(100% - 68px); width: calc(20%); position: absolute; top: 45px; right: 2; }
article { border: 1px solid rgb(233, 123, 255); height: calc(100% - 40px); width: calc(33.33333% - 26px); display: inline-block; }
</style>
3. HTML의 레이아웃, 텍스트 관련 태그
* 레이아웃 태그
<div> | 범위 구분(Division 태그) - 블록으로 한줄을 모두 차지 |
<span> | 좁은 범위 구분(Span) 태그 - 인라인으로 영역만 차지 |
* 텍스트 관련 태그
<h1> ~ <h6> | 제목(Headline)을 나타내는 태그 |
<p> | 텍스트의 단락(Paragraph)을 만드는 태그 |
<br> | 텍스트의 줄바꿈(Break)을 만드는 태그 |
<strong><b> | 텍스트의 굵게 강조(Strong)하기 위한 태그 |
<em><i> | 기울인 텍스트를 입력해주는 태그 |
4. 레이아웃, 텍스트 태그 예시
<body>
<div>DIV 태그 영역</div>
<span>SPAN 태그 영역 1</span>
<span>SPAN 태그 영역 2</span>
<span>SPAN 태그 영역 3</span>
<h1>H1 제목 태그</h1>
<h2>H2 제목 태그</h2>
<h3>H3 제목 태그</h3>
<h4>H4 제목 태그</h4>
<h5>H5 제목 태그</h5>
<h6>H6 제목 태그</h6>
<p>문단(Paragraph) 태그를 표시합니다.</p>
<p>문단 태그에서 여기에서 줄바꿈을(br) 태그를<br/>넣으면 이처럼 줄바꿈이 되어 다음줄에 표시됩니다.</p>
<p>문단 태그에서 <strong>강조(Strong) 태그</strong>를 사용하여 강조했습니다. </p>
<p>문단 태그에서 <b>강조(Strong) 태그</b>를 사용하여 강조했습니다. </p>
<p>문단 태그에서 <em>강조(Strong) 태그</em>를 사용하여 강조했습니다. </p>
</body>
<style>
body { margin: 0; }
div { background: rgb(255, 181, 181); }
span { background: rgb(255, 201, 86); }
p { background: rgb(139, 255, 86); }
h1, h2, h3, h4, h5, h6 { background: rgb(196, 196, 196); }
</style>
'FrontEnd > HTML' 카테고리의 다른 글
[HTML] HTML 오디오, 비디오, 멀티미디어 대체 태그 (0) | 2022.09.15 |
---|---|
[HTML] HTML 입력 폼 태그, 이미지 태그 (0) | 2022.09.15 |
[HTML] HTML 리스트, 테이블 태그 (0) | 2022.09.15 |
[HTML] HTML의 개요, 구성요소, 문서구조 (0) | 2022.09.14 |