티스토리 뷰

HTML 01.HTML이란?

Posted by Drawcd on 2017. 5. 24. 16:33 in Web/HTML /

저는 뭔가 새롭게 시작할때 항상 실수 하는것이 있습니다.

빨리 배우고 싶은 조급한 마음에 기초를 놓치고 가는것이죠...

그러다보니 기본 규칙에 어긋나거나 작업도중 돌이킬수 없는 일들이 발생하고는 합니다.

여러분은 그러시지 않기를 바라며, HTML의 가장 기초가 되는 내용으로 시작하겠습니다.

HTML이란?

HTML 이란 Hyper Text Markup Language 의 약자로써 월드와이드웹 문서를 작성하는 Markup Language 입니다. HTML 은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있습니다. 인터넷문서는 Hyper Text 의 원리를 이용하여 여러 문서를 링크시켜 다양한 정보를 손쉽게 검색하여 볼 수 있게 만들어 줍니다. 이러한 다양한 표현의 가능성과 쉬운 사용으로 월드와이드웹을 짧은 시간에 대중시키는데 원동력이 되었습니다.

요약 : HTML(HyperText Markup Languate)의 약자이며, 문서가 서로 연결되어 있는 형식의 문서 작성 언어라고 생각하시면 될것 같습니다.

HTML 요소(Element)

참고 : http://ti.pjg.co.kr/18

HTML을 구성하고 있는 요소들을 알아야 할것 같습니다..

HTML 태그(TAG)

태그(tag)는 <>괄호로 묶여 있는 HTML을 구성하고 있는 기초가되는 명령문이라 보시면 될것 같습니다.

※ 태그는 시작태그를 사용하면 항상 종료태그를 사용하셔야 하는거 절대 잊지마세요. 종료태그는 시작태그와 같지만 꺽쇠괄호다음에 "/"가 붙습니다.

html 상속관계가 있으므로 종료 태그를 사용하지 않을경우 문서에 오류가 발생할 수 있습니다.

예) <tagname> ...... </tagname> 시작태그 ........ 종료태그

<img />

간혹 태그중에는 빈태그라고 종료 태그가 필요 없는 태그가 존재 합니다.

area, command, img, meta, base, embed, input, param, br, hr, link, source, col등이 있습니다.

일반적으로 빈태그를 사용할때 <img src="URL" /> 시작태그와 종료태그가 같이 한줄에 적어도 무방하며 html5 부터는 /작성하지 않는다고 문제가 되지 않습니다.

HTML 기본 구성 및 DTD 선언

HTML문서를 기본으로 구성하는 형식은 아래와 같습니다.

<!DOCTYPE html>

<html>요소는 HTML 페이지의 루트 요소입니다

<head>요소는 문서에 대한 메타 정보를 포함

<title>요소는 문서의 제목을 명시

<body>요소는 눈에 보이는 페이지의 내용을 포함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML은 1.0부터 지금 5.3까지 오기까지 많은 변화가 있었습니다.

DTD선언 버전에 따라 기본 문서 작성법이 다르고 같은 코드내용인데 결과물은 다르게 보이곤 했죠

거기에 브라우저별 호환성이 달랐기 때문에 코딩을 업으로 하는 사람들은 많은 어려움이 있었습니다.

그래서 국제 표준화 단체인 W3C(World Wide Web Consortium)은 웹표준에 신경을 쓰기 시작했으며, html5 부터

DTD선언도 위 예제와 같이 간편하게 변경하게 되었습니다.

그래서 위의 예제 와 같은 기본 구성으로 작성되며, 이정도는 외우시기를 권합니다.

아래는 HTML DTD선언 변천사 참고 사항입니다. 지금은 잘 사용하지 않으니 참고만 하시기 바랍니다.

HTML 4.01

HTML 4.01의 문서 형식은 Strict, Transitional, Frameset으로 나뉘며, 선언도 마찬가지이다. HTML 4.01 Strict는 표현 효과 위주의 마크업 태크들(<b>, <i> 등)을 금지한다.

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

HTML 4.01 Transitional은 HTML 4.01 Strict에서 폐기된 몇 가지 태그를 허용한다.

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

HTML 4.01 Frameset은 프레임 구조를 지원한다.

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

XHTML 1.0

XHTML 1.0도 HTML 4.01과 같이 세 가지 DTD로 구분된다.

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

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

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

XHTML 1.1

XHTML 1.1은 XHTML 모듈화에 따라 정의되었으며, XHTML 1.0 Strict와 동등하게 엄격하다.

 <!DOCTYPE html PUBLIC
     "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5

HTML5은 구조상 DTD로 충분히 정의될 수 없으나 표준 문서를 명시할 필요성이 있으므로 아래와 같은 문서 형식 선언을 갖는다.

 <!DOCTYPE html>

저작자표시 (새창열림)

'Web > HTML' 카테고리의 다른 글

[html] 크롬 input 자동완성 차단 (0)	2017.10.18
HTML 속성(Attributes) 과 변수(Arguments) (0)	2017.05.23
HTML 태그요소 (tag Element) (0)	2017.05.23
mod_rewrite의 .htaccess을 이용한 멀티 도메인 활용예 (0)	2017.05.22

Blog Content