Web/html5

Layout

▶ 시맨틱(semantic) 태그

의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.

 

태그 설명
<header> 문서의 제목 요소 또는 로고/아이콘 등 헤더(header)를 정의한다.
헤더란 도입부에 해당하는 콘텐츠를 가지고 있는 부분이다.
또한 한 문서 내에 여러 개의 header요소가 존재할 수 있다.

1) 사이트 맨 위쪽이나 왼쪽에 주로 삽입하며, 헤더 안에 태그를 사용해서 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다.
2) 태그를 본문 중에 사용해서 제목을 표 시할 수도 있다.
<hgroup> 제목과 부제목을 묶어주는 역할
<nav> HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합(즉 메뉴)을 정의함
nav요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav요소에 포함되는 것은 아니다
<section> HTML 문서에서 섹션(section) 부분을 정의함.
문서에서 콘텐츠의 주제 그룹이다.

태그나 태그와 비교해서 콘텐츠 영역을 구분짓는 용도.
서로 관계 있는 문서 를 분리하는 역할을 한다. 실제 콘텐츠가 들어 있는 태그를 포함 한다.
<article> HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의한다.
독립적인 콘텐츠이다.

블로그 글, 포럼 글, 뉴스 기사이나 웹사이트 의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 여기에 해당된다. 내용이 각 기 독립적인 내용을 담는다.
<aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의한다.

본문 내용 외에 주변에 표시되는 기타 내용들을 나 타낸다. 블로그 등에서 왼쪽이나 오른쪽, 혹은 하단 에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용한다.
<footer> footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의한다.
문서의 꼬리말, 저자, 저작권 정보를 표시한다.

 

 

더보기 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Yoko's Kitchen</title>
		<link rel="stylesheet" type="text/css" href="../css/JP.css">
	</head>
	
	<body>
	<div class="wrapper">
	<header>
		<h1>Yoko's Kitchen</h1>
	<nav>
		<ul>
			<li><a href="main.html" class="current">홈</a></li>
			<li><a href="">교실</a></li>
			<li><a href="">케이터링</a></li>
			<li><a href="">소개</a></li>
			<li><a href="">연락처</a></li>
		</ul>
	</nav>
</header>
 
 
<section class="courses">
	<article class="main-articles">
		<figure>
			<img src="../예제문서_1/bok-choi.jpg" alt="Bok Choi" />
			<figcaption>Bok Choi</figcaption>
		</figure>
		<hgroup>
			<h2>일본의 채식주의자</h2>
			<h3>런던에서의 5주 코스</h3>
		</hgroup>
		<p>5주간 전통적인 일본의 채식주의자 음식에 대해 소개하고 쌀과 국수 요리를 가르친다.</p>
	</article> 
	
	<article class="main-articles">
		<figure>
 			<img src="../예제문서_1/teriyaki.jpg" alt="Teriyaki sauce" />
 			<figcaption>Teriyaki Sauce</figcaption>
		</figure>
		<hgroup>
			<h2>소스 마스터클래스</h2>
			<h3>1일 워크샵</h3>
		</hgroup>
		<p>1일 집중 코스에서는 다양한 일본 요리에서 사용할 수 있는 가장 맛있는 소스를 만드는 방법을 살펴본다.</p>
	</article> 
</section>
 
 
<aside>
	<section class="popular-recipes">
		<h2>인기 요리법</h2>
		<a href="yakitori.html">야키토리(Yakitori) - 구운 닭</a>
		<a href="">츠쿠네(Tsukune) - 닭꼬치</a>
		<a href="">오코노미야키(Okonomiyaki)- 해물 부침개</a>
		<a href="">미즈타키(Mizutaki) - 영계백숙</a>
	</section>
	
	<section class="contact-details">
		<h2>연락처</h2>
		<p>Yoko's Kitchen<br />
		6, Teheran-ro 14-gil, Gangnam-gu, <br />
		Seoul, Republic of Korea</p>
	</section>
</aside>
 
<footer>
	Copyright &copy; 1998-2022 KH Information Educational Institute 
	All Right Reserved. 
	Contact webmaster for more information. 1544-9970
</footer>
 
</div><!-- .wrapper -->
</body>
</html>

 

저작자표시

'Web > html5' 카테고리의 다른 글

로그인,회원가입 form 만들기  (0) 2022.05.05
HTML5 태그  (0) 2022.04.19
HTML (웹표준, 태그 구성, 규칙)  (0) 2022.04.19

티스토리툴바