2. 시맨틱 태그

23.03.07 ver

1. 참고 도서 & 자료

• 웹 표준의 정석 http://aladin.kr/p/Fyssu

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석

---

태그(Tag)
HTML에서 태그는 꺾쇠(< 기호랑 > 기호)를 사용하는 문법입니다.
일반적으로 시작 태그와 종료 태그로 내용을 감싸는데요, 시작 태그는 <태그 이름> 형태로 쓰고 종료 태그는 </태그 이름> 형태로 씁니다.

 

줄바꿈(<br>)이나 이미지(<img>)처럼 안에 내용이 없는 태그는 시작 태그만 씁니다.
참고로 마지막에 슬래시(/) 기호를 넣어서 하나짜리 태그라는 걸 표시하기도 하는데요. 
둘 다 올바른 HTML 문법이니까 참고로 알아 두세요!

 

2. 시맨틱(semantic) 태그

HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다.

시맨틱이란 '의미론적인', '의미가 통하는' 이라는 뜻이 있다.

 

왜 필요할까?

1. 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알수 있기 때문이다. 덕분에 화면 낭독기와 같은 보조 기기에서 사이트의 구조를 제대로 이해할 수 있다. 그러면 웹 사이트 사용자에게 보다 더 정확한 내용을 전달할 수 있다.

 

2. 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽기 때문

 

3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 웹 사이트의 본문 내용을 검색해야 한다면 메뉴나 푸터 영역이 아니라 본문 영역에서만 검색하기 때문이다.

 

주요 시맨틱 태그

<header> 태그

말 그대로 헤더 영역을 의미한다.

사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다.

 

<nav> 태그

같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.

웹 문서의 위치에 영향을 받지 않기에 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.

<nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.

 

<main> 태그

웹 문서에서 핵심이 되는 내용을 넣는다.

웹 문서마다 다르게 보여 주는 내용으로 구성한다.

웹 문서에서 한 번만 사용할 수 있다.

 

<article> 태그

웹에서 실제로 보여 주고 싶은 내용을 넣는다.

여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있다.

 

<section> 태그

웹 문서에서 콘텐츠 영역을 나타낸다.

<article> 태그와 비슷해 보이지만 다르다.

 

<aside> 태그

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

필요한 경우에만 사용하면 된다.

 

<footer> 태그

웹 문서에거 맨 아래쪽에 있는 푸터 영역을 만든다.

푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다.

 

<div> 태그

div는 division의 줄임말

<header>, <section> 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터 등을 구별할 때 <div> 태그를 사용했다.

id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다. 즉, 영역을 구별하거나 스타일로 문서를 꾸미는 것이다.

 

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

----

element VS container

- container 태그들을 활용하여 웹 사이트를 구성하자

(div, section, article, header, footer, aside, nav, main)

 

block VS inline

- block 요소는 한 줄을 차지한다.

(h1~h6, address, blockquote, p, pre, table, ol, ul)

- inline 요소는 컨텐츠만큼 크기를 차지한다.

(a, abbr, audio, b, span, cite, code, data, i, mark)

 

공부를 위한 참고 사이트

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started

https://developer.mozilla.org/ko/docs/Web/HTML/Element

https://html.spec.whatwg.org/

---

3. 질문

Q. <section> 태그와 <article> 태그의 차이점은?

<section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다.