HTML
1) HTML 태그 의미 및 사용
header
헤더는 주로 제목, 네비게이션을 포함하고 로고, 목차, 검색폼을 그룹핑 할 수 있음 또한 헤더는 여러번 쓸 수 있음
=> 이를 가지고 구글 검색엔진이 알고리즘을 만듬
=> 가장 처음에 나오는 헤더가 제일 중요한 것이라고 인식
footer
저작자 관련정보 혹은 주용 내용과 관련된 링크 등을 그룹핑하며 헤더처럼 여러번 쓸 수 있음
=> 검색엔진이 똑같이 작용
main
페이지 내의 가장 주요한 부분을 그룹핑할 때 사용하며 한번만 사용 가능
section
div는 아무 의미가 없지만 section은 "한 가지 주제로 묶는다."라는 의미를 가짐
aside
주내용과 분리된 부가적인 정보나 인용, 광고 등의 내용을 담음
위치와 상관없음
div와 section 비교
-
div
나누다(의미없이 스타일을 위해 그룹핑)
=> 의미가 없는 구조이기 때문에 한 디브 태그 안에 h1을 하나씩 넣으면 무엇이 대장인지 인식을 못함 -
section
한 부분(의미를 기준으로 그룹핑)
=> 한 섹션 안에 h1이 하나씩 있어도 그 안에 대장으로 자동으로 인식함
article
뉴스, 블로그, 덧글처럼 컨텐츠를 발행하고 배포할 목적으로 만들어진 영역
별도의 헤더와 푸터를 가질 수 있음
nav
주요 네비게이션을 그룹핑 함
2) 의미구조
HTML에서 의미구조(outline)란 목차를 제공하는 것과 같다.
XHTML에서는 h1 ~ h5만 의미구조를 부여했음
(의미구조의 우선순위는 검색엔진과 관련되어 있기 때문에 중요함)
HTML5에서는 더 나은 시멘틱웹을 위해서 의미구조(outline)를 보강함.
div
=> 의미구조 영향 x(header, footer, main)
=> 섹셔닝 태그로서 의미구조 영향 o(section, article, aside, nav)
아웃라인 사이트로 연습해보기
CSS
(1) 블록 성질
- block
- list-item
- table
- table-caption
- table-footer-group
- table-header-group
- table-row
- table-row-group
- flex
(2) 인라인 성질
- inline
- inline-block
- table-cell
