Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
기사 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시맨틱 태그</title>
</head>
<body>
<!-- 내부의 캐그 구성을 더 의미 있게 작성하는 것이 매우 중요한 요소가 됨 -->
<div id="header"> <!-- 아이디는 유일할때 -->
<h1>사이트의 로고</h1>
</div>
<div class="gnb"> <!-- 클래스는 2개 이상 -->
<ul>
<li><a href="https://www.naver.com/">네이버</a></li>
<li><a href="https://comic.naver.com/">네이버 웹툰</a></li>
<li><a>유튜브</a></li>
</ul>
</div>
<div id="content"> <!-- 기사들의 묶음 -->
<div class ="article">
<h2>기사 1</h2> <!-- 기사 단일 하나 묶음 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class ="article">
<h2>기사 2</h2> <!-- 기사 단일 하나 묶음 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id ="footer"> <!-- 요즘 방식 -->
<span>회사소개</span>
<span>인재채용</span>
<span>이용약관</span>
</div>
<footer> <!-- 옛날 방식 -->
<span>회사소개</span>
<span>인재채용</span>
<span>이용약관</span>
</footer>
</body>
</html>
