HTML - ③ 웹 문서 구조를 만드는 시맨틱 태그

시맨틱 태그?

Semantic은 '의미의', '의미론적인' 이라는 뜻을 가진 형용사 입니다.

따라서 시맨틱 태그란 말 그대로 의미가 있는 태그를 말합니다.

div나 span과 같이 의미가 없는 태그는 태그 이름만 보고 어떠한 내용인지 알 수가 없는 반면,

form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의 합니다.

우리가 흔히 사용하는 웹 사이트의 디자인은 서로 달라 보여도 근본적인 구조는 비슷합니다.

header에는 사이트 제목이나 로고가 있고, 본문 영역, footer 영역, 사이드 바 등이 있습니다.

시맨틱 태그 사용 이유

웹 사이트는 시맨틱 태그를 사용하지 않더라도 만들 수 있습니다.

그럼 왜 굳이 시맨틱 태그를 사용하는걸까요?

웹 브라우저가 html 소스 코드만 보고도 제목과 본문 등을 쉽게 구분할 수 있습니다.
시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 됩니다.
끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽습니다.
개발자에게 해당 코드의 명확한 의미를 전달할 수 있습니다.

header

📌 로고, 아이콘, 페이지의 제목과 같은 소개 내용을 포함합니다.

header와 head는 이름은 비슷하지만 전혀 다른 의미를 가집니다.

nav

📌 메뉴, 목차 등에 사용되며, 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분합니다.

<header>
    <h1>회사 로고 및 이름</h1>
    <nav>
    <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
    </ul>
    </nav>
 </header>

section

📌 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용합니다.

article

📌 웹 페이지에서 독립적인 영역을 구분할 때 사용합니다.

article 태그를 section 태그와 혼동하기도 하는데, section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고, article 태그는 어떤 웹 페이지든 독립적으로 사용할 수 있는 영역을 구분한다는 점에서 차이가 있습니다.

aside

📌 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듭니다.

보통 웹 사이트에서 사이드바는 필수 요소가 아니므로 필요할 경우에만 만듭니다.

main

📌 웹 페이지의 주요 내용을 지정할 때 사용하는 태그 입니다.

main 태그에는 문서에서 반복해서 동작하는 요소를 포함해서는 안 됩니다.

그리고 main 태그를 article, aside, footer, header, nav 태그의 하위에 포함할 수 없습니다.

footer

📌 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>시맨틱 태그 예제</title>
  </head>
  <body>
    <header>
      <h1>회사 로고</h1>
      <nav>
        <ul>
          <li><a href="#">메뉴1</a></li>
          <li><a href="#">메뉴2</a></li>
          <li><a href="#">메뉴3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <header>
          <h2>글 제목</h2>
          <p>작성일: 2023년 3월 3일</p>
        </header>
        <p>본문 내용이 들어갑니다.</p>
        <p>본문 내용이 들어갑니다.</p>
        <p>본문 내용이 들어갑니다.</p>
        <footer>
          <p>작성자: John Doe</p>
        </footer>
      </article>
    </main>
    <footer>
      <p>저작권 © 2023 회사명. All rights reserved.</p>
    </footer>
  </body>
</html>

🐸예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dream Jeju</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="container">
        <header>
            <div id="logo">
                <a href="#">
                    <h1>Dream Jeju</h1>
                </a>
            </div>
            <nav>
                <ul id="topMenu">
                    <li><a href="#">단체 여행</a></li>
                    <li><a href="#">맞춤 여행</a></li>
                    <li><a href="#">갤러리</a></li>
                    <li><a href="#">문의하기</a></li>
                </ul>
            </nav>
        </header>
        <main class="contents">
            <section id="healing">
                <h2>몸과 마음이 치유되는 섬</h2>
                <div class="detail">
                    <img src="images/healing.jpg" alt="힐링이미지">
                    <b><p>쉼(Healing)의 공간으로 안내 합니다.</p></b>
                    <p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 
                    오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.</p>
                </div>
                <div class="schedule">
                    <h3>상세 일정</h3>
                    <ul>
                        <li>여행 기간 : 2박 3일</li>
                        <li>여행 일정 : 여행 일정은 상담을 통해 결정 및 조정 가능 합니다.</li>
                    </ul>
                </div>
            </section>
            <section id="activity">
                <h2>다양한 액티비티가 기다리는 섬</h2>
                <div class="detail">
                    <img src="images/activity.jpg" alt="액티비티">
                    <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내 합니다.</p></b>
                    <p>둘러보기만 하는 여행을 하셨나요? </p>
                    <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 
                    투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 
                    씽씽 전동바이크나 전동킥보드로 달려보세요. 
                    시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 
                    배낚시도 빼놓을 수 없겠죠?</p>
                </div>
            </section>
        </main>
        <footer>
            <section id="bottomMenu">
                <ul>
                    <li><a href="#">회사 소개</a></li>
                    <li><a href="#">개인 정보 처리 방침</a></li>
                    <li><a href="#">여행 약관</a></li>
                    <li><a href="#">사이트맵</a></li>
                </ul>
            </section>
        </footer>
    </div>
