728x90
1. Semantic(시맨틱)요소
- div 요소를 너무 많이 사용하여 발생되는 혼동을 줄이기 위해 만든 요소입니다.
- 자주 사용하는 <div id="header">, <footer id="footer"> 등의 요소를
<header>, <footer> 요소로 사용할 수 있도록 추가된 요소입니다.
1) 시맨틱 요소 적용 방법
@ semantic 요소 실습.
<!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>
</head>
<body>
<header id ="header">
<h1>Welcome to PetStory.com</h1>
</header>
<div id = "main">
<div id = "cats">
<h2>Cats</h2>
<p>
Cats just like
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Saepe ea corrupti, illo impedit temporibus tempore
deleniti excepturi nihil eveniet non, fugit a.
Officia veniam ad dignissimos odit, modi maiores laboriosam.
</p>
</div>
<!-- div#cats -->
<div id="dogs">
<h2>Dogs</h2>
<p>
Dogs are usually
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Molestiae mollitia cupiditate voluptates minus id eum, nisi quaerat
accusantium officia non! Adipisci deserunt possimus
officia fugit distinctio culpa quod optio aliquam.
</p>
</div>
<!-- div#dogs -->
</div>
<!-- div#main -->
<aside id "aside">
<p>PetStorz.com can server all your pet needs</p>
</aside>
<footer id = "footer">
©2005.
PetStorz.com
All trademarks and registered trademarks
appearing on this site are the property of their
respective owners.
</footer>
</body>
</html>
728x90
'Front-End > HTML5&CSS' 카테고리의 다른 글
| part07_Video요소 (0) | 2022.05.13 |
|---|---|
| part06_HTML유효성검사 (0) | 2022.05.13 |
| part04_Div요소 (0) | 2022.05.13 |
| part03_HTML_table요소 (0) | 2022.05.13 |
| part02_HTML요소 (0) | 2022.05.13 |
