하이퍼텍스트 마크업 언어
{{{#!HTML
<span style="color: #557799"><!DOCTYPE HTML></span>
<span style="color: #007700"><html></span>
<span style="color: #007700"><head></span>
<span style="color: #007700"><title></span>Hello World<span style="color: #007700"></title></span>
<span style="color: #007700"></head></span>
<span style="color: #007700"><body></span>
Hello World
<span style="color: #007700"></body></span>
<span style="color: #007700"></html></span>
}}}
* 상위 항목 : 동음이의어·다의어/알파벳
[목차]
마크업 언어
* 인터넷 관련 정보
|| https://i.imgur.com/sW1DlS8.png?width=300 || || 서브라임 텍스트 3에서 HTML으로 작성한 Hello, world![* 맨 위의 DOCTYPE은 HTML5 기준이다. XHTML 1.0이나 HTML 4.01은 좀더 복잡하다.]||
개요
|| https://i.imgur.com/q48nDmx.jpg?width=300 || || 마셜제도에서 팀 버너스리 경을 기리며 발행된 특별우표. || HyperText Markup Language의 약자. 웹 페이지의 모습을 기술하기 위한 규약. 프로그래밍 언어가 아니라 마크업 언어[* 마크업 정보를 표현하는 언어로 문서의 내용 이외의 문서의 구조나 서식같은 것을 포함한다. ]다. 헷갈리지 않도록 하자. 웹사이트에서 흔히 볼 수 있는 htm 이나 html 확장자가 바로 이 언어로 작성된 문서이다.
최초 제안자는 당시 CERN에서 --계약직으로 착취당하던 공돌이-- 연구중이던 물리학자 티머시 J. 버너스리 경(Timothy John Berners-Lee OM, KBE, 1955년 6월 8일 ~ ) [* 현재 멀쩡히 살아있는 할아버지. 서울 코엑스에서 열린 2014 WWW 에도 참석했다. 기사 작위도 갖고 있다. 이름 뒤에 붙은 것은 OM(Order of Merit. 메리트 훈장), KBE(Knight Commander of Order of the British Empire) 물론 명예직…] 지금 이 항목을 보고 있는 독자가 이렇게 편하게 인터넷으로 위키를 하고 있게 된 것도 다 이 양반이 대인배스럽게 HTML에 대한 특허를 내지 않았기 때문이다. URL, HTTP, WWW의 전신인 Enquire 등도 이 양반이 세트로 개발하고 제안했다. T*****/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불리운다. --어? 엄마는?-- --아버지만 둘--
특징 및 설명
HTML의 대표적인 약점으로는 서버에서 보내오는 정보대로 페이지를 그려내는 것에는 강하지만 반대로 사용자의 입력에 민감하게 반응하여 페이지를 그리는 것에는 약하다는 것이다. 또한 동적인 화면구성이 힘든 약점도 있다. 이러한 면을 보완하기 위하여 자바스크립트 등의 각종 스크립트의 도움을 받으며, 요즘 유행하는 AJAX도 그런 면을 보완하기에 적합하다. 그 외에 멀티미디어 지원을 위하여 외부 프로그램을 불러올(embedding) 수 있다. 다만 이는 브라우저 의존적인 면이 강하여, 이 브라우저로 잘 표시되는 페이지가 다른 브라우저로는 완전 엉망이 되는 경우도 많다.
HTML을 기술하기 위하여 사용하는 명령어의 집합을 태그(Tag)라고 한다. 태그는 기본적으로 여는 태그와 닫는 태그로 구성되며, 닫는 태그 없이 단독으로 이용하는 태그도 있다. 태그에 주는 다양한 옵션은 모두 여는 태그에 지정하며, 닫는 태그는 태그 효과가 적용되는 범위의 끝을 나타내는 기능만 한다.
그런데 태그 종류가 수십 가지가 넘는데다, 지정가능한 옵션까지 일일이 열거하면 책 한 권 분량이 된다. 따라서 일반인은 사용빈도가 높은 일부 태그만 암기하고, 나머지는 '태그사전(또는 레퍼런스)'이라고 하는 도움말 파일을 참고하는 편이다. 물론 암기 범위는 고급 사용자 내지는 프로페셔널(흔히 웹 디자이너라고 하는 사람들)로 갈수록 넓어진다.
태그는 HTML의 근간이기 때문에, HTML 기반 채팅 프로그램에서도 사용할 수 있다. 대표적인 예가 cafe24 채팅. 다만 보안상 문제와 수많은 테러 때문에 현재는 대부분의 태그를 막고, 일부 태그만 허용하는 상태. 그림 삽입이나 페이지 링크, 음악 삽입, marquee 정도가 허용된다. 대부분의 PHP 기반 웹 게시판에서도 원칙적으로 글 제목과 내용에 태그를 적용시킬 수 있다. 다만 채팅과 같은 이유로 그 사용을 제한하는 경우가 많다. 특히 제목부분에는 어떤 태그도 허용하지 않는 것이 일반적.
HTML 4와 XHTML에서의 태그 사용 방식이 약간 다르다. 여는 태그와 닫는 태그가 별도로 존재하지 않는 태그 ({{{<img>,
,
}}} 등)의 경우 XHTML에서는 XML의 표준 표현법에 따라 {{{<img />}}} 등으로 닫는 부등호 앞에 /를 달아준다. 덧붙여 {{{<img/>}}}보다 {{{<img />}}}(/ 앞에 공백이 있음)을 쓰는 것이 오래된 브라우저와의 호환성을 보장하는 방법이다. HTML 5에서는 HTML 4의 방식으로 다시 돌아갔다.
많이 사용하는 태그
||{{{#red 주의}}}||나무위키에선 그냥 쓰면 안 먹히니 나무위키:편집 도움말에서 상세한 정보를 얻으세요.||
[목록]
HTML은 웹브라우저마다 지원하는 태그가 조금씩 다르며, 같은 태그라도 작동하는 방법이 다르다. 하지만 대체로 비슷한 태그를 지원한다.
* 여러 웹 사이트에서 주로 사용하는 태그
* {{{<img>}}}: 이미지 삽입 태그. XHTML태그는 {{{<img />}}}이다.
* {{{<embed>}}}: 외부 프로그램을 임베드하여 다양한 효과를 준다. HTML 4.01에서 삭제되고 {{{<object>}}}로 대체되었으나 HTML 5 규격에서 다시 표준으로 들어갔다.
* {{{<script>}}}: 자바스크립트나 VB스크립트 사용.
* {{{<a>}}}: 앵커 태그. 흔히 우리가 아는 하이퍼링크이다.
* {{{}}}: bold. 두껍게 효과를 준다. 그러나 HTML 4.01부터 비권장 태그로 들어갔는데, 이 이유는 이 태그가 비주얼적인 효과를 주기 위한 태그라 비권장으로 지정된 것. 강조의 의미를 줄 때는 {{{}}} 태그로 대체하고 그 이외에는 CSS의 {{{font-weight: bold;}}} 속성으로 쓸 것을 권장하고 있다.[* 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.] 하지만 HTML5에서 {{{}}}보다 약한 의미의 강조로 다시 복귀했다.
* {{{
}}}: 새 문단을 연다. {{{
}}}로 닫는다. 극초창기에는 닫는 태그가 없고 단순히 문단을 구분하는 역할만 했는데 HTML 2.0에서 닫는 태그가 추가되어 문단을 묶어주는 역할을 하게 되었다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에 {{{
}}}을 선호하는 경우가 많은데, 문단이라면 {{{
}}} 태그로 묶어주는 것이 올바른 사용법이다. 빈 공간은 CSS를 지정해서 없앨 수 있다.
* {{{
}}}: 문단 내 줄바꿈. 강제개행을 하는 태그이다. XHTML태그는 {{{
}}}이다. 문단의 흐름을 해치기 때문에 권장되는 태그는 아니다.
* {{{
}}}: 테이블. 홈페이지 디자인에 가장 중요한(div 참고) 태그 중 하나였다. 그렇다고 테이블을 아예 쓰지 않는게 아니라, 원래 목적대로 표를 나타내는 것으로만 쓰도록 권장하는 것이다. * {{{ * {{{}}}, {{{}}}, {{{}}}: 글꼴 특성에 관여하는 태그로, HTML4.01 비권장 태그였으나, HTML5에서 다시 부활했다. 대신 용도가 세분화되었기 때문에, 그냥 모양새만 내는 용도라면 CSS를 이용하자.
* 많이 사용하였지만, HTML5에서 제거된 태그. 앞으로의 홈페이지 제작에서는 사용하지 않는 것을 추천한다.
* {{{}}}: 글꼴 특성을 지정한다. 글꼴 이름이나 크기나 기타 등등. HTML 4.01 비권장 태그이므로 {{{…}}}을 사용하자. 아예 HTML5 규격에서는 없어졌다. CSS를 쓰면 글꼴뿐만 아니라 조작할 수 있는 모양이 압도적으로 많으니 그걸 쓰자.
* {{{}}}: 글꼴 크기를 상대적으로 크게 한다. HTML5에서 없어졌으니 크기를 숫자로 표현 할 수 있는 CSS를 쓰길 권장한다.
* {{{}}}: 텔레타이프 글꼴로 한다. HTML5에서 사용이 불가하니 더 다양한 글꼴을 표현할 수 있는 CSS를 쓰자.
웹 디자이너, 웹 프로그래머는 기본 소양이라고 할 수 있다. 위에서도 잠시 언급한 '태그사전'의 도움을 받으면, 약간의 교육만으로 누구나 간단한 웹 사이트는 만들 수 있다. 물론 복잡한 사이트는 경험이 필요하기 때문에 입문자는 만들기 힘들다.
사실 HTML 규격에는 HTML이 어떻게 표시돼야 할지에 대해서 큰 틀만 정해져 있고 구체적으로는 설명하지 않고 있다. 예를 들어 테이블의 경우 선을 이용해서 줄과 칸을 구별하는 식으로 정해져 있지만, 선의 모양을 구체적으로 정의하지는 않은 것이다. 애초에 HTML은 화면 구성보다는 의미 표현에 치중하고 있기 때문이다. 결국 한 HTML 파일도 브라우저마다 다르게 보이는 경우가 존재한다.
이로 인해 최근의 추세는 HTML에는 표시하고자 하는 문서의 구조를 중심으로 기술하고, 구체적인 표시 방법은 CSS에서 정의하는 방향으로 나아가고 있다(하지만 이 CSS도 브라우저마다 표시하는 방법이 달라서 골치를 썩이는 경우가 있다. 이것은 전적으로 브라우저 책임. 특히 IE6같은 옛날 브라우저는 문제가 심각하다). 이 때문에 [Test]와 [Test][* 2011년 12월 현재는 상황이 매우 좋아져서 IE9를 포함한 대다수의 브라우저들이 Acid3 테스트를 99%에 가깝게 통과한다!] 등의 브라우저가 얼마나 표준을 잘 지키는가를 확인하는 테스트도 등장하였다.
버전
HTML 1.0
최초의 HTML. 1991년 나왔다. 팀 버너스 리가 월드 와이드 웹을 발표하면서 내놓은 버전이다. 처음에는 버전이 붙지 않았으나 나중에 보강된 2.0 버전이 나오면서 붙은 이름.
80년대에 존재하던 SGML이라는 마크업 언어를 참조하여 만들어졌다.
HTML 2.0
1995년 11월 24일, HTML 사상 최초로 표준으로 지정되었다. HTML 1.0에서 파일 업로드 양식과 프레임, 테이블, 이미지맵, 국제화 기능이 추가된 것으로, 팀 버너스 리와 여러 다른 사람의 노력으로 표준화되었다. 인터넷의 대중화가 시작되면서 이때부터 HTML도 널리 알려지기 시작했다.
하지만 동시에 HTML의 문제점 역시 두드러졌던 시기이다. 95년대 브라우저 전쟁시기 웹페이지 관리자는 IE를 위한 페이지와 넷스케이프를 위한 페이지를 따로 만들어야 했었다. 그러하여 그것을 보완하기 위해 W3C에서 보완한 것이 HTML 3.2.
HTML 3.2
1997년 1월 표준으로 지정된 HTML 버전. 표준화 작업을 담당하는 W3C에서 처음으로 나왔다. 수학 수식을 사용하는 태그를 완전히 제외하고, 넷스케이프의 비주얼 관련 태그를 수록했다. {{{}}}나 {{{}}} 태그가 들어간 것이 이 버전.
HTML 4.0
1997년 12월 표준으로 지정된 HTML 버전. Strict, Transitional, Frameset의 세 가지 문서 형태를 지원하는 것이 가장 큰 변화이다. Strict는 비표준이나 비권장 태그를 절대 허용하지 않는 엄격한 문서이고, Transitional은 비표준이나 비권장 태그도 허용하는 융통성 있는 문서, Frameset은 웹브라우저 화면을 나눈 프레임 문서에 쓰는 것이다.
HTML 4.01
1999년 12월 표준으로 지정된 버전으로. 2014년 10월 28일 HTML5의 최종 권고안이 확정되면서 구버전이 되었다. 비주얼 태그가 모두 비권장으로 지정된 것이 가장 큰 변화이다. 기존 비주얼 태그는 CSS로 빼서 사용할 것을 권장하고 있다.
XHTML 1.0
2000년 1월 26일 표준으로 지정된, HTML 4.01과 함께 가장 많이 사용되는 표준이다. 내용상의 변화는 거의 없고, HTML 4.01을 XML 형식으로 포팅한 버전. 따라서 HTML 4.01의 내용을 거의 그대로 가지고 있다. 이 때문에 2013년 지금까지도 HTML 4.01과 함께 가장 많이 사용되고 있다.
XHTML 1.1
2001년 5월 31일 표준으로 지정된 XHTML의 가장 최신 버전이지만, 거의 사용되지 않는 실정이다. XHTML 1.0까지 있었던 Transitional 형식이 빠지면서 비표준이나 비권장 태그와의 호환성이 사라져 버렸다. 이 때문에 지나치게 엄격하다는 지적과 함께 사용되지 않게 되었다. 이어 2014년 10월 28일 HTML5의 최종 권고안이 확정되면서 구버전이 된 상태.
XHTML 2.0
2009년 말에 논의가 중단된 XHTML의 버전이다. 원래 XHTML 1.1을 잇는 차기버전으로 이야기가 되고 있었지만 2008년 HTML 5로 방향을 선회하면서 중단되었다.
HTML5
2014년 10월 28일에 확정된 HTML의 최신 버전이다. 항목 참고.
HTML 문서 저장 방법
HTML 문서를 작성한 후 메모장에서 저장할 시, 다른 이름으로 저장 선택후, 파일명 뒤에 .html(htm)을 적는것이다. 이렇게 하지 않으면 저장 방법도 없을 뿐더러, 그냥 메모장이 열린다.
.html로 바꾸고 난 이후에 수정하고 싶다면, .html 확장자 파일을 오른쪽 클릭후, 연결 프로그램을 선택하고 Notepad(메모장)을 선택하거나, .html 파일을 메모장에 끌어다 놓기 해주자. 다시 확장자를 .txt로 바꿔도 된다. 참고로 윈도우즈의 메모장으로 HTML 문서를 편집하면, 각 줄마다 CRLF가 달라붙어서 문제가 되기도 한다. 웬만하면 Editplus나 vim, Notepad++같은 에디터로 편집하도록 하자. 맥이라면 Xcode를 쓰면 된다. [* HTML 문서의 경우 웹 브라우저가 해석하니 별 문제가 없긴 하지만 CGI프로그램의 경우 LF(Line Feed)가 아닌 CRLF(Carriage return & Line Feed)가 붙으면 인터프리터의 주소를 찾지 못하는 문제가 생긴다. CGI 프로그램이 돌아가는 환경이 유닉스나 리눅스가 대부분이기 때문이다. 윈도우 환경에서 돌아가는 CGI라면 해당없다.][* FTP를 이용해서 올릴 때 ASCII 모드로 올리면 저장될 때 자동으로 서버의 OS 환경으로 맞춰준다.] 이런 에디터의 경우 HTML이나 서버 사이드 스크립트 코딩에 최적화되어 있기 때문에 구문에 따라 색상구분도 되는 등 여러가지 장점이 있다.
HTML 파일 형식의 확장자는 .html이며, '.htm'이라고도 쓸 수 있다. 이는 도스 시절 확장자가 3글자로 제한되었기 때문이다. 윈도우즈 95로 넘어오면서 이 제한이 없어져서 지금은 거의 html로 쓰는 편이다. 서버스크립트를 쓰는 경우 .php, .asp, .aspx, .jsp를 쓸 수도 있다.
한 때 메모장을 이용하여 직접 HTML 파일을 작성하는 것이 유행하기도 하였다. 또한 메모장에 준하는 HTML 편집기(대표적인 예로 에디트플러스가 있다)로 만들기도 했다. 그러나 멋지고 화려한 페이지를 만들려면 상당한 노하우와 경험이 필요하기 때문에 대부분이 포기. 게다가 나모 웹에디터를 비롯한 WYSIWYG 방식의 편집기가 등장하면서 이러한 귀찮은 방식의(...) 유행은 금세 사그라들었다.
WYSIWYG 방식은 마치 워드프로세서를 다루는 것처럼 매우 편리하기 때문에 메모장 혹은 메모장에 준하는 프로그램으로 직접 작성하는 것보다 훨씬 편하고 직관적이다. 굳이 단점을 들자면 소스가 제대로 최적화가 안 돼서(옛버전 나모의 경우가 특히 심했다) 난잡해지는 경우가 있다. 하지만 난잡해져봐야 1KB짜리가 3~4KB가 되는 정도라서(...) 계정에 크게 무리가 없다.
…그러나 최근에는 개인 홈페이지가 사라지고 개인 블로그로 대체되는 추세라 나모 웹에디터 등의 HTML 편집기들도 보기 힘들어졌다. '직접 홈페이지를 만든다'라는 컨셉이 마음에 들어 워드프레스를 이용하는 사람도 있지만..
제로보드 스킨등을 만들거나 혹은 기타 다른 홈페이지용 게시판을 자신의 홈페이지에 맞게 만들기 위해서 필요한 PHP나 CGI파일의 이미지 수정을 위해서는 어느 정도 메모장으로 HTML을 구성하는 능력이 필요하다.
참고로, txt확장자 파일도 웹 브라우저의 파일 -> 열기 해서 웹 브라우저 안에 내용을 띄울수 있다. 하지만 태그는 실행되지 않으니 주의.
바깥 고리
* [사이트 (영어)] * [표준 (영어)] [한국어 번역)] * [학습 사이트 (영어)][* 주의 : 이 사이트는 W3C와 아무런 관련이 없다. [참고.] ] * [HTML5] KISA(한국인터넷진흥원)에서 운영하는 HTML5 사이트이다. 지식 수준을 막론하고 각종 교육과 정보 등이 있으니 HTML5에 관심있는 사람은 한번 들어가보자.
가방 브랜드
[[1]] 이 부분은 위 항목의 내용과 직접적인 관련이 없습니다.
주식회사 제이비패션이 판매하고 있는 가방 브랜드로 Have True Mind for Look의 약자이다. ~~위 항목의 HTML을 아는 사람이라면 분명 이 로고 보고 의아해했을 것이다.~~
