✔div
아무 의미가 없는 컨테이너 태그
block
묶어서 스타일링하거나 특정위치에 배치하고 싶을 때
본인만의 속성X 전역속성만 사용
✔span
아무 의미가 없는 컨테이너 태그
inline
구문컨텐츠를 담음 (보통 텍스트 꾸밀때)
본인만의 속성X 전역속성만 사용
✔시맨틱태그, 요소
의미를 가지고 있는 태그
✔div, span
non-semantic tag
✔의미론적인 마크업을 하면 좋은점?
검색엔진이 중요한 키워드를 수집할 수 있음
스크린리더(=웹접근성) 페이지 탐색에 유용
개발자입장에서 가독성이 좋음
내가 만들 컨텐츠에 맞는 시멘틱태그를 찾되, 없으면 div나 span 쓰기
✔
header - 소개 및 탐색에 도움을 주는 콘텐츠
footer - 작성자, 저작권 정보, 관련문서 등
전체 웹페이지에 하나만 사용
header와 footer는 웹페이지 어디를 탐색해도 동일하게 보이는 경우가 많음
태그 안에 다른 header나 footer 넣을 수 없음
✔nav
현재 페이지가 전체 영역 중에서 어디있는지 탐색
다른 페이지 링크 보여줌
한페이지 안에서 다른 영역으로 이동을 용이하게 해주기도 함
✔aside
주요 내용과 간접적으로만 연관된 부분 (부가정보)
사이드 바, 콜아웃 박스
없다고 해서 크게 문제가 되지 않는 내용 넣음
결과는 아무런 스타일링이 되지 않음 css이용해야함
✔main
body 내에서 주요 컨텐츠를 나타내는 가장 바깥쪽 컨테이너
body 태그안에 딱 하나만 사용 가능
인터넷 익스플로러는 지원X
✔article
독립적으로 구분해 배포하거나 재사용할 수 있는 컨텐츠
아티클 자체가 독립적인 콘텐츠라 그 하나만으로 이해가능 & header/footer 사용해서 넣어줄 수 있음
article 자식으로 보통 아티클을 식별할 수 있는 제목을 넣어줌
aritcle 안에 section 여러개 가능 & section 안에 article 여러개 가능
게시판, 블로그 글, 매거진, 뉴스 기사 등
✔section
전체 글의 흐름에 있어서 문맥적으로 호흡이 끊겨서 바뀌는 부분
article을 사용될 수 있으면 사용하고 그게 아니면 section
걔만 덜렁가져가면 앞뒤 맥락을 몰라 이해가 안됨 -> 단독적인 컨텐츠가 될 수 없음 -> section
section을 일반 컨테이너로 쓰지 않기 스타일링이 목적이면 div 사용
문서 요약에 해당 구획이 논리적으로 나타나야하면 section 사용
✔Ordered List = ol
정렬 목록
순서가 있는 목록
단계적으로 수행해야 하는 목록
숫자가 붙는 스타일링
type 속성 = 'a, A, i, I' (기본값은 숫자)
start 속성 = 시작하는 숫자 변경
reversed 속성 = 숫자가 역순으로 바뀜
✔Unordered List = ul
비정렬 목록
순서가 없는 목록
아이템을 나열해야 할 때
블랙포인트가 붙는 스타일링
✔List Item = li
단일 아이템
✔dl
용어를 정의하거나 설명
용어사전, 메타데이터(키-값 쌍 목록) 표시
dt, dd가 짝을 이뤄 자식으로 들어감
dt, dd를 div로 감싸서 자식으로 들어가기도 함
✔dt (term)
용어
dt, dd 끼리만 형제로 사용가능
✔dd (description)
dt에 들어가는 용어를 dd가 설명
들여쓰기가 자동으로 들어감
✔table
✔tr (table row)
행
열의 갯수만큼 자식(=th, td)을 가짐
✔th (table head)
행이나 열을 대표하는 명칭
scope 속성 = 'col, row', 행을 대표하는지, 열을 대표하는지 명시, 겉으로 바뀌진 않음 (웹접근성 높힘)
✔td (table data)
데이터
tr에 다 동일한 갯수의 th, td가 들어가야하는 건 아님
colspan 속성 = '2'
차지하고 있는 영역을 넓혀서 표시 가능
✔thead
표에서 head 영역(tr) 묶어 table 바로 아래 자식으로 넣기
thead를 사용하면 tr을 형제로 사용하면 안됨
✔tbody
표에서 body 영역(tr) 묶어 table 바로 아래 자식으로 넣기
여러개의 tbody 가질 수 있음
✔tfoot
표에서 foot 영역(tr) 묶어 table 바로 아래 자식으로 넣기
✔caption
표의 전체를 아우르는 설명, 부가적인 설명
표의 위 & 가운데 정렬되는 스타일링
table 요소의 첫번째 자식으로 입력해야함
설명을 표 아래 붙이고 싶으면 css로 가능
