HTML5 까지의 기본 적이 역사(?) 에 대해 나열해 보았습니다.
HTML 등장시기 1991년 에 나왔으며 1993에 공식 발표
HTML 1.0 - 1991년 10월
HTML 2.0 - 1995년 11월
HTML 3.2 - 1997년 1월
HTML 4.0 - 1997년 12월
HTML 4.01 - 1999년 12월
HTML5 - 2008년 1월, 2014년 10월 현재 권고안 (Recommendation) 확정
p 태그로 감싸진 문장이 있다면 문단 (Paragraph)로 인식하게 됨 > 태그가 없는 경우에는 그냥 단순 텍스트로 표시합니다.
태그는 단독 사용형 태그와 시작 - 끝 형의 태그가 있습니다.
1. 단독 사용형 > img , hr , br
2. 시작 - 끝 태그 영역형 html,body,head,title, div, p, h1~h5
<html> </html> 이런식
html 태그 - 이 문서는 HTML 로 마크업 되어 있다 라는 것을 알려주기 위한 태그 해당 태그 안쪽에는 다른 태그들이 들어가 제 역할을 수행하게 됩니다.
head 태그 - html 태그 앞에 붙으며 문서를 웹 브라우저가 읽어들일 떄 우선적으로 처리해야 하는 사항들이 들어가게 된다.
head 태그 안에는 <title>, <meta>,<link>,<script>,<style> 태그가 위치
<title> - HTML 문서를 웹 브라우저에서 열었을 때 웹 브라우저 의 제목 표시줄이나 탭의 제목으로 표시
// 과거에는 웹 사이트의 제목만을 넣어 두는 것이 일반적이였으나
// 웹 접근성 향상을 위해 title 태그 내에 웹 사이트의 제목 뿐만 아니라 페이지의 제목도 넣어주는 것이 최근 추세
// 과거 - 깍돌이 블로그
// 현재 - 깍돌이 블로그 - 블로그 개요
<meta> - HTML 문서에 대한 메타 데이터를 입력하는 태그입니다. 용도는 매우 다양합니다.
// 메타 데이터들을 입력함으로 검색엔진의 봇(bot)이 페이지 크롤링 (Crawling - 긁어 오는 작업)할 때 해당 페이지를 누가 작성하였고
어떤 정보들이 있으며 이 정보들에 대한 검색어 (Keyboard)는 무엇인지 등에 대해 봇에게 알려주는 역할을 합니다.
// http 헤더에 속성 값을 넣어 웹 브라우저에 전달하는 역할도 함
1) 페이지 작성자 : <meta> 태그에 name="author", content="작성자명" 속성을 사용합니다.
예) <meta name="author" content="Crestia">
* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.
2) 페이지 검색어 : <meta> 태그에 name="keywords", content="검색어1, 검색어2, ..." 속성을 사용합니다.
예) <meta name="keywords" content="HTML 튜토리얼, CSS 스니펫, 개발 팁">
* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.
3) 페이지 설명 : <meta> 태그에 name="description", content="간단한 설명" 속성을 사용합니다.
예) <meta name="author" content="Project Crestia의 블로그">
4) 인코딩 정보 : HTML5에서는 <meta> 태그에 charset="인코딩 셋" 속성을 사용하며, HTML 4.x나 XHTML 1.x는
http-equiv="Content-Type", content="text/html;charset=인코딩 셋" 속성을 사용합니다.
예) HTML5 : <meta charset="UTF-8">
HTML 4.x : <meta http-equiv="content-type" content="text/html;charset=UTF-8">
XHTML 1.x : <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
* 주로 사용 되는 한국어 인코딩 셋 : UTF-8 (유니코드), EUC-KR (확장완성형)
* 주의 : 한 HTML 문서 내부에 여러 개의 인코딩이 들어갈 수 없음
5) 렌더링 엔진 지정 : <meta> 태그에 http-equiv="x-ua-compatible" content="IE=버전" 속성을 사용합니다.
예) Internet Explorer : <meta http-equiv="x-ua-compatible" content="IE=edge">
* 버전 속성
* edge : 항상 최신 버전의 렌더링 엔진으로 표시
* 9 : 9.0 렌더링 엔진
* 8 : 8.0 렌더링 엔진
* 7 : 7.0 렌더링 엔진
* 6 : 6.0 렌더링 엔진 (쿼크 모드)
6) 모바일 기기 화면 설정 : <meta> 태그에 name="viewport" content="설정 내용" 속성을 사용합니다.
예) <meta name="viewport" content="width=device-width, initial-scale=1.0">
* 설정 내용 항목
* width : 페이지의 너비. 일반적으로 device-width (기기 화면 너비)로 사용함.
* initial-scale : 페이지를 불러왔을 때 초기 화면의 크기. initial-scale=1.0로 해 놓으면 100%.
* maximum-scale : 최대 화면 크기. maximum-scale=1로 해놓으면 100%가 최대값.
* user-scalable : 사용자 줌 가능 여부 설정. user-scalable=no로 설정하면 페이지 줌 불가능
* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.
7) 페이지 새로 고침 간격 지정 : <meta> 태그에 http-equiv="Content-Type" content="초" 속성을 사용합니다.
예) <meta http-equiv="refresh" content="20">
body 택 - head 태그 뒤 쪽으로 <body> 태그가 나옵니다. 해당 태그에는 문서의 본문 내용들이 들어가게 됩니다.
<img> <br> <hr>같은 단독 태그가 아닌 경우 />로 막아야 합니다.
'Web(Front-End) > CSS3 & HTML5' 카테고리의 다른 글
| [CSS3] flex Box - justify-content, align-items (0) | 2018.08.16 |
|---|---|
| [CSS3] flex Box - flex-wrap (줄 넘기기 ) && flex-flow (방향 + 줄 넘기기) (0) | 2018.07.24 |
| [CSS3] flex Box - flex-direction (생성 방향) (0) | 2018.07.23 |
| [CSS3] flex Box Model (0) | 2018.07.02 |
| [CSS] display - inline,block,inline-block (0) | 2018.06.21 |