DAY 03 - 2 : HTML 디스플레이, div 태그, 시맨틱 태그

- HTML의 디스플레이

1. inline

   content  크기 만큼 자리를 차지하는 요소이다.

   text, img, span 태그가 인라인 요소이다.

   문자의 특징을 가지고 있다.

 

 

2. block

   라인을 모두 차지하는 요소이다.

   p, h, ul, li, div, ....

   면의 특징을 가지고 있다.

 

---

- span 태그

줄 단위로 영역이 설정된다.

inline 특징을 가지고 있다.

 

 

- div 태그

면 단위로 영역이 설정된다.

block 특징을 가지고 있다.

 

---

- 시맨틱 태그 (Semantic Tag)

의미가 있는 태그이다.

 

 

- 시맨틱 태그의 장점

검색엔진에 최적화되어있다.

스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

div>div>div>div>... 끝 없는 div를 탐색하는 것 보다 효율적이다.

개발자에게 명확한 의미를 전달할 수 있다.

 

 

- header 태그

페이지의 제목과 같은 소개 내용을 포함
heading 태그나 로고, 저작권 정보, 검색 양식, 작성자 이름 등을 포함

 

 

- nav 태그

메뉴, 목차등에 사용

 

 

- main 태그

지배적인 컨텐츠 영역을 나타내는 태그

 

 

- section 태그

구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
섹션에는 항상 제목이 있는 것이 일반적이다.

 

 

- article 태그

자체적으로 의미가 있는 웹사이트 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서이다.
게시물, 잡지 또는 신문기사

 

 

- footer 태그

작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트를 포함하고있다.

 

 

- aside 태그

간접적으로 문서와 관련된 내용
사이드바 또는 콜아웃 상자