HTML CSS
HTML5와 시맨틱 태그
CNOW
2024. 4. 12. 23:49
html5doc
<body>
<header>
<!-- header : 시맨틱 태그 -머리말- -->
<h1>애완견 종류</h1>
<!-- nav : 시맨틱 태그-내비게이션 링크(메뉴) -->
<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 : 시맨틱 태그-주제 -->
<section>
<h2>활달한 강아지</h2>
<!-- ariticle : 시맨틱 태그-내용 -->
<article>
<h3>요크셔테리어</h3>
<p>
생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온
침입자를 겁내는 일이 없어 좋은 번견이다.
</p>
</article>
<article>
<h3>포메라이언</h3>
<p>
생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온
침입자를 겁내는 일이 없어 좋은 번견이다.
</p>
</article>
<article>
<h3>말티즈</h3>
<p>
생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온
침입자를 겁내는 일이 없어 좋은 번견이다.
</p>
</article>
</section>
<!-- footer : 시맨틱 태그-제작정보, 저작권 정보 -->
<footer>
<p>published by funnycom</p>
</footer>
</body>HTML구조 시맨틱 태그 조합
header-nav
<title>Document</title>
<link rel="stylesheet" href="css/style1.css" rel="stylesheet" type="text/css">
</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>
css
.container{
width: 960px;
}
header{
height: 280px;
background-image: url("../images/bg.png");
/* 어울리도록 배치 */
position: relative;
}
header h1{
font-size: 3em;
color: #ffc;
/* 오른쪽 아래 배치 */
right: 20px;
bottom: 70px;
/* 절대적인 위치로 브라우저 기준 */
position: absolute;
}
header h2{
font-size: 2em;
color: #ff0;
/* 오른쪽 아래 배치 */
right: 20px;
bottom: 30px;
/* 절대적인 위치로 브라우저 기준 */
position: absolute;
}
.navi{
width: 960px;
background: #271717;
height: 150px;
/* 음수값으로 위에 배경하고 거의 밀착한다 */
margin-top: -15px;
}
.navi ul{
/* 블릿제거 */
list-style-type: none;
}
.navi a{
color: #fff;
/* 링크 밑줄 제거 */
text-decoration: none;
padding: 10px 5px 5px 35px;
/* a태그의 각각의 패딩이 적용됨 */
display: block;
}
.navi a:hover{
color: #fc0;
/* 링크 밑줄 제거 */
text-decoration: none;
padding: 10px 5px 5px 35px;
/* a태그의 각각의 패딩이 적용됨 */
display: block;
}section-aricle-aside
<link rel="stylesheet" href="css/style1.css" rel="stylesheet" type="text/css">
</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>
요안도라는 게스트 하우스(Guset House) 형식의
농어촌 민박입니다.
</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat,
ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat,
ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat,
ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo.
</p>
<div>
<img src="images/banner2.png" width="700" height="233">
</div>
</section>
</article>
<!-- aside : 시맨틱 태그-본문 이외의 내용(광고, 링크) 등 -->
<aside>
<h3>알립니다.</h3>
<p>
게스트하우스 예약은 전화 070-###-#### 로 직접
통화하시는게 가장 정확하고 빠릅니다.
게스트하우스 예약은 전화 070-###-#### 로 직접
통화하시는게 가장 정확하고 빠릅니다.
</p>
<img src="images/2.jpg">
<img src="images/1.jpg">
<img src="images/4.jpg">
</aside>
</div>
</body>
</html>
css 추가
.content{
float: left;
width: 720px;
padding-left: 10px;
}footer-address
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style1.css" rel="stylesheet" type="text/css">
</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>
요안도라는 게스트 하우스(Guset House) 형식의
농어촌 민박입니다.
</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat,
ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat,
ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat,
ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo.
</p>
<div>
<img src="images/banner2.png" width="700" height="233">
</div>
</section>
</article>
<!-- aside : 시맨틱 태그-본문 이외의 내용(광고, 링크) 등 -->
<aside>
<h3>알립니다.</h3>
<p>
게스트하우스 예약은 전화 070-###-#### 로 직접
통화하시는게 가장 정확하고 빠릅니다.
게스트하우스 예약은 전화 070-###-#### 로 직접
통화하시는게 가장 정확하고 빠릅니다.
</p>
<img src="images/2.jpg">
<img src="images/1.jpg">
<img src="images/4.jpg">
</aside>
<footer>
<!-- address : 시맨틱 태그-제작자 정보와 연락처 정보 -->
<address>
<p>
제주특별자치도 남제주군 성산읍 수산리
000 번지 요안도라
</p>
<p>
yoan##@naver.com
</p>
</address>
<p>Copyright. All rights reserved.</p>
</footer>
</div>
</body>
</html>
css 추가
/* footer-address */
footer{
/* clear: both; */
/* float: left; 속성에 영향을 안받음 */
clear: left;
background-color: #030;
color: #fff;
padding: 10px 0;
text-align: center;
}연습 따라하기
강의_10장_HTML5와 시맨틱 태그.pdf
0.71MB
table,html_시맨틱태그 실습파일.zip
1.07MB
연습 따라하기.zip
2.12MB