[HTML] 시맨틱 태그, 글로벌 속성

새롭게 등장한 트렌드 "시맨틱 웹(sementic web)"

                                       

시맨틱 웹은 "의미론적인 웹"으로 직역될 수 있음. 즉, 더 의미있게 웹 페이지를 설계하는 트랜드

그러면서 시맨틱 태그를 사용하기 시작했음. (태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그)

 

1) header 태그 

: 웹 페이지에서 헤더 영역을 구분해주는 데에 사용

: 웹 사이트의 최상단이나 좌측에 위치. 로고, 검색, 메뉴와 같은 요소들을 포함. 

<header>
헤더 구성
</header>

 

 

2) nav 태그 

: 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데에 사용. 

<nav></nav>

 

 

3) section 태그 

: 웹 페이지에서 논리적으로 관련있는 내용 영역을 구분할 때 사용 -> 내용의 제목을 나타내는 hn 태그 중 하나를 포함. 

<section> </section>

 

 

4) article 태그

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

예를 들어, 로그인 페이지에 쓰일 수 있음 

<article> </article>

 

 

5) aside 태그 

: 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서 article이나 section 태그로 영역을 구분할 수 없을 때 사용함. 

: 네이버 우측에 사람들이 많이 찾아본 연관검색어, 광고 등등

<aside></aside>

 

 

6) footer 태그 

: 일반적으로 웹 페이지의 최하단에 있고, 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함하는 푸터 영역 구분시 사용

 

 

7) main 태그 

: 웹 페이지의 주요 내용을 지정할 때 사용하는 태그

: 문서에서 반복해서 등장하는 요소를 포함해선 안 됨. 

: 어떤 태그든 하위에 포함될 수 없음. 

 

 

 

그 외의 태그는 아래 링크에서 확인하기

https://developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

 

---

글로벌 속성(global attribute) : 태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성 

 

속성	값	설명
class	value	요소에 클래스 값 지정. 클래스값은 CSS에서 클래스 선택자로 활용함.
id	value
style	style	요소에 인라인 스타일을 지정
title	text
lang	language code
hidden	hidden
data-*	value	사용자가 임의의 속성을 만들 수 있다.

 

1) class 속성 

요소에 클래스명을 지정할 때 사용함. 

클래스명은 CSS에서 클래스 선택자로 활용하며, 같은 클래스명은 여러 요소가 중복해서 가질 수 있다. 

 

 

2) id 속성 

요소에 id를 지정할 때 사용.

id는 CSS에서 아이디 선택자로 활용되며, 중복될 수 없다!

 

 

3) style 속성 

CSS 코드를 인라인으로 작성할 때 사용함. 

 

 

4) title 속성 

요소에 추가정보를 넣을 때 사용.

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

 

 

5) lang 속성 

요소에 사용한 텍스트의 언어 코드를 지정할 때 사용

일반적으로 HTML 문서의 언어코드는 html 태그의 lang 속성에 작성 

ex) ko, de ....

 

 

6) data-* 속성 

사용자 커스텀 속성을 만든다. 

<p data-name="spiderMan" data-hero="true">...</p>