티스토리 뷰
신나는 언어공부/HTML
HTML - 문서 바깥, 주석, 페이지 정보, 문서 구조 (Wrapper, Comment, Page Information, Document Structure)
Yolo진우 2018. 7. 20. 22:44
HTML 태그 정리
Documnet Wrapper(문서 바깥)
<!DOCTYPE> | (X)HTML 버전을 나타냄 |
|---|---|
<HTML> | HTML 문서 |
<HEAD> | 페이지 정보 |
<BODY> | 페이지 컨텐츠 |
Comment (주석)
<!-- COMMENT TEXT-->
HTML안에 주석을 나타냄
Page Information (페이지 정보)
| 태그 | 정의 | 사용 |
|---|---|---|
<base /> | 기본 URL | - 문서에 포함된 모든 상대 URL들의 기준 URL을 나타냄 |
<meta /> | META 정보 | - META 관련 요소들로 나타내어질 수 없는 메타데이터를 나타냄 |
<title> | 페이지 제목 | - 브라우저의 타이틀 바나 페이지의 탭에 보여지는 문서의 제목을 정의함 |
<link /> | 관련 자원 | - 현재 문서와 외부 리소스와의 관계를 명시 |
<style> | 스타일 자원 | - HTML의 일부에 대한 스타일 정보를 포함 |
<script> | 스크립트 자원 | - (x)HTML 문서내에 실행 가능한 스크립트를 포함하거나 참조 |
Document Structure (문서 구조)
| 태그 | 정의 | 사용 | Display |
|---|---|---|---|
<main> | 페이지 메인 내용들을 묶은 구간 | - body안에 문서나 앱의 주요 컨텐츠를 나타냄- 페이지에 2개 이상 있으면 안됨(Unique) | Block |
<header> | 소개나 탐색을 돕는 구간 | - 일부 제목요소들을 포함할 수 있고 저자를 나타낼 수 있음 예) 메인 TOP메뉴와 로고, 아이콘 등을 포함하는 구간 | Block |
<footer> | 저작권 정보나 서비스 제공자의 정보를 나타내는 구간 | - 일반적으로 구성자 구획, 저작권 데이터, 관련된 문서의 링크 등을 나타냄 - 주로 사이트 하단에 위치 예) copyright, contact, sitemap ,관련된 문서 등을 포함하는 구간 | Block |
<div> | 문서의 영역을 지정(아무런 의미를 가지지 않음) | - 스타일 또는 스크립트가 목적 - 같은 섹션에 포함된 여러개의 문단을 묶어 주석을 달고자 할때 유용하게 사용 - 최대한 사용 안하는 것이 좋음 예) 아무런 의미없이 스타일링 또는 스크립트만 사용하는 구간 | Block |
<section> | 문서나 응용 프로그램의 일반적인 구간을 표현 | - 제목으로 시작하는 컨텐츠를 의미적으로 그룹핑할때 사용 예) 소개, 뉴스 아이템, 연락처 등 | Block |
<aside> | 페이지 전체 내용과 관련이 있지만 주된 내용은 연관성 없는 내용 | - 페이지에 연관성이 없다고 해서 단순 삽입어구를 사용하면 안됨 예) 사이드바 | Block |
<article> | 문서내에 독립적인 컨텐츠를 나타냄 | - 하나의 문서 안에 여러개의 article이 올 수 있음 예) forum, 잡지, 신문 기사, 블로그 글, 댓글, 위젯, 가젯 등 독립적인 아이템 | Block |
<nav> | 페이지들을 이어주는 부분으로 네비게이션 링크로 구성됨 | - 모든 링크그룹이 nav요소일 필요는 없음 예) 메뉴, 리스트 형식 | Block |
<h[1-6]> | 큰 제목, 소 제목을 나타냄 | - 대제목이나 소제목을 적을때 사용 | Block |
<p> | 문단을 나타냄 | - 텍스트를 단락으로 정의 | Block |
<span> | 인라인 요소를 나타냄(아무런 의미를 가지지 않음) | - 한 부분의 텍스트나 한 부분의 문서에 사용 | Inline-Block |
<br /> | 한 줄 내리기 | - 텍스트 사용시 문단을 내리고 싶을 때 사용 | None |
<hr /> | 문단레벨에서 주제의 분리를 나타냄 | - 화면 전환이나 섹션내에 다른 주제로 전환할때 사용 단락들사이에 의미적 구분이 있을 때 사용 | Block |
참고 :
'신나는 언어공부 > HTML' 카테고리의 다른 글
| HTML - Role 한번 사용해보실래유? (0) | 2019.08.07 |
|---|---|
| 모바일에서 헤더 색 변경하는 방법 (0) | 2018.07.31 |
| HTML - 텍스트 마크업 (Text markup) (0) | 2018.07.20 |
| HTML - 리스트, 폼 마크업 (List, Forms markup) (0) | 2018.07.20 |
| HTML - 테이블, 이미지, 이미지 맵 (Table, Image and Image map) (0) | 2018.07.20 |
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
TAG
- array
- 깃헙
- string
- useEffect
- 함수 컴포넌트
- ES6
- Prototype
- this
- website
- 클래스 컴포넌트
- NestJS
- 리엑트
- 가상돔
- Let
- Es5
- class component
- window
- HTML
- 웹사이트
- github
- scope
- Angular
- Function Component
- virtual dom
- JavaScript
- 클래스형 컴포넌트
- const
- useState
- react
- TypeScript
최근에 올라온 글
- Total
- Today
- Yesterday