본문 바로가기
프로그래밍 놀이터/Web

[기초강좌] HTML 소개 - w3schools 번역

by 돼지왕 왕돼지 2014. 2. 16.
반응형


 [기초강좌] HTML 소개 - w3schools 번역

 


[기초강좌] HTML 소개 - w3schools 번역


w3school 의 강좌 내용을 번역한 글입니다.


원본 : http://www.w3schools.com/html/html_intro.asp


예제 설명


<!DOCTYPE html>

<html>

<body>


<h1>My First Heading</h1>


<p>My first paragraph.</p>


</body>

</html>


* DOCTYPE 은 문서의 type 을 정의한다.

* <html> 과  </html> 사이에 있는 내용들이 웹 페이지를 구성하는 내용이다. ( 보여지는 것도, 안 보여지는 것도 있다. )

* <body> 와 </body> 사에이 있는 내용들은 브라우저에 보여지는 내용이다.

* <h1> 와 </h1> 사이의 내용은 헤더( 역자주 : 일종의 제목 )로 표시된다.

* <p> 와 </p> 사이의 내용은 문단을 구성한다.


cf) <!DOCTYPE html> 은 HTML5 임을 정의하는 




HTML 이란 무엇인가?


HTML 은 웹 페이지를 묘사하는 언어이다.


* HTML 은 Hyper Text Markup Language 의 약자이다.

* HTML 은 markup 언어이다. ( 역자주 : markup 이란 "정형화"로 표현할 수 있겠다. )

* markup 언어는 정형화된 tag 들의 집합이다.

* tag 는 문서의 내용을 묘사한다.

* HTML 문서는 tag 와 text 들로 구성되어 있다.

* HTML 문서는 web page 라고도 불린다.




HTML Tags


HTML markup tag 는 보통 HTML tag 라고 불린다.


* HTML tag 는 각진 괄호 (원문: angle brackets) 로 둘러싸여진 키워드 ( tag 이름 ) 으로 구성된다. <html> 과 같이 말이다.

* HTML tag 는 보통 <b> </b> 와 같이 쌍으로 존재한다.

* tag 쌍에서 먼저 오는 녀석이 시작 태그( 원문 : start tag ), 나중에 오는 녀석을 종료 태그 ( 원문 : end tag ) 라고 부른다.

* 종료 태그는 시작 태그와 거의 같지만, tag 이름 전에 / ( 슬래쉬 ) 를 붙여준다.

* 시작 태그와 종료태그는 각각 여는 태그 ( 원문 : opening tag ), 닫는 태그 ( 원문 : closing tag ) 라고도 부른다.


<tagname> context </tagname>







HTML Elements


"HTML tags" 와 "HTML elements" 는 보통 같은 것으로 묘사된다.

하지만 엄밀히 이야기하자면, HTML element 는 start tag 와 end tag 와 그 사이의 내용을 전부 이야기한다.


아래 전체는 HTML Element 이다.

<p>This is a paragraph </p>




Web Browser


웹 브라우저 ( Google Chrome, Internet Explorer, Firefox, Safari ) 의 목적은 HTML 문서를 읽어서 web page 로 표시하는 것이다.


브라우저는 HTML tag 들을 표시하는 않는다. 브라우저는 tag들을 이용하여 사용자에게 웹 페이지를 어떻게 표시할 것인지를 결정한다.


 [기초강좌] HTML 소개 - w3schools 번역




HTML Page Structure


아래는 HTML page 구조를 시각화한 것이다.


 [기초강좌] HTML 소개 - w3schools 번역




HTML Versions


이전부터 HTML 은 여러 버전이 있어왔다.


HTML : 1991

HTML+ : 1993

HTML 2.0 : 1995

HTML 3.2 : 1997

HTML 4.01 : 1999

XHTML : 2000

HTML5 : 2012







The <!DOCTYPE> Declaration


<!DOCTYPE> 정의는 브라우저가 웬 페이지를 올바르게 표시하는 것을 도와준다.


웹에는 많은 종류의 문서 타입이 있고, 브라우저는 HTML type 과 version 을 제대로 알아야 100% 완벽한 웹 페이지 표시를 할 수 있다.




Common Declaration


HTML5

<!DOCTYPE html>


HTML 4.01

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


XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


문서 타입 전체를 보고 싶다면 다음 링크를 클릭하자.


DOCTYPE Reference.



다음 강좌 보기 >>





반응형

댓글