시맨틱 태그
웹 문서 구조를 만드는 태그
시맨틱 태그는 왜 필요해요?
1. 웹문서 구조를 알기 쉽다.
2. 다양한 플랫폼에 웹문서를 표현하기 쉽다.
역시 오른쪽이 훨씬 읽기 쉽다!
웹 문서의 구조를 만드는 주요 시멘틱 태그
<Header>
주로 맨 위쪽이나 왼쪽에 있다.
<nav>
웹 문서 안에서 다른 위치로 연결하거나 링크를 만들 때 사용합니다.
<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>
핵심 컨텐츠가 있는 영역입니다.
<main> 태그는 웹 문섣에서 한 번만 사용할 수 있습니다.
<article>
웹에서 실제로 보여주고 싶은 내용
<section>
콘텐츠 영역
단순히 스타일을 적용하려고 묶으려면 <section> 대신 <div>를 사용합니다.
<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>
보면 메인 영역 안에 2개의 section 영역이 있다.
<aside>
본문 내용 외, 왼쪽/오른쪽/아래쪽에 사이드바를 만든다.
<footer>
웹 문서 맨 아래쪽에 정보, 저작권, 역락처 등을 넣는다.
<div>
<header>, <section>이 나오기 전에는 이걸로 문서 구조를 만들었습니다.
id나 class 속성을 이용해서 문서 구조를 만들거나 스타일 적용할 때 사용