시맨틱 태그?
의미론은 “중요한” 또는 “의미론적인”을 의미하는 형용사입니다.
따라서 시맨틱 태그는 말 그대로 의미가 있는 태그입니다.
반면에 div나 span과 같은 의미 없는 태그는 태그 이름으로 식별할 수 없으며,
양식, 표, 기사 등과 같은 의미 있는 태그는 내용을 명확하게 정의합니다.
우리가 자주 사용하는 웹 사이트의 디자인은 다르게 보일 수 있지만 기본 구조는 비슷합니다.
머리글에는 페이지 제목 또는 로고, 본문 영역, 바닥글 영역 및 사이드바가 포함됩니다.
시맨틱 태그를 사용하는 이유
시맨틱 태그 없이 웹사이트를 구축할 수 있습니다.
그렇다면 시맨틱 태그를 사용하는 이유는 무엇입니까?
- 웹 브라우저는 HTML 소스 코드만 보고 제목과 본문을 쉽게 구분할 수 있습니다.
- 시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 수 있도록 도와줍니다.
- 끝없는 div(div > div > div…)를 탐색하는 것보다 훨씬 쉽습니다.
- 이 코드의 명확한 의미 체계를 개발자에게 전달합니다.
헤더
로고, 아이콘, 페이지 제목과 같은 소개 콘텐츠를 추가하세요.
헤더와 헤드는 이름은 비슷하지만 의미는 완전히 다릅니다.
GPS
웹 페이지 내에서 다른 영역을 구분하거나 링크 아웃하기 위한 메뉴, 목차 등에 사용됩니다.
<header>
<h1>회사 로고 및 이름</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>부분
웹 페이지에서 논리적으로 관련된 콘텐츠 영역을 분리하는 데 사용됩니다.
기사
웹 페이지에서 독립된 영역을 구분하기 위해 사용합니다.
article 태그는 section 태그와 혼동되는 경우가 있는데 section 태그는 웹 페이지 내 관련 콘텐츠를 구분하고 article 태그는 웹 페이지에서 독립적으로 사용할 수 있는 영역을 구분한다는 점에서 차이가 있습니다.
곁에
본문 텍스트의 왼쪽, 오른쪽 또는 하단에 사이드바를 만듭니다.
사이드바는 일반적으로 웹 사이트에 필요하지 않으므로 필요한 경우에만 만드십시오.
주로
이 태그는 웹 페이지의 주요 콘텐츠를 표시하는 데 사용됩니다.
기본 태그에는 문서에서 반복되는 요소가 포함되어서는 안 됩니다.
그리고 기사, 페이지, 바닥글, 머리글 또는 탐색 태그의 하위 태그로 기본 태그를 삽입할 수 없습니다.
보행인
일반적으로 섹션의 저자, 저작권 날짜 또는 관련 문서에 대한 링크에 대한 정보를 포함합니다.
<!DOCTYPE html>
<html>
<head>
<title>시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>회사 로고</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>글 제목</h2>
<p>작성일: 2023년 3월 3일</p>
</header>
<p>본문 내용이 들어갑니다.</p>
<p>본문 내용이 들어갑니다.</p>
<p>본문 내용이 들어갑니다.</p>
<footer>
<p>작성자: John Doe</p>
</footer>
</article>
</main>
<footer>
<p>저작권 © 2023 회사명. All rights reserved.</p>
</footer>
</body>
</html>
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dream Jeju</title>
<link rel="stylesheet" href="http://developyanggaeng.m/./css/style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo">
<a href="#">
<h1>Dream Jeju</h1>
</a>
</div>
<nav>
<ul id="topMenu">
<li><a href="#">단체 여행</a></li>
<li><a href="#">맞춤 여행</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
</header>
<main class="contents">
<section id="healing">
<h2>몸과 마음이 치유되는 섬</h2>
<div class="detail">
<img src="images/healing.jpg" alt="힐링이미지">
<b><p>쉼(Healing)의 공간으로 안내 합니다.</p></b>
<p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅
오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.</p>
</div>
<div class="schedule">
<h3>상세 일정</h3>
<ul>
<li>여행 기간 : 2박 3일</li>
<li>여행 일정 : 여행 일정은 상담을 통해 결정 및 조정 가능 합니다.</li>
</ul>
</div>
</section>
<section id="activity">
<h2>다양한 액티비티가 기다리는 섬</h2>
<div class="detail">
<img src="images/activity.jpg" alt="액티비티">
<b><p>모험과 스릴이 넘치는 레저의 천국으로 안내 합니다.</p></b>
<p>둘러보기만 하는 여행을 하셨나요? </p>
<p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과
투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를
씽씽 전동바이크나 전동킥보드로 달려보세요.
시원한 바다를 가까이에서 느낄 수 있는 요트 체험과
배낚시도 빼놓을 수 없겠죠?</p>
</div>
</section>
</main>
<footer>
<section id="bottomMenu">
<ul>
<li><a href="#">회사 소개</a></li>
<li><a href="#">개인 정보 처리 방침</a></li>
<li><a href="#">여행 약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</section>
</footer>
</div>
</body>
</html>* {
margin: 0; /* margin 초기화 */
padding: 0; /* padding 초기화 */
box-sizing: border-box; /* 중요! */
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
/* #은 id 선택자 */
#container {
margin: 0 auto; /* 화면 중앙에 배치 */
width: 1200px; /* 너비 */
background-color: antiquewhite;
}
header {
/* 100% 크기는 상위 영역의 크기를 따라감 */
width: 100%;
height: 100px;
background-color: #045;
}
#logo {
float: left;
width: 250px;
height: 100px;
line-height: 100px;
padding-left: 20px;
}
#logo h1 {
font-weight: 700px;
font-size: 40px;
color: white;
}
nav {
float: right;
width: 900px;
height: 100px;
padding-top: 40px;
}
#topMenu {
height: 60px;
}
#topMenu > li {
float: left;
}
#topMenu > li > a {
display:block; /* 링크 텍스트는 블록으로 */
font-size:1.1em;
color:#fff; /* 글자 색 */
font-weight:600; /* 글자 굵기 */
padding:20px 60px; /* 패딩 */
}
#topMenu > li > a:hover {
color:#1fa8f8;
text-shadow:0 -2px #222;
}
/* 본문 */
.contents {
width:1000px;
margin:50px auto;
}
main > section {
margin-top:60px;
}
main h2 {
font-size:1.5em;
line-height: 2.5;
}
main div {
margin-top:20px;
}
main h3 {
font-size:1.2em;
line-height:2.2;
}
.detail p {
line-height: 2.0;
color:#222;
}
.detail > img {
float:left;
margin-right:50px;
border-radius:20px;
}
.schedule h4 {
font-size:1.2em;
}
.schedule ul {
list-style: none;
}
.schedule ul li {
line-height: 2;
}
/* 푸터 영역 */
footer{
width:1200px; /* 너비 */
height:100px; /* 높이 */
border-top:2px solid #222;
}
#bottomMenu{
width:100%;
height:20px;
margin-left:60px;
}
#bottomMenu ul {
margin-top:15px;
}
#bottomMenu ul li{
float:left; /* 가로로 배치 */
padding:5px 20px;
border-right:1px solid #ddd; /* 항목 오른쪽에 테두리 */
}
#bottomMenu ul li:last-child{
border:none; /* 마지막 항목에는 오른쪽 테두리 없음 */
}
#bottomMenu ul li a, #bottomMenu ul li a:visited {
font-size:15px; /* 글자 크기 */
color:#666; /* 글자 색 */
}
전역 속성
클래스 속성
요소에 클래스 이름을 할당하는 데 사용됩니다. 클래스 이름은 CSS에서 클래스 선택자로 사용되며 여러 요소가 동일한 클래스 이름을 반복적으로 가질 수 있습니다.
<p class="red"> ... </p>아이디 속성
항목에 ID를 할당하는 데 사용됩니다. ID는 CSS에서 ID 선택자로 사용되며 중복될 수 없습니다.
<p id="red"> ... </p>스타일 속성
CSS 코드를 인라인으로 작성할 때 사용합니다.
제목 속성
title 속성은 요소에 추가 정보를 추가하는 데 사용됩니다.
title 속성에 입력한 값은 요소 위로 마우스를 가져가면 툴팁으로 표시됩니다.