패스트 캠퍼스 강의를 들으며 html 태그들을 여기에 정리해보려 합니다.
💻 주요범위
💡 < html >
HTML 문서의 범위를 설정.
| 속성 | 의미 | 값 |
|---|---|---|
| lang | 문서의 언어 | ko, en...</span |
💡 < head >
HTML 문서의 정보를 설정.
💡 < body >
HTML 문서의 구조를 설정.
body{ display : "block"; }💻 메타데이터
💡 < title >
브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정.
💡 < base / >
HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정
- 한 문서에 한개만 존재해야함, 작성하다 헷갈릴수 있으니 주의!!
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| href | 기준 url | url | |
| target | a 태그 처럼 target 속성을 사용하는 요소의 기본값 | _self, _blank | _self |
💡 < link / >
외부 리소스의 연결 및 현재 문서와의 관계를 명시.
- HTML, CSS, ICON 등 가져오기.
| 속성 | 의미 | 값 |
|---|---|---|
| rel | (필수)현재 문서와 외부 리소스와의 관계 | stylesheet, icon... |
| href | 외부 리소스의 url | URL |
| type | 외부 리소스의 MIME 타입 | text/css, image/x-icon… |
💡 < meta / >
기타 메타데이터 요소(< link />, < style >같은)로 나타낼 수 없는 메타데이터를 나타내기 위해 설정.
- 보통 로고, 제목, 검색 등을 포함함.
| 속성 | 의미 | 값 |
|---|---|---|
| charset | 문자 인코딩 방식 | UTF-8, EUC-KR... |
| name | 메타데이터의 이름 | author, description… |
| http-equiv | 서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공) | refresh, X-UA-Compatible… |
| content | name, http-equiv의 값 |
👇 기본 설정
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
💡 < style >
스타일 정보(CSS)를 설정.
| 속성 | 의미 | 값 |
|---|---|---|
| type | MIME타입 | text/css |
💻 콘텐츠 구분
💡 < h1 >, < h2 >, < h3 >, < h4 >, < h5 >, < h6 >
문서의 정보 계층을 구조화.
- 숫자가 낮을수록 높은 단계(중요한)의 제목.
- 글자 크기때문에 사용하는 것은 금지! (글자 크기는 css로 조절)
h1
h2
h3
h4
h5
h6
h1, h2, h3, h4, h5, h6 { display: block; }💡 < header >
문서의 헤더를 설정.
- 보통 로고, 제목, 검색 등을 포함함.
header{ display:block; }
💡 < footer >
문서의 푸터를 설정.
- 보통 작성자, 저작권, 관련 문서 등을 포함.
footer{ display:block; }
💡 < main >
문서의 주요 콘텐츠를 설정.
- 하나의 문서에는 단 하나의 < main > 요소만이 존재해야 함.
main{ display:block; }💡 < article >
독립적으로 구분되거나 재사용 가능한 영역을 설정.
- 매거진/신문 기사, 블로그 등.
- 일반적으로 < h1 >~< h6 >를 포함하여 식별.
- 작성일자와 시간을 < time >의 datetime 속성으로 작성.
article{ display:block; }💡 < section >
문서의 일반적인 영역 설정.
- 일반적으로 < h1 >~< h6 >를 포함하여 식별.
section{ display:block; }💡 < aside >
문서의 별도 콘텐츠를 설정.
- 보통 광고나 기타 링크 등의 사이드바(Side bar)를 설정.
aside{ display:block; }💡 < nav >
다른 페이지 링크를 제공하는 영역을 설정.
- Navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정.
nav{ display:block; }💡 < address >
< body >, < article >, < footer > 등에서 연락처 정보를 제공하기 위해 포함하여 사용.
address{ display:block; }💡 < div >
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.
- Division, 꾸미는 목적으로 사용.
- 아무 의미 없는 태그이기 때문에 태그들을 묶어줄때 많이 사용함
div{ display:block; }💻 문자 콘텐츠
💡 < ol >, < ul > < li >
각 항목(< li >)의 정렬된 목록(< ol >)이나 정렬되지 않은 목록(< ul >)을 설정.
ol = Ordered List
ul = Unordered List
li = List Item
- < ol >과 < ul >은 자식으로 < li >만 포함 가능.(< li >는 단독사용 불가! )
- 정렬된 목록(< ol >)의 항목 순서는 중요도를 의미할 수 있음.
ul, ol { display : block; }
li { display : list-item; }< ol >
| 속성 | 의미 | 값 |
|---|---|---|
| start | 항목에 매겨지는 번호의 시작 값 | 숫자 |
| type | 항목에 매겨지는 번호의 유형 | a, A, i, I, 1 |
< li >
| 속성 | 의미 | 값 | 특징 |
|---|---|---|---|
| value | 항목의 순서를 설정 | 숫자 | 이하 항목들의 순서가 다시 지정됨 |
< ol, ul, li 태그 사용 예시 >
<ol>
<li>html</li>
<li>css</li>
<li>java script</li>
</ol>💡 < dl >, < dt >, < dd >
용어(< dt >)와 정의(< dd >) 쌍들의 영역(< dl >)을 설정.
dl = Description List
dd = Definition Details
dt = Definition Term
- < dl >은 < dd >, < dt >만을 포함해야 함.
- 키(key)/값(value) 형태를 표시할 때 유용.
dl, dt, dd { display: block; }< dl, dt, dd 태그 사용 예시 >
<dl>
<dt>HTML</dt>
<dd>웹 페이지를 위한 지배적인 마크업 언어다.</dd>
<dt>CSS</dt>
<dd>사용자에게 문서를 표시하는 방법을 지정하는 언어다.</dd>
</dl>💡 < p >
하나의 문단을 설정
- 일반적으로 정보통신보조기기 등은 다음 문단(< p >)으로 넘어갈 수 있는 단축키를 제공함.
p { display : "block"; }💡 < hr />
문단의 분리(주제에 의한)를 위해 설정
- 대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로만 사용해야 함.
hr { display : block; } 👇 이게 < hr >태그의 기본 모양
💡 < pre >
서식이 미리 지정된 텍스트를 설정.
- 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음.
- 기본적으로 Monospace 글꼴 계열로 표시됨.
pre { display: block; }< p, pre 태그 비교 >
<p> p태그는 공백과 줄바꿈
안됨
</p>
<pre>pre태그는
공백과 줄바꿈 허용
</pre>👇 실행 결과
p태그는 공백과 줄바꿈 안됨
pre태그는 공백과 줄바꿈 허용
💡 < blockquote >
일반적인 인용문을 설정.
| 속성 | 의미 | 값 |
|---|---|---|
| cite | 인용한 정보의 url | URL |
blockquote { display: block; }참고자료
mozilla
tcp school
