<header>태그-머리말 지정하기
<header>태그는 특정 부분의 머리말에 해당합니다.
- 사이드 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪾에 삽입하며 헤더의 내용으로는 주로
<form>태그를 사용해 검색 창을 넣거나<nav>태그를 사용해 사이트 메뉴를 넣습니다. <header>태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수도 있습니다.
<nav>태그-문서를 연결하는 네비게이션 링크
네비게이션 역할을 하는
<nav>태그는 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다.
- 이 태그를 사용하면 어느 부분이 네비게이션인지 쉽게 알 수 있습니다.
<nav>태그는 네비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.- 다시말해 사용하는 위치의 영향을 받지 않아
<header>나<footer>태그 또는<asdie>태그 안에 포함시킬 수도 있고 독립해서 사용할 수도 있습니다. - 문서 안에 여러개의
<nav>태그를 사용할 경우, ID를 따로 지정해 주면 스타일 시트에서 각 네비게이션에 맞게 스타일을 지정할 수도 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="css/style1.css" rel="stylesheet" type="text/css"><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
</body>
</html>
<section>태그-주제별 콘테츠 영역 나타내기
<section>태그는 문서에서 콘첸츠 영역을 나타냅니다.
<section>태그는 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 세션 제목을 나타내는<hn>제목태그가 함께 사용됩니다.<section>태그 안에 또다른<section>태그를 넣을 수도 있습니다.
<article>태그-콘텐츠 내용 넣기
<section>태그와 비슷해 혼동하기 쉬운<article>태그는 article의 사전적 의미가 신문이나 잡지의 '기사'를 뜻하는 것 처럼 웹 상에 실제 내용을 넣습니다.
- 다시 말해 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면
<article>태그를 쓰면 됩니다. - 보통
<article>태그와<section>태그를 혼동하기도 하는데<section>태그는 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용합니다. <article>태그 안에<article>태그를 넣을 수도 있습니다.
<aside>-본문 이외의 내용 표시하기
블로그에서 왼쪾이나 오른쪽 또는 하단에 사이드바가 표시된 것을 본 적이 있습니다.
- 이런 사이드바를 만드는 태그가
<aside>태그입니다. - 사이드바는 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 떄만 사용합니다.
<aside>태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.
<aside>태그와<sction>태그
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="css/style2.css" rel="stylesheet" type="text/css"><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<article>
<section class="content">
<h2>요안도라 소개</h2>
<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>
내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. <br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<div class="banner"><img src="images/banner2.png" width="700" height="233" alt="요안도라"></div>
</section>
</article>
<aside class="sidebar">
<h3>¤ 알립니다</h3>
<p>게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.
인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다. </p>
<img src="images/2.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/4.jpg" alt="">
</aside>
</div>
</body>
</html>
<iframe>태그-외부 문서 삽입하기
일반적으로 웹 문서 안에 내용을 직접 입력하지만 다른 외부 문서를 삽입할 수도 있습니다.
- 이렇게 웹 문서 안에 다른 웹문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라고합니다.
- 인라인 프레임을 삽입하는 태그는
<iframe>태그 입니다.
| 속성 | 설명 |
|---|---|
| width | 인라인 프레임의 너비입니다. 픽셀이나 백분율 값으로 표시합니다. |
| height | 인라인 프레임의 높이입니다. 픽셀이나 백분율 값으로 표시합니다. |
| name | 인라인 프레임의 이름입니다. |
| src | 프레임에 표시할 문서의 주소를 지정합니다. |
| seamless | 프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 송성 값 없이 seamless라고 쓰면 됩니다.(chrome,safari) |
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>iframe</title>
<style>
body {
background:#222;
color:#fff;
padding:20px;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h2>iframe 태그를 이용해 외부 문서(사이트) 포함시키기</h2>
<div class="content">
<iframe src="https://velog.io/@jyyoun1022" width="95%" height="500"></iframe>
</div>
</div>
</body>
</html>
<footer>태그-제작 정보와 저작권 정보 표시하기
일반적으로 웹 문서 끝자락에 들어가는
<footer>태그안에는 사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다.
-<footer>태그 안에는 <header>,<section>,<article>등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그를 이용해 푸터 안에 다양한 정보를 넣을 수 있습니다.
<address>태그-사이트 제작자 정보,연락처 정보 나타내기
<address>태그는 주로<footer>태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는데 사용됩니다.
- 또한 웹사이트와 관련된 우편 주소도
<address>태그 안에 포함시킵니다. - 하지만 단순히 우편 주소를 표기할 용도라면
<address>태그가 아닌<p>태그를 이용해 표시합니다.
footer {
padding: 10px 0;
background-color:#030;
color:#fff;
text-align:center;
clear: both;
}
<footer>
<address>
<p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라 </p>
<p>yoan##@naver.com</p>
</address>
<p> Copyright ⓒ. All rights reserved.</p>
</footer>
<div>태그는 언제 사용할까>
HTML5에서는
<div>태그는 중요하게 사용됩니다.
<div>태그는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉, 콘텐츠에 CSS를 적용할 때<div>태그를 사용합니다.
<body>
<div id="wrapper">
<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>
<section>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
</section>
<aside>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="">
<img src="images/3.png" alt="">
</aside>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</div>
</body>
블로그 이전합니다! https://jyyoun1022.tistory.com/