목차
시맨틱 태그 (Semantic Tag)
① 시맨틱 태그의 정의
② 시맨틱 태그 종류
(1). <header>
(2). <nav>
(3). <main>
(4). <aside>
(5). <section>
(6). <article>
(7). <footer>
시맨틱 태그 (Semantic Tag)
① 시맨틱 태그의 정의
"Semantic"은 "의미의, 의미론적인"이라는 뜻을 가진 단어이다.
이번에 다루는 시맨틱 태그를 그대로 해석해 보자면, "의미를 가진 태그"라고 할 수 있다.
좀 더 쉽게 말하자면 앞에서 배운 <div>와 같은 태그에 별도의 의미를 부여한 것이다.
상단의 이미지에서 빨간색 테두리로 감싼 <nav>, <footer>, <header>가 대표적인 시맨틱 태그이다.
시맨틱 태그는 HTML5에서 처음 등장하였으며, 각 태그의 명칭으로 사용된 단어의 뜻을 생각해 보면
<header>는 웹 페이지의 상단부, <footer>는 웹 페이지의 꼬리, 하단부라는 것을 쉽게 알 수 있다.
즉, HTML 문서의 태그만 봐도 문서를 예전보다는 쉽게 이해하는 것이 가능해졌다.
그러면 이제 본격적으로 HTML에서 사용되는 대표적인 시맨틱 태그가 무엇이 있는 지를 알아보자.
② 시맨틱 태그의 종류
이번 장에서 시맨틱 태그를 다루기는 하는데, HTML의 시맨틱 태그 전체를 설명하지는 않을 것이다.
<header>, <nav>, <main>, <aside>, <section>, <article>, <footer>
위의 7가지 태그만 다루도록 하고, 나머지 태그는 아래의 링크를 참고하길 바란다.
MDN - Semantic's(1). <header>
- header => 머리말, 웹 문서의 머리, 도입부에 사용되는 태그
- 사이트 로고, 웹 페이지의 제목(h1~h6), 작성자 이름과 같은 웹 페이지의 도입부에 들어갈 콘텐츠나
<nav> 태그를 사용해서 사이트 메뉴를 포함시킬 수 있다.
- HTML 문서에서 여러 개의 <header> 태그를 사용할 수 있다.
<!-- Header 태그 사용 예시 -->
<header>
<h4>개발 공부 노트</h4>
<p>마지막 업데이트: 2023.04.26 - 수요일</p>
</header>웹 공부 노트
마지막 업데이트: 2023.04.26 - 수요일
(2). <nav>
- 현재 페이지에서 특정 부분으로 넘어가거나 혹은 다른 페이지로 넘어가는
내비게이션 링크의 집합을 표현할 때 사용되는 태그
- 주로 웹 페이지의 메뉴나 목차를 만들 때 사용된다.
<!-- nav 태그 사용 예시 -->
<nav>
<h5>목차</h5>
<ul>
<li>Java 개요</li>
<li>Java의 역사</li>
<li>Java - 변수</li>
</ul>
</nav>(3). <main>
- 문서의 주요 콘텐츠, 핵심적인 내용을 나타내는 태그
- HTML 문서에서 <main> 요소는 딱 하나만 존재해야 하므로 <header>, <nav>, <article>과 같은
문서 전반에 걸쳐서 반복되는 내용이 포함되는 요소 안에 들어갈 수 없다. (자식 요소가 될 수 없다.)
<!-- main 태그 사용 예시 -->
<main>
<header><h3>Java 개요</h3></header>
<section>
<h4>Java의 정의</h4>
<p>
1995년 미국의 '썬 마이크로 시스템즈'에서 개발한 <br/>
객체 지향 프로그래밍 언어이다.
</p>
</section>
<section>
<h4>Java의 특징</h4>
<p>
- 쉬운 난이도의 프로그래밍 언어이다. <br/>
- 플랫폼에 독립적이다.<br/>
- 자동으로 메모리를 정리해주는 기능을 가지고 있다.<br/>
- 객체 지향 프로그래밍 언어이다.
</p>
</section>
</main>Java 개요
Java의 정의
1995년 미국의 '썬 마이크로 시스템즈'에서 개발한
객체 지향 프로그래밍 언어이다.Java의 특징
- 쉬운 난이도의 프로그래밍 언어이다.
- 플랫폼에 독립적이다.
- 자동으로 메모리를 정리해주는 기능을 가지고 있다.
- 객체 지향 프로그래밍 언어이다.
(4). <aside>
- 문서에서 다루는 주요 내용과 연관된 부수적인 내용을 다루려고 할 때 사용되는 태그
- 웹 페이지에서 좌측이나 우측에 존재하는 사이드바를 표현할 수 있다.
<!-- aside 태그 사용 예시 -->
<h4>Java의 정의</h4>
<p>1995년 미국의 '썬 마이크로 시스템즈'에서 개발한 객체 지향 프로그래밍 언어이다.</p>
<aside>
<p>
썬 마이크로 시스템즈는 2010년에 oracle 사에 인수됐으며 <br/>
현재 Java는 Oracle 사에 의해 배포되고 있다.
</p>
</aside>Java의 정의
1995년 미국의 '썬 마이크로 시스템즈'에서 개발한 객체 지향 프로그래밍 언어이다.
(5). <section>
- 문서의 내용에서 콘텐츠를 주제 별로 구분지을려고 할 때 사용되는 태그
제목을 나타내는 Heading(h1~h6) 태그와 같이 사용할 수 있다.
<!-- section 태그 사용 예시 -->
<h3>Java의 특징</h3>
<section>
<h4>쉬운 난이도의 언어이다.</h4>
<p>
Java는 C, C++의 문법을 차용한 언어이지만 <br/>
포인터, 다중 상속 등의 문법적인 난이도를 높이는 것들을 제거한 <br/>
프로그래밍 언어이다.
</p>
</section>
<section>
<h4>플랫폼에 독립적이다.</h4>
<p>
Java로 개발한 프로그램을 실행시키면 <br/>
JVM이 프로그램이 동작하는 운영체제의 종류를 파악하고 <br/>
해당 운영체제에 맞는 기계어로 다시 번역하기 때문에 <br/>
운영체제의 종류에 구애를 받지 않고 프로그램을 실행할 수 있다.
</p>
</section>Java의 특징
쉬운 난이도의 언어이다.
Java는 C, C++의 문법을 차용한 언어이지만
포인터, 다중 상속 등의 문법적인 난이도를 높이는 것들을 제거한
프로그래밍 언어이다.플랫폼에 독립적이다.
Java로 개발한 프로그램을 실행시키면
JVM이 프로그램이 동작하는 운영체제의 종류를 파악하고
해당 운영체제에 맞는 기계어로 다시 번역하기 때문에
운영체제의 종류에 구애를 받지 않고 프로그램을 실행할 수 있다.
(6). <article>
- 기존 문서에서 독립적으로 구성할 수 있는 요소를 정의할 때 사용되는 태그
- 게시물, 블로그에서 작성한 글, 신문 기사 등
기존 문서의 내용과 개별적으로 존재할 수 있는 내용들을 <article> 요소에 포함시킬 수 있다.
<!-- article 태그 사용 예시 -->
<section>
<h4>Java의 특징</h4>
<p>
1. 쉬운 난이도의 언어이다. <br/>
2. 플랫폼에 독립적이다. <br/>
3. 자동으로 메모리를 정리해주는 기능이 존재한다. <br/>
4. 객체 지향 프로그래밍 언어
</p>
<section>
<article>
<p>소중한 글 잘 보고 갑니다.</p>
</article>
<article>
<h4>오늘의 날씨</h4>
<p>2023.04.06 - 수요일</p>
<p>오늘 날씨는 맑지만 바람이 불어서 다소 쌀쌀한 날씨입니다.</p>
</article>
<!--
<section>과 <article> 요소에 포함되는 내용들은
얼핏 보기에는 큰 차이가 없어보인다.
하지만 이 둘의 용도를 생각해보면 차이가 없을 수가 없다.
<section> 태그 같은 경우에는 기존 콘텐츠 내용을
주제 별로 나눌려고 할 때 사용이 되고
<article>은 기존 콘텐츠 내용과 상관이 없는
즉, 뉴스 기사나 게시물 같이 독립적이고, 다른 웹 페이지로 내용을 옮겨도
전혀 어색하지 않은 그런 혼자 있어도 이상할 게 없는 내용을 포함한다는
차이가 존재한다.
-->Java의 특징
1. 쉬운 난이도의 언어이다.
2. 플랫폼에 독립적이다.
3. 자동으로 메모리를 정리해주는 기능이 존재한다.
4. 객체 지향 프로그래밍 언어
댓글
소중한 글 잘 보고 갑니다.
오늘의 날씨
2023.04.06 - 수요일
오늘 날씨는 맑지만 바람이 불어서 다소 쌀쌀한 날씨입니다.
(7). <footer>
- footer => 꼬리말, 웹 문서의 꼬리, 하단 부분을 의미하는 태그
- 작성자 정보(작성자 명이나 연락처 등), 저작권 정보, 참고 문헌, 사이트맵과 같이
문서와 관련된 정보를 담는 태그
- HTML 문서에서 여러 개의 <footer> 태그를 사용할 수 있다.
<!-- footer 태그 사용 예시 -->
<footer>
<p>작성자: 일월서생</p>
<address>작성자 연락처: 031-000-0000</address>
</footer>2023.04.27 - 본문 작성 완료 (15:05)
'Frontend > HTML' 카테고리의 다른 글
| [HTML] <form> 태그 (0) | 2023.05.14 |
|---|---|
| [HTML] 입력 요소 3가지 (<input>, <select>, <textarea>) (1) | 2023.05.05 |
| [HTML] 목록 만들기 (<ul>, <ol>, <li>) (0) | 2023.04.01 |
| [HTML] <a> 요소 (0) | 2023.03.29 |
| [HTML] <img> 태그 (0) | 2023.03.19 |
