개발 공부 기록하기

DAY 2 - 웹 문서 구조를 만드는 시맨틱(Semantic) tag 본문

프밍/HTML

DAY 2 - 웹 문서 구조를 만드는 시맨틱(Semantic) tag

태영(泰伶) 2022. 8. 20. 18:29

Semantic

adj. 의미가 통하는

 

 

HTML의 tag는 그 이름만 봐도 의미를 알 수 있다.

     ex, <p> : paragraph(단락)

           <a> : anchor(닻을 내리다, 머무르다)

 

  

예제(전체 코드)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dream Jeju</title>
  <link rel="stylesheet" href="css/structure.css">
</head>
<body>
  <div id="container">    
    <header>
      <div id="logo">
        <a href="index-footer.html">
          <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="headling">
        <h2>몸과 마음이 치유되는 섬</h2>                  
        <div class="detail"> 
          <img src="images/healing.jpg">                            
          <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">
          <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>

 

노랑 형광펜 사이의 범주가 'header', 초록 형광펜 사이의 범주가 'navigation' 영역임.

 

 

하늘색 형광펜 사이의 범주가 '본문' 영역

 

 

주황색 형광펜 사이의 범주가 'footer' 영역

 

 

Why we need 'Semantic tag'?

  1. web browser가 html의 source code만 보고 어느 부분이 제목이고 메뉴고 본문 내용인지 쉽게 알 수 있음.
  2. 문서 구조가 정확히 나눠져서 다양한 화면(PC, 모바일 web browser, 스마트 기기)에서 웹 문서 표현하기 쉬움.
  3. Internet에서 website 검색할 때 필요한 내용 정확히 찾을 수 있음.

 

 

Major Semantic tag

   
<header> website 전체의 header 또는 특정 영역의 header.
※ <head>와 다른 것임! 주의!!
<nav> 웹 문서 안의 다른 위치로 or 다른 웹 문서로 연결하는 링크 만듦.
header, footer, side bar 등 어디든 위치 가능.
여러 개 쓴다면 각각 id 속성 지정해서 다른 스타일 적용 가능.
<main> 웹 문서에서 핵심이 되는 내용(main contents) 넣음.
웹 문서에서 한 번만 사용 가능.
<article> 독립된 웹 콘텐츠 항목을 넣음.
     ex, 블로그 포스트, 뉴스 사이트 기사
문서 안에 여러 개 사용 가능.
<section> tag를 안에 쓸 수 있음.
<section> 웹 문서에서 contents 영역.
몇 개의 contents를 묶을 뿐, <article>처럼 독립된 contents를 보여주는 것과 다름.
     cf, 단순히 스타일 적용을 위해 contents를 묶으려면 <div> 쓰면 됨.
<aside> side bar 영역.
website에서 필수 요소가 아니기 때문에 필요할 때만 쓰면 됨.
<footer> 웹 문서 맨 아래 footer 영역에 사용함.
사이트 제작 정보, 저작권 정보, 연락처 등.
<header>, <section>, <article> 등 semantic tag 모두 사용 가능.
<div> = division.
id나 class 속성을 넣어 ①문서 구조 만들기 ②스타일 적용하기에 씀.
     ex, <div id="header">, <div class="detail">

 

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

'프밍 > HTML' 카테고리의 다른 글

DAY 2. 목록 형성 관련 tag: <ol>, <ul>, <li>  (0) 2022.08.20
DAY 2. 텍스트(text) 삽입과 관련된 tag  (0) 2022.08.20
DAY 2. HTML 파일 만들기 실습  (0) 2022.08.20
DAY 1. HTML의 구조  (0) 2022.08.19
DAY 1. HTML이란?  (0) 2022.08.19
'프밍/HTML' Related Articles more
Comments