</body>
</html>

* {
    margin: 0; /* margin 초기화 */
    padding: 0; /* padding 초기화 */
    box-sizing: border-box; /* 중요! */
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
/* #은 id 선택자 */
#container {
    margin: 0 auto; /* 화면 중앙에 배치 */
    width: 1200px; /* 너비 */
    background-color: antiquewhite;
}
header {
    /* 100% 크기는 상위 영역의 크기를 따라감 */
    width: 100%; 
    height: 100px;
    background-color: #045;
}
#logo {
    float: left;
    width: 250px;
    height: 100px;
    line-height: 100px;
    padding-left: 20px;
}
#logo h1 {
    font-weight: 700px;
    font-size: 40px;
    color: white;
}
nav {
    float: right;
    width: 900px;
    height: 100px;
    padding-top: 40px;
}
#topMenu {
    height: 60px;
}
#topMenu > li {
    float: left;
}
#topMenu > li > a {
    display:block;  /* 링크 텍스트는 블록으로 */ 
    font-size:1.1em;
    color:#fff;  /* 글자 색 */
    font-weight:600;  /* 글자 굵기 */
    padding:20px 60px;  /* 패딩 */ 
}
#topMenu > li > a:hover {
    color:#1fa8f8;
    text-shadow:0 -2px #222;
}

/* 본문 */
.contents {
    width:1000px;
    margin:50px auto;  
}
main > section {
    margin-top:60px;  
}
main h2 {    
    font-size:1.5em;
    line-height: 2.5;
}
main div {
    margin-top:20px;
}
main h3 {
    font-size:1.2em;
    line-height:2.2;
}
.detail p {
    line-height: 2.0;
    color:#222;
}
.detail > img {
    float:left; 
    margin-right:50px;
    border-radius:20px;
}
.schedule h4 {
    font-size:1.2em;
}
.schedule ul {
    list-style: none;
}
.schedule ul li { 
    line-height: 2;
}

/* 푸터 영역 */
footer{   
    width:1200px;   /* 너비 */
    height:100px;  /* 높이 */
    border-top:2px solid #222;
}
#bottomMenu{
    width:100%;
    height:20px;
    margin-left:60px;
}
#bottomMenu ul {
    margin-top:15px;  
}
#bottomMenu ul li{
    float:left;  /* 가로로 배치 */ 
    padding:5px 20px;
    border-right:1px solid #ddd;   /* 항목 오른쪽에 테두리 */ 
}
#bottomMenu ul li:last-child{
    border:none;  /* 마지막 항목에는 오른쪽 테두리 없음 */  
}
#bottomMenu ul li a, #bottomMenu ul li a:visited {  
    font-size:15px;  /* 글자 크기 */ 
    color:#666;   /* 글자 색 */ 
}

글로벌 속성

class 속성

요소에 클래스명을 지정할 때 사용 합니다. 클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있습니다.

<p class="red"> ... </p>

id 속성

요소에 아이디를 지정할 때 사용 합니다. 아이디는 CSS에서 아이디 선택자로 활용하며, 중복 될 수 없습니다.

<p id="red"> ... </p>

style 속성

CSS 코드를 인라인으로 작성할 때 사용 합니다.

title 속성

title 속성은 요소에 추가 정보를 넣을 때 사용 합니다.

title 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시 됩니다.

저작자표시 비영리 변경금지

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

CSS - ② 선택자 (0)	2023.03.13
CSS - ① 기본 (0)	2023.03.13
HTML - 연습 문제(지원서, 주문하기 폼 만들기) (0)	2023.03.09
HTML - ② 입력 양식 (2)	2023.03.08
HTML - ① 필수 태그 (2)	2023.03.08