🤷♂️META 빈태그
속성
-
charset 문자 인코딩 방식은 meta tag중 제일 위쪽에 배치 되어야 한다.
- euc-kr: 완성형
- utf-8: 조합형
-
name 메타 데이터의 이름(정보의 종류)
- author(제작자), discroption(설명), viewport(화면렌더링 영역),
-
http-equiv http 프로토콜에 정보를 보내준다.
-
content name,http-equiv의 값을 작성할 때 사용한다.
→ 그러다 보니 name,http-equiv는 함께 사용할 수 없다.
🎂link /
rel 필수
😎style
type 생략가능
🤦♂️MIME TYPE
MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
필요할 때마다 찾아 보기
🐱💻BASE
경로의 기준이 되어준다.
그래서 base태그는 기본 경로들 상단에 배치해야한다.
html 문서 중 한번만 사용이 가능하다.
일부분에서만 사용이 된다면 오히려 문제가 발생할 수도 있다.
5
헤더와 푸터는 서로를(혹은 스스로를) 자식요소로 사용할 수 없다.
address의 자식으로도 사용 X (address안에 header나 footer가 못 들어간다, 반대는 가능 )
div와 다르게 의미가 있다. semantic element 의미적으로 사용이 되어야하는 이유는 보조 기구를 사용할 때 기계가 의미를 해석할 수 있기에
구획을 나누는데 구획의 제목을 h태그를 사용해서 넣을 수 있다.
-
header tag - 전역속성
로고, 메뉴
브라우저 호환성은 전부다 가능하다.
-
footer tag - 전역속성
사이트의 하단의 저작권, 연락처 등등을 포함하고 있다.
-
h1 ~ h6 - 전역속성
6단계의 문서 제목 구현
-
제목의 크기를 줄이기 위해서 h의 단계를 조절하지 마세요.
html 문서는 구조를 나타내는 문서이기 때문에 시각적인 표시로 사용해서는 안된다.
폰트 사이즈는 css에서!
-
제목 단계를 건너뛰는 것을 피하세요.
h1부터 순차적으로 기계가 찾아내려가기 때문에 h1 → h3 → h2순으로 사용X
-
h1은 한 페이지에 하나만 사용 (페이지의 제목이라고 생각)
-
중첩 목차의 단계로 생각하면 좋다 대주제 h1 , 부제목 h2, 목차 h3...
-
-
main tag -
문서의 핵심 주제나 앱의 핵심 기능에 직접적인 연결된 콘텐츠 <고유해야 하는 컨텐츠 - 한 문서에 하나의 main이 존재>
IE에서는 사용이 안된다.
-
article tag
독립적으로 구분되거나 재사용 가능한 영역
하나의 문서가 여러개의 article을 가질 수 있다.
독립적으로도 사용이 가능해야 한다.
기사, 매거진 (h1,h6)를 포함. - 의미를 포함한다는 뜻/ 각각의 article을 식별함
중첩이 되면 서로 관련된 글을 나타낸다. 블로그 article 안에 댓글 article
-
section tag
문서의 일반적인 영역
(h1,h6)를 포함(항상 포함하지는 X) -의미를 가지고 있음
article 안에 section이 있을 수도 있고, section안에 article이 들어 있을 수도 있다.
div와는 의미가 있느냐 없느냐의 차이.
요소를 일반 컨테이너로 사용X 컨테이너로 사용할 거면 div를 사용div와 section의 차이
구역을 설정하는 공통점이 있지만
section은 제목(h1~6)태그를 포함.(의미를 가지고있음)
div는 의미없이 사용이 됨.
article은 거기에 독립적인 사용까지
의미적인 부분: article(독립적으로 사용 가능) > section(제목 태그를 포함함) > div
-
aside
배너 광고나 기타 링크등의 별도의 콘텐츠
-
nav
다른 페이지의 링크를 제공하는 영역, 메뉴
대체로 list 형식을 취함
nav에 필요없는 링크는 footer로 간다.
하나의 문서에 여러개의 nav가 있을 수 있다.
-
address
body, article, footer등에서 연락처 정보를 가지고 있는가
대체로 a 태그와 함께 사용된다.
<a href="mailto:jim@rock.com">jim@rock.com
연락처 외의 정보를 담아서는 안된다.
😁div tag
순수 컨테이너
꾸미는 목적으로 사용할때 많이 사용되는데
css나 js를 이용해서 속성(attribute)를 이용해서 연결 #id .class
