시맨틱 요소는 브라우저와 개발자 모두에게 각 영역에 태그로 그 의미를 부여한다.
비의미론적 태그 : <div>, <span> - 내용에 대해 아무 의미가 없는 공간만 분할해 주는 태그이다.
의미론적 태그 : <form>, <table>, <article> - 내용을 명확하게 정의한다.
시맨틱 태그는 태그 자체가 보여주는 기능은 없지만,
영역에 대한 의미를 명확하게 정의하는 태그로서, 블록요소이며, 아래와 같은 태그가 있다.
| 태그 | 설명 |
| article | 게시물, 기사, 컨텐츠내용을 정의 |
| aside | 좌우측에 들어갈 컨텐츠를 정의 |
| details | 상세설명을 정의 |
| figcaption | figure의 설명을 정의 |
| figure | 특별한 이미지, 도표, 사진 등 시각적 요소를 정의 |
| header | 상단에 로고, 제목요소 등의 내용을 작성 footer, address, header는 자식요소로 올수 없다. |
| footer | 하단에 저자, 저작권, 연락처, 사이트맵 정보 등을 정의 |
| main | 문서의 주요 컨텐츠를 정의 |
| mark | 눈에 띄게 하일라이트 텍스트를 정의 |
| nav | 메뉴리스트를 정의 |
| section | 문서의 섹션을 정의 |
| summary | 요약내용을 정의 |
| time | 시간을 정의 |
1. 시맨틱태그로 레이아웃을 분할해서 정리
HTML5에서는 시맨틱태그로 정리할 것을 권한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css맛보기</title>
<style>
/* 선택자{속성 : 속성값;} */
header{
width:100%;
height:150px;
background:#b3c7e6;
padding-top: 80px;/*안쪽여백*/
box-sizing:border-box;/*주어진 크기안에 안쪽여백포함*/
}
nav{
width:60%;
height:50px;
background:#fff;
margin:0 auto;/*바깥여백*/
}
aside{
width:20%;
height:450px;
background: #b8ebe6;
float:left;
margin:20px 0;
}
section{
width:80%;
height:450px;
background: #ffd8c8;
float:right;
margin:20px 0;
padding:20px;
box-sizing:border-box;
}
article{
width:100%;
background: #fff;
}
footer{
width:100%;
height:150px;
background: #506F86;
float:left;
}
</style>
</head>
<body>
<h1>시맨틱태그</h1>
<header>
<nav>메뉴자리</nav>
</header>
<aside>좌측</aside>
<section>
<article>본문내용</article>
</section>
<footer>하단</footer>
</body>
</html>
2. 공간분할태그로 레이아웃 정리
div에 id값을 부여해서 css로 크기와 위치를 지정하는 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css맛보기</title>
<style>
/* 선택자{속성 : 속성값;} */
#header{
width:100%;
height:150px;
background:#b3c7e6;
padding-top: 80px;/*안쪽여백*/
box-sizing:border-box;/*주어진 크기안에 안쪽여백포함*/
}
#nav{
width:60%;
height:50px;
background:#fff;
margin:0 auto;/*바깥여백*/
}
#aside{
width:20%;
height:450px;
background: #b8ebe6;
float:left;
margin:20px 0;
}
#section{
width:80%;
height:450px;
background: #ffd8c8;
float:right;
margin:20px 0;
padding:20px;
box-sizing:border-box;
}
#article{
width:100%;
background: #fff;
}
#footer{
width:100%;
height:150px;
background: #506F86;
float:left;
}
</style>
</head>
<body>
<h1>div-공간분할태그</h1>
<div id="header">
<div id="nav"></div>
</div>
<div id="aside">좌측</div>
<div id="section">
<div id="article">본문내용</div>
</div>
<div id="footer">하단</div>
</body>
</html>
위의 시맨틱으로 정리한 경우와 div로 정리한 경우가 모두 동일하게 표현이 된다.
그러나, HTML5버전부터는 시맨틱요소를 가지고 의미를 규정하며 코드를 작성하고 있다.
'UIUX Web Standard > COA Lab's HTML' 카테고리의 다른 글
| entity와 Emoji (엔티티와 이모티콘) (0) | 2021.01.20 |
|---|---|
| form 요소 (0) | 2021.01.20 |
| 기본태그연습 (0) | 2021.01.19 |
| 텍스트 요소 (0) | 2021.01.19 |
| a태그와 table태그 연습 (0) | 2021.01.19 |
