HTML Display

인라인

- content의 크기만큼만 자리를 차지하는 요소

- 텍스드, img, span 등

- 텍스트의 특징을 가지고 있음

 

블록

- 라인을 모두 차지하는 요소
- p, h, ul, li, div 등
- 면의 특징을 가지고 있음

 

span 태그

- 블록 특징을 가지고 있음
- 면 단위로 영역을 설정

 

시맨틱(Semantic) 태그

Semantic : 의미가 있는, 의미론적인
- div > div > div >.. 끝없는 div를 탐색하는 것보다 효율적
- 개발자에게 명확한 의미를 전달
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- 검색엔진 봇에게 정보를 제공

 

• header
  - 페이지의 제목과 같은 소개, 내용을 포함
  - heading <h> 태그나 로고, 검색양식, 작성자 이름등을 포함

 

• nav
  - 메뉴, 목차 등에 사용

 

• main
  - 주 컨텐츠 영역을 나타내는 태그

 

• section
  - 구체적인 시맨틱 태그가 없는 문서에 독립적인 영역을 나타냄
  - 제목이 있는 컨텐츠에 사용하는 것이 일반적

 

• article
  - 자체적으로 의미가 있는 웹페이지의 부분
  - 독립적으로 배포 또는 재사용되도록 의도된 문서
  - 블록, 게시물, 신문기사

 

• footer
  - 작성자의 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함

 

• aside
  - 간접적으로 문서와 관련된 내용 또는 관련 없는 사이드바