close
프로필 배경
프로필 로고

개발자 노트 - 강경훈 story

HTML CSS/CSS · 2024. 4. 9. fullscreen 넓게보기

HTML5와 시맨틱 태그

HTML5와 시맨틱 태그

1. HTML5 문서

  • 웹 문서의 레이아웃을 어느 정도 표준화 할 수 있겠다고 생각하고, 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해 놓고 해당 태그만 보면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다.
  • 표준화된 시맨틱 태그를 이용해 웹 문서를 작성하면 어떤 기기에서도 문서 구조를 정확히 이해할 수 있다.
더보기 
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<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>
      <!-- article : 시맨틱 태그-내용 -->
      <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>

2. 문서 구조를 위한 HTML5 시맨틱 태그

<header> 태그 – 머리말 지정하기

  • 사이트 전체의 제목 부분이 될 수도 있고, 본문의 제목부분이 될 수도 있다.
  • 주로 페이지 맨 위쪽이나 왼쪽에 삽입
  • <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣음

<nav> 태그 – 내비게이션 링크

  • 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타냄
  • 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 사용됨
더보기 
<!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" 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>
</html>
.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: none;
}
.navi a{
   color: #fff;
   /* 링크 밑줄 제거 */
   text-decoration: none;
   padding: 10px 5px 5px 35px;
   /* a태그의 각각의 패딩이 적용됨 */
   display: block;
}
.navi a:hover{
   color: #fc0;
}

<section> 태그 – 주제별 콘텐츠 영역

  • 문서에서 주제별로 콘텐츠를 묶을 때 사용
  • 섹션 제목을 나타내는 <hn> 태그가 함께 사용됨

<article> 태그 – 콘텐츠 내용

  • 웹 상의 실제 내용
  • 태그 적용 부분을 떼어내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠

<article> 태그 – 콘텐츠 내용

  • 본문 내용 외에 주변에 표시되는 기타 내용들
  • 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때 사용
더보기 
<!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" 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>
               요안도라는 게스트 하우스(Guest House) 형식
               의 농어촌 민박입니다.
            </h3>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore explicabo sapiente quis, eligendi, iste provident repellat officiis voluptates quam? Odit praesentium commodi ratione obcaecati quia?
            </p>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore explicabo sapiente quis, eligendi, iste provident repellat officiis voluptates quam? Odit praesentium commodi ratione obcaecati quia?
            </p>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore explicabo sapiente quis, eligendi, iste provident repellat officiis voluptates quam? Odit praesentium commodi ratione obcaecati quia?
            </p>
            <div>
               <img src="images/banner2.png" width="700px" height="233" alt="">
            </div>
         </section>
      </article>
      <!-- aside : 시멘틱 태그-본문 이외의 내용(광고,링크 등) -->
      <aside>
         <h3>알립니다.</h3>
         <p>
            게스트하우스 예약은 전화 070-###-#### 로 직접
            통화하시는게 가장 정확하고 빠릅니다.
            게스트하우스 예약은 전화 070-###-#### 로 직접
            통화하시는게 가장 정확하고 빠릅니다.
         </p>
         <img src="images/2.jpg" alt="">
         <img src="images/1.jpg" alt="">
         <img src="images/4.jpg" alt="">
      </aside>
   </div>
</body>
</html>
.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: none;
}
.navi a{
   color: #fff;
   /* 링크 밑줄 제거 */
   text-decoration: none;
   padding: 10px 5px 5px 35px;
   /* a태그의 각각의 패딩이 적용됨 */
   display: block;
}
.navi a:hover{
   color: #fc0;
}
.content{
   float: left;
   width: 720px;
   padding-left: 10px;
}

<footer> 태그 – 제작 정보와 저작권 정보

  • 사이트 제작자의 연락처 정보와 저작권 정보를 표시

<address> 태그 – 제작자 정보와 연락처 정보

  • 사이트 제작자의 이름이나 제작자 의 웹 페이지 또는 피드백을 위한 연락처 정보
  • 웹 사이트와 관련된 우편 주소 (단순 우편 주소는 <p> 태그 사용)
더보기 
<!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" 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>
               요안도라는 게스트 하우스(Guest House) 형식
               의 농어촌 민박입니다.
            </h3>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore explicabo sapiente quis, eligendi, iste provident repellat officiis voluptates quam? Odit praesentium commodi ratione obcaecati quia?
            </p>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore explicabo sapiente quis, eligendi, iste provident repellat officiis voluptates quam? Odit praesentium commodi ratione obcaecati quia?
            </p>
            <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore explicabo sapiente quis, eligendi, iste provident repellat officiis voluptates quam? Odit praesentium commodi ratione obcaecati quia?
            </p>
            <div>
               <img src="images/banner2.png" width="700px" height="233" alt="">
            </div>
         </section>
      </article>
      <!-- aside : 시멘틱 태그-본문 이외의 내용(광고,링크 등) -->
      <aside>
         <h3>알립니다.</h3>
         <p>
            게스트하우스 예약은 전화 070-###-#### 로 직접
            통화하시는게 가장 정확하고 빠릅니다.
            게스트하우스 예약은 전화 070-###-#### 로 직접
            통화하시는게 가장 정확하고 빠릅니다.
         </p>
         <img src="images/2.jpg" alt="">
         <img src="images/1.jpg" alt="">
         <img src="images/4.jpg" alt="">
      </aside>
      <footer>
         <!-- address : 시맨틱 태그-제작자 정보와 연락처 정보 -->
         <address>
            <p>
               제주특별자치도 남제주군 성산읍 수산리
               000 번지 요안도리
            </p>
            <p>yoan##@naver.com</p>
         </address>
         <p>Copyright All rights reserved</p>
      </footer>
   </div>
</body>
</html>
.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: none;
}
.navi a{
   color: #fff;
   /* 링크 밑줄 제거 */
   text-decoration: none;
   padding: 10px 5px 5px 35px;
   /* a태그의 각각의 패딩이 적용됨 */
   display: block;
}
.navi a:hover{
   color: #fc0;
}
.content{
   float: left;
   width: 720px;
   padding-left: 10px;
}
footer{
   /* clear: both; */
   /* float: left; 속성에 영향을 안받음 */
   clear: left;
   background: #030;
   color: #fff;
   padding: 10px 0;
   text-align: center;
}

목차로 돌아가기

 

'HTML CSS > CSS' 카테고리의 다른 글

CSS 목차  (0) 2024.04.09
CSS 실습문제 모음  (1) 2024.04.09
CSS 레이아웃  (0) 2024.04.09
CSS 박스 모델  (0) 2024.04.09
색상과 배경을 위한 스타일  (0) 2024.04.09
HTML CSS/CSS 관련 글
더 보기

티스토리툴바