1. body: 문서의 구조
1) <header>: 헤더를 만들 때 쓰는 태그
소개나 탐색을 돕는 것의 그룹
상단에 있는 바 : 로고, 메뉴, 로그인, 검색바 등
후손이 될 수 없다. => header, address, footer안에 header를 넣을 수 없다
속성: 전역 속성만 포함(header에만 쓰는 속성은 없다)
호환성: IE9 ver.이후부터 모두 지원
2) <footer>
가장 가까운 구획화 콘텐트, 구획화 루트의 푸터
페이지 가장 하단에 있는 작성자 구획, 주소 등 데이터 ex. 회사 이름, help, privacy 등
후손이 될 수 없음
속성 : 전역 속성만 포함
호환성: IE9 ver. 이후부터 모두 지원
블록요소
=> header, footer는 기계가 읽기 좋게 만들어준다
=> semantic tag: html5부터 많아짐(의미를 가지는 태그)
3) h1~h6
6단계의 문서 제목을 구현
책의 목차같은 느낌! (대주제, 소주제...)
속성: 전역 속성
사용일람:
- 문서의 목차를 만드는 것처럼 사용할 수 있음.
- 제목 폰트의 크기를 줄이기 위해 낮은 단계를 사용하지 말고 css의 font-size를 사용하기
(html은 구조를 잡기 위한 용도이기 때문에)
- 제목 단계를 건너뛰는 것을 피하기 : 순차적으로 내용을 찾아가는데 건너뛰면 찾는데 문제가 생기 룻 있다
- 첫번째 단계의 제목은 (<h1>은) 한 페이지당 하나만 : 같은 레벨의 제목이면 h2를 여러번, h1은 전체 페이지의 제목
=> 크기를 조절하기 위해 쓰지 말고 목차를 위해 쓰도록!
4) main
문서나 앱의 주요 콘텐츠를 나타낸다. 문서의 핵심 주제나 앱의 핵심 기능성에 대해 부연, 직접적으로 연관된 콘텐츠
ex. 블로그에서 본문(광고, footer, header가 아닌)
- 한 문서에 하나만 있어야
- IE에서 쓸 수 없다 !!!
- 블록 요소
=> <header> : 로고, 메뉴
<main> : 핵심
<footer> : 주소, 사업자
5)article
독립적으로 구분되거나 재사용 가능한 영역을 설정 (독립적, 재사용! : 전혀 다른 곳으로 분리해도 재사용 가능)
(매거진/ 신문 기사, 블로그 등)
- 일반적으로 h1~h6
- 작성일자와 시간을 <time>의 datetime 속성으로 작성
블록요소
=> article 내부에 또 article로 구분을 할 수 있다.
=> 내부에 있는 article이 외부에서도 사용할 수 있다면 article로 쓸 수 있다
6)section
문서의 일반적인 영역 설정 (영역을 나누는 용으로 사용)
h1~h6을 포함해서 식별
블록 요소
section 내부에 article 가능, article 안에 section 가능
div은 의미가 없음 / section은 제목을 포함해서(h1 등) 의미를 가지게 된다 / article은 제목을 포함할 수 있다
7)aside
문서의 별도 콘텐츠 설정 : 핵심 내용과 별개의 내용
(보통 광고나 기타 링크의 사이드 바 설정)
8)nav
다른 페이지 링크를 제공하는 영역
navigation, 보통 메뉴 home, about, contact, 목차, 색인 등 설정
블록 요소 (header, footer, article, section, article, nav : 일반적으로 영역을 설정하는 건 블록 요소다)
안에 <a href = "">들의 묶음, ul, li태그들의 묶음을 nav으로 쓴다
9)address
body, article, footer 등에서 연락처 정보를 제공하기 위해 포함하여 사용 (전화번호, 주소 등등)
<address>
<a href = "mailto: 이메일주소"> 이메일 </a>
<a href = "tel:+번호" > 전화번호 </a>
=> mailto: 이메일주소 [메일프로그램이 열리게 된다]
=> tel:+번호 [모바일에서 누르면 해당 번호로 전화할 수 있게 된다]
10) div
본빌적으로 아무것도 나타내지 않는 콘텐츠 영역 설정
-의미가 없고 필요할 때마다 사용할 수 있다
-그러므로 css 클래스 이름을 정할 수 있다
-블록 요소
11)ol, ul, li
(1)li: list item(리스트로 만들 항목)
=> display: list-item[블록요소]
=> 속성 value : 항목의 순서 설정, 값으로 숫자를 넣는다.
이하 항목들의 숫자가 다시 지정된다 ex. 첫번째 7, 두번째 99면 세번째는 100으로 자동 설정된다
cf. 이상하게 ul일때는 안되고 ol일 때만 되네,,왜지?
(2)ol: ordered list 정렬된(순서 있는) 목록, 항목 순서는 중요도를 의미할 수 있다
=> 숫자로 나온다
=> 속성 reversed(항목을 역순으로 설정) : 항목의 순서만 바뀌지 실제 항목이 바뀌는 것이 아님 (3,2,1식으로)
: reverse = 의형태가 아니라 그냥 reversed만 쓰면 된다, IE에서 지원 안된다
start(시작하는 숫자 설정) : ex. 4면 4,5,6으로 항목
type(항목에 매겨지는 번호의 유형) ex. a, A, i, I (i,I는 로마자로 나온다)
(3)ul: unordered list 정렬되지 않은(순서 없는) 목록
=> display: block
=> ol+li, ul+li : il, ul은 자식으로 li만 포함 가능
=> li는 단독으로 사용할 수 없다. 항상 ol,ul의 자식으로 포함되어야
ex. ul
li
ul
li
=> 이렇게 여러 차례 ul,ol안에 li를 넣고 그 안에 ul,ol을 넣고 li를 넣을 수 있다
이렇게 넣은 경우 들여쓰기가 된다
12) dl, dt, dd
: [ dt(용어) + dd(정의) ] 여러 개 = 쌍들의 영역 (dl)을 설정
=> description list, definition details, definition term
=> dl안에는 dd, dt만을 포함해야 한다. 그러므로 dd,dt만 잡아서 스타일링을 하고 싶으면 까다로움(이땐 ul,li)
=> dt, dd는 key, value형태 표시할 때 유용하다
=> 블록 요소
ex. <dl>
<dt>Coffee</dt>
<dd>Coffee is a brewed drink</dd>
<dt>Milk</dt>
<dd>Milk is a drink</dd>
</dl>
ex. <ul>
<li> => 용어와 설명 묶기
<dfn> 용어
<p> 설명
</li>
=> ul, li로 대체해서 사용 가능
13) p
paragraph : 하나의 문단 설정
코드 상에서는 enter를 쳐도 줄바꿈이 되지 않는다.
14)hr
문단의 분리(주제에 의한)을 위해 설정
수평선으로 표시되나 의미적 관점으로만 사용해야 함. (주제 분리용으로 써야지 수평선 놓기 위해 쓰면 안 된다)
빈태그
horizontal rule
선을 빼고 싶으면 css에서 border: none/ 다른 형태로 나타내고 싶으면 2px dashed red;
요소는 사각형. 그러므로 padding을 넣으면 사각형으로 나오고 2px로 설정하면 4px로 나온다
그러므로 한 선만 나오도록 설정을 해야한다.
=> border: none, border-top: red ( 다 제거하고 하나만 살리면 된다 )
15)br
줄바꿈
빈태그
16)pre
: 서식이 미리 지정된 텍스트를 설정
preformatted text
- 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있다 (p는 엔터를 적용하지 않는 반면 pre는 시작-끝 사이 띄어쓰기 수, 줄바꿈 그대로 다 화면에 출력이 된다)
- 기본적으로 monospace글꼴 계열로 표시된다
(monospace: code의 기본 글꼴 - 한 알파벳마다 차지하는 너비가 모두 같다.)
- 블록요소
17)blockquote
일반적인 인용문 설정
block quotation
속성: cite
의미: 인용된 정보의 url
값: url
<blockquote cite = "url">
길이가 긴 인용문
</blockquote>