[HTML] HTML5, Semantic Tag, 식별자(id, class, name)

HTML5 Semantic Tag

 - 페이지 레이아웃 구성하는 용도

 - 렌더링 결과는 중요하지 않음(화면에 보이는 모습은 중요하지 않음) > <div>와 동일

 - 블럭태그

 - 해당 태그가 페이지내에서 어떤 역할 의미 중요.

 - 결론 : 사람이 소스(태그)를 봤을 때 의미를 확실히 알 수 있도록 해놓은 것.

1. <header> 헤더 

- 페이지의 상단부(타이틀, 주메뉴, 검색창 등..)

2. <nav> 네비게이션 

- 메뉴역할(주메뉴, 서브메뉴, 기타메뉴)

3. <section> 섹션 

- 전달하는 컨텐츠 영역

4. <article> 아티클 

- 섹션안에있는 게시물 하나하나(섹션은 아티클의 집합인경우가 많다.)

5. <aside> 어사이드 

- 보조내용이 있는 경우(광고,실시간 채팅창), 보조섹션

6. <footer> 푸터 

- 바닥글같은,,, 하단의,,, 저작권, 연락처 등등..

데이터의 의미 <- 태그를 통해서 알수 있는가???

일반적인 HTML 태그 -> 데이터의 의미(X) -> 데이터의 역할에 가까움 

사용자 정의 식별자 > 개발자 부여 > 의미에 맞게

- 식별자 명명 규칙 : 영문자 + 숫자 + _(언더바)

1. id

- 문서내에 유일한 객체 식별자

- 중복값 발생 X

- 모든 태그에 적용 가능

- HTML 잘 사용 안함

- CSS, Jvavscript 에서 사용 많이함

2. class

- 성격이 동일한 태그들을 그룹으로 나타내기 위한 식별자

- 중복값 발생 O

- 모든 트개에 적용 가능

- CSS, Jvavscript 에서 사용 많이함

3. name

- <a>,<img>,<form> 태그에만 적용 가능

- 역할 : 태그의 의미 식별(X) > 서버전송용 사용(O), 내부 스크립트용 사용(O)

- HTML에서만 사용

- CSS, Javascript에서 사용 안함(일부 사용 가능)