HTML

[Chapter 10] HTML5 공부시작 9일차!(2021-07-16)

HJ39 2021. 7. 16. 02:00

Chpater10은 시맨틱 태그를 공부하게 된다.

우리가 웹 사이트를 만들 때 소스코드가 수천 줄이 넘기 때문에 한 줄씩 찾아보면서 헤더, 메뉴, 사이드바 등을 찾는 것이 어렵다. 따라서 만들어진 것이 시맨틱 태그이다. 시맨틱 태그를 보면 그 부분이 어떤 역할을 하고 하는지 쉽게 알 수 있다. 

기본적으로 웹사이트를 분석하면 헤더(header) , 본문(contents) , 사이드바(sidebar) , 푸터(footer)로 이루어져 있다.

  • <header> = 머리말 지정하기 , 주로 사이트 전체 페이지에서 맨 위나 오니 쪽에 삽입한다.
  • <nav> = 문서를 연결하는 링크 태그 , 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용된다(사용하는 위치의 영향을 받지 않는다 , 문서 안에 여러 개의 nav태그를 쓰게 될 경우 ID를 지정하면 스타일 변경이 가능하다)

▷본문 태그들

  • <section> =  콘텐츠를 주제별로 묶을 때 사용한다.
  • <article> = 본문 영역임을 표시 , 콘텐츠에 실질적인 내용을 넣는다 , 콘텐츠 내용을 입력하다 주제를 나눌 경우 article내부에 section을 쓰기도 한다.
  • <aside> = 사이드 바를 만드는데 이용된다. (오른쪽, 왼쪽으로 위치할지 정할 수 있다)
  • <iframe> = 외부 문서 삽입 (width = 프레임 너비 , height = 프레임 높이 , name = 프레임 이름 , src = 문서의 주소 , seamless = 프레임의 테두리를 없애 본문의 일부처럼 보이게 하는 옵션)
  • <footer> = 사이트 제작자의 정보, 저작권 정보를 표시한다. (section, article 등의 다른 레이아웃의 태그들을 사용 가능하다)
  • <address> = 주로 footer태그 내부에서 쓰인다 , 제작자 정보를 넣는 데 사용된다

HTML5에서 <div> 태그는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘텐츠에 CSS를 적용할 때 사용한다.

 

▷예제 1

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>애완견 돌보기</title>
	<link rel="stylesheet" href="css/layout.css">	 
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">애완견 종류</a></li>
				<li><a href="#">입양하기</a></li>
				<li><a href="#">건강돌보기</a></li>
				<li><a href="#">더불어살기</a></li>
			</ul>
		</nav>
	</header>
	<article>
		<h2>애완견 종류</h2>
		<section>
			<h3>활달한 강아지</h3>
			<dl>
					<dt>요크셔 테리어 </dt>
					<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
					<dt>말티즈 </dt>
					<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
					<dt>포메 라이언</dt>
					<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>
					<dt>골든 리트리버</dt>
					<dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
			</dl>
		</section>
		<section>
			<h3>온순한강아지</h3>
			<dl>
				<dt>쉬즈</dt>
				<dd>얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
				<dt>퍼그</dt>
				<dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
				<dt>래브라도 리트리버</dt>
				<dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장  좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
			</dl>
		</section>
		<section>
			<h3>사납지만 복종적인 강아지</h3>
			<dl>
				<dt>미니어쳐핀셔</dt>
				<dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
				<dt>푸들 </dt>
				<dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
				<dt>폭스테리어</dt>
				<dd>가정에서 키우기에 적합한 품종이다.  보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
			</dl>
		</section>
	</article>
	<aside>
		<h3>건강한 강아지는</h3>
		<ul>
			<li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
			<li>털에 윤기가 있는 것을 골라야 합니다.</li>
			<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
			<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
			<li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
		</ul>
	</aside>
	<footer>
		<p>Copyright 2012 funnycom</p>
	</footer>
</body>
</html>

시멘틱 태그들을 응용한 예제이다. 실제로 예제에 적용해보니 코드를 읽을 때 직관적으로 찾기가 편해진 느낌을 받았다.

맨 위로

'HTML' 카테고리의 다른 글

[Chapter 4-연습문제] HTML5 공부 8일차! (2021-07-06)  (0) 2021.07.06
[Chapter 4-3] HTML5 공부 7일차!(2021-07-05)  (0) 2021.07.06
[Chapter 4-2] HTML5 공부 6일차!(2021-07-04)  (0) 2021.07.05
[Chapter 4-1] HTML5 공부 5일차! (2021-07-03)  (0) 2021.07.04
[Chapter 3 - 연습문제] HTML5 공부 4일차!(2021-07-01)  (0) 2021.07.01

'HTML'의 다른글

  • 현재글[Chapter 10] HTML5 공부시작 9일차!(2021-07-16)

관련글

티스토리툴바