Martin`s Work

[HTML] 기본 개념 본문

카테고리 없음

[HTML] 기본 개념

Martin`s Work 2017. 4. 20. 16:22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
    <head>
    <title>기본구조를 공부해보는 시간이다</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" type="text/css" href="../css/common.css" media="all" />
    </head>
    <body>
        <p>이렇게 되겠쥬?</p>
    </body>
</html>
cs


갖고 있던 문서 맨 첫줄만 쫘 긁어와봤는데

이제 하나하나 무슨 뜻인지 봐보쟈


1
<!DOCTYPE html>
cs

DTD선언(Document Type Definition) _html5, xhtml, html의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성 등을 처리하는 기준이 되며 유효성 검사에 이용된다

**문서형 정의를 생략하면 웹 브라우저가 표준모드가 아니고 비표준모드(Quirks mode)로 랜더링되어 크로스 브라우징에 어려움이 있음/정의는 무조건 문서 최상위

**비표준모드로 동작하는 경우는 DTD선언을 하지 않았거나, 잘못 선언한 경우/HTML4.01 문서에서 시스템 식발자를 지정하지 않은 경우

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
cs


HTML 버젼

  • HTML 1.0 _팀 버나스리가 발표한 최초의 HTML

  • HTML 2.0 _국제 표준으로 제정된 최초의 HTML

  • HTML 3.2 _W3C에 의해 제정된 최초의 HTML

  • HTML 4.01 _<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • XHTML 1.0_<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml-strict.dtd">

  • HTML 5 _<!DOCTYPE html>


HTML2-4는 SGML(앞에서 내가 설명햇지?)에 기반을 두고 만들어졌기 때문에 DTD 참조가 필요함 (DOCTYPE을 선언하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열로 작성해야댐)

  • 공개식별자  -//W3C//DTD XHTML 1.0 Strict//EN
  • 시스템식별자  http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

**식별자 _변수나 함수를 지정할 때 이름이 될 수 있는 단어


DTD의 특징에 따른 구분

  • Transitional _호환모드
  • Strict _엄격
  • Frameset _프레임구성 페이지에서 사용
  • Mobile _모바일페이지에서 사용(xhtml에만 존재)


 **공개식별자는 w3c 등 표준화 단체가 정의하는 문서형 정의를 참조하기 위한 식별자라 내가 임의로 바꿀수 없음

 **html에는 시스템 식별자를 생략해도 되지만 xhtml에서는 안된다고 함

너무 어렵다 알아서 공부하자 더는 너무 깊은듯...ㅋㅋㅋㅋ 다음으로 넘어가쟈


html에 언어설정

1
<html lang="ko">
cs


HTML 4.01의 경우

1
2
3
4
5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8 " />
cs


XHTML 1.0 Transitional 의 경우

1
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8 " />
cs


XHTML 1.0 Strict 의 경우

1
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8 " />
cs


HTML 5 의 경우

1
2
3
4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
cs


Title을 쓸 때

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="ko">
    <head>
    <title>모찌의 하루 – 모찌가 돌아왔다! | 티스토리</title>
    <meta charset="UTF-8" />
    </head>
    <body>
    </body>
</html>
cs

컨텐츠 제목 (공백) – (공백) 하위섹션명 (공백) | (공백) 서비스명


인코딩

HTML 4.01

1
2
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
cs

HTML 5

1
2
<meta charset="UTF-8">
<meta charset="euc-kr">
cs

한국어 인코딩은 euc-kr 하나밖에 없다고함 반면에 UTF-8은 전세계 모든 문자들을 한꺼번에 인코딩하는거임

euc-kr은 영어 이외의 외국을 표현하는데 좀 어려움이 있다함

그러면 여기 안에 들어있는 http-equiv 이게뭘까?

서버가 클라이언트로 부터 온 http request를 접수한 다음 http response를 다시 웹 브라우저로 보내는데 http response의 헤더를 각 문서 별로 따로 설정할 수 있는 것


meta 요소에서 정의된 명령을 먼저 실행한 후에 페이지를 로딩한다 (pragma directive 라고함)

  • content-language _전 처리될 기본 언어를 지정할 수 있음. 선언하지 않는 경우 기본언어가 존재하지 않는 걸로 간주됨

  • content-type _문자 인코딩 선언. content 속성의 문자열 "text/html"와 아스키, 대문자 구별없이 일치해야됨 그 뒤에 literal 문자열 charset이 와야하고 문자 인코딩에 해당되는 이름이 있어야함.

  • default-style _대체 스타일시트 집합의 이름을 설정

  • refresh _페이지를 지정한 시간 이후에 새로고침을 할 수 있습니다.

  • set-cookie _http 쿠키를 설정


호환성 보기

1
<meta http-equiv="X-UA-Compatible" content="IE=edge">
cs


  • IE=5 _quirks mode(관용모드)로 지정된 독타입에 상관없이 IE5으로 랜더링

  • IE=7 _IE7표준모드로 지정된 독타입에 상관없이 IE7으로 랜더링

  • IE=EmulateIE7 _IE7에뮬레이션 모드로 지정된 독타입에 따라 IE7 표준/관용 모드로 랜더링

  • IE=8 _IE8 표준모드로 지정된 독타입에 상관없이 IE8 표준모드로 랜더링

  • IE=EmulateIE8 _IE8 에뮬레이션 모드로 지정된 독타입에 따라 IE8 표준/관용 모드로 랜더링

  • IE=edge _최신모드로 지정된 독타입에 상관없이 IE8 이상 버젼에서 항상 최신 표준 모드로 랜더링



검색 엔진에 등록할 때

1
2
<meta name="description" content=""/>
<meta name="keywords" content=""/>
cs


1
2
3
4
5
6
7
8
<!--이 문서도 긁어가고 링크된 문서도 긁어감-->
<meta name="robots" content="index,follow" /> 
<!--이 문서는 긁어가지 말고 링크된 문서만 긁어감-->
<meta name="robots" content="noindex,follow" /> 
<!--이 문서는 긁어가되, 링크는 무시함-->
<meta name="robots" content="index,nofollow" /> 
<!--이 문서도 긁지 않고, 링크도 무시함-->
<meta name="robots" content="noindex,nofollow" /> 
cs



최종적으로 보면 전체 구조는

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <p>모찌의 하루</p>
    <p>모찌의 이틀</p>
  </body>
</html>
cs

이러하다



출처: http://archiveberry.tistory.com/category/Framer [Archive Berry]

공유하기 링크
Comments