HTML
덤프버전 :
분류
나무위키에서의 HTML에 대한 내용은 나무위키:문법 도움말/심화 문서 참고하십시오.
1. 개요[편집]
웹사이트의 모습을 기술하기 위한 마크업 언어.
프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.
최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.
나무위키에서는 아래와 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말에 의하면 지원 종료 가능성이 있는 비권장 문법이므로 나무위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.
{{{#!html (내용)}}}HTML은 웹 개발에서 매우 중요한 언어다. 파이썬은 웹 개발 분야에서도 사용되기 때문에 HTML을 이해하고 있다면 파이썬 웹 개발에서도 도움이 된다. 파이썬 웹 프레임워크에서 HTML 템플릿을 사용하여 웹 애플리케이션을 구축할 수 있다. 또한, 파이썬의 BeautifulSoup 라이브러리는 HTML과 XML과 같은 마크업 언어를 파싱하는 데에 사용된다. 따라서 HTML을 이해하고 있다면, 파이썬 웹 개발에서 유용하게 사용할 수 있다.
2. 예시[편집]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Hello, world!
</body>
</html>
3. 설명[편집]
HTML은 문법 오류에 관대한 편이다.[1][2] 그래서 닫는 태그를 누락한다든가[3] 태그에 오타가 난다든가 하는 오류가 발생해도 어느 정도는 씹어먹고 작동할 수 있다. 물론 '어느 정도'까지만이다.
<div><h1>Hello World!<!DOCTYPE><html><head><body></h1><!DOCTYPE>그러나 HTML은 서버에서 보내오는 정보대로 페이지를 그려내는 것에는 강하지만 반대로 사용자의 입력에 민감하게 반응하여 페이지를 그리는 것에는 약한 편이다. 또한 동적인 화면 구성이 힘들다는 약점도 있다. 이러한 면을 보완하기 위하여 JavaScript 등의 각종 스크립트의 도움을 받으며, 요즘 유행하는 AJAX도 그런 면을 보완하기에 적합하다. 그 외에 멀티미디어 지원을 위하여 외부 프로그램을 불러올(embedding) 수 있다. 다만 이는 브라우저 의존적인 면이 강하여, 이 브라우저로 잘 표시되는 페이지가 다른 브라우저로는 완전 엉망이 되는 경우도 있다. HTML5는 비디오/오디오 처리를 위한 별도의
<video><audio><svg><canvas><embed><object>4. 태그[편집]
자세한 내용은 HTML/태그 문서를 참고하십시오. HTML을 기술하기 위하여 사용하는 명령어의 집합을 태그(Tag)라고 한다. 태그는 기본적으로 여는 태그와 닫는 태그로 구성되며, 닫는 태그 없이 단독으로 이용하는 태그도 있다. 태그에 주는 다양한 옵션은 모두 여는 태그에 지정하며, 닫는 태그는 태그 효과가 적용되는 범위의 끝을 나타내는 기능만 한다.
그런데 태그 종류가 수십 가지가 넘는 데다, 지정가능한 옵션까지 일일이 열거하면 책 한 권 분량이 된다. 따라서 일반인은 사용빈도가 높은 일부 태그만 암기하고, 나머지는 '태그사전(또는 레퍼런스)'이라고 하는 도움말 파일을 참고하는 편이다. 물론 암기 범위는 고급 사용자 내지는 프로페셔널(흔히 웹 퍼블리셔라고 하는 사람들)로 갈수록 넓어진다.
태그는 HTML의 근간이기 때문에, HTML 기반 채팅 프로그램에서도 사용할 수 있다. 대표적인 예가 cafe24 채팅. 다만 보안상 문제와 수많은 테러 때문에 현재는 대부분의 태그를 막고, 일부 태그만 허용하는 상태. 그림 삽입이나 페이지 링크, 음악 삽입,
<marquee>HTML 4와 XHTML에서의 태그 사용 방식이 약간 다르다. 여는 태그와 닫는 태그가 별도로 존재하지 않는 태그 (
<img>, <br>, <hr><img /><img/><img /><img>웹 퍼블리셔, 웹 디자이너, 웹 프로그래머는 기본 소양이라고 할 수 있다. '태그 사전'의 도움을 받으면, 약간의 교육만으로 누구나 간단한 웹 사이트는 만들 수 있다. 물론 복잡한 사이트는 경험이 필요하기 때문에 입문자는 만들기 힘들다.
사실 HTML 규격에는 HTML이 어떻게 표시돼야 할지에 대해서 큰 틀만 정해져 있고 구체적으로는 설명하지 않고 있다. 예를 들어 테이블의 경우 선을 이용해서 줄과 칸을 구별하는 식으로 정해져 있지만, 선의 모양을 구체적으로 정의하지는 않은 것이다. 애초에 HTML은 화면 구성보다는 의미 표현에 치중하고 있기 때문이다. 결국 한 HTML 파일도 브라우저마다 다르게 보이는 경우가 존재한다. 이로 인해 최근의 추세는 HTML에는 표시하고자 하는 문서의 구조를 중심으로 기술하고, 구체적인 표시 방법은 CSS에서 정의하는 방향으로 나아가고 있다(하지만 이 CSS도 브라우저마다 표시하는 방법이 달라서 골치를 썩이는 경우가 있다. 이것은 전적으로 브라우저 책임. 특히 IE6 같은 옛날 브라우저는 문제가 심각하다). 이 때문에 Acid2 Test와 Acid3 Test[7], HTML5Test[8] 등의 브라우저가 얼마나 표준을 잘 지키는가를 확인하는 테스트도 등장하였다.
5. 버전[편집]
6. HTML 문서 저장 방법[편집]
HTML 문서를 작성한 후 메모장에서 저장할 시, 다른 이름으로 저장을 선택한 뒤, 파일 형식을 '모든 파일 (*.*)'로 지정하고 파일명 끝에 .html이나 .htm을 추가하면 HTML 문서가 된다. 이렇게 하지 않으면 그냥
.html로 바꾸고 난 이후에 수정하고 싶다면, .html 확장자 파일을 오른쪽 클릭 후, 연결 프로그램을 선택하고 Notepad(메모장)을 선택하거나, .html 파일을 메모장에 끌어다 놓기 해주자. 다시 확장자를 .txt로 바꿔도 된다. 참고로 윈도우즈의 메모장으로 HTML 문서를 편집하면, 각 줄마다 CRLF가 달라붙어서 문제가 되기도 한다. 웬만하면 VS Code나 vim, Notepad++ 같은 에디터로 편집하도록 하자. 맥이라면 Xcode를 쓰면 된다.[9][10] 이런 에디터의 경우 HTML이나 서버 사이드 스크립트 코딩에 최적화되어 있기 때문에 구문에 따라 색상 구분도 되는 등 여러 가지 장점이 있다.
HTML 파일 형식의 확장자는 .html이며, '.htm'이라고도 쓸 수 있다. 이는 도스 시절 확장자가 3글자로 제한되었기 때문이다. 윈도우즈 95로 넘어오면서 이 제한이 없어져서 지금은 거의 .html로 쓰는 편이다. 또한 HTML의 인코딩은 현재 거의 UTF-8로 통일되었다.[11] 정말 오래된 사이트는 EUC-KR을 사용한다. 참고로 일본 쪽의 오래된 사이트는 SHIFT-JIS 가 가장 보편적이고 EUC-JP도 간간이 보인다. 두 나라 모두 최신 사이트는 모두 UTF-8 사용.
작성하는 방식은 크게 텍스트 에디터를 이용해 직접 코드를 편집하는 방법과 WYSIWYG 편집기를 사용하는 방법이 있다. WYSIWYG 방식은 드림위버와 나모 웹에디터가 지원하는데 현재는 WYSIWYG 방식은 거의 온라인 에디터로 대체되었으며, 본격적인 웹 개발에는 사용하지 않는다. 구조화된 HTML을 강조하는 HTML5와는 영 심각하게 궁합이 안 맞기 때문이다. 심지어 멀쩡히 손코딩(?)으로 작성한 HTML 문서를 이들 위지윅 에디터에서 열면 자기 맘대로 소스 코드를 조작하고 임의의 메타데이터를 삽입하거나 태그를 추가하는 등의 뻘짓(!)을 해서 코드를 망가뜨려 놓기도 한다. 특히 XHR을 통해 동적인 기능을 수행하는 홈페이지는 이들 위지윅 에디터로 열어보기만 해도 해당 동적인 기능들이 일제히 망가져서 복구 불가능한 피해를 입을 수 있다. 정적인 기능조차 CSS 적용에 문제가 생겨 레이아웃이 뒤틀려버릴 수 있다. 사실 PHP만 사용하려 해도 이들 위지윅 에디터는 전혀 쓸 수가 없고 모든 코드를 텍스트 에디터로 작성해 넣어야 한다. 이 문제 때문에 나모 웹에디터는 망했고, 드림위버는 소스 코드를 직접 입력하는 텍스트 에디터에 더 중점을 두고 JavaScript, PHP 등 웹에서 쓰는 여러 프로그래밍 언어를 지원하는 일종의 웹 IDE로 전환했다.
제로보드 스킨 등을 만들거나 혹은 기타 다른 홈페이지용 게시판을 자신의 홈페이지에 맞게 만들기 위해서 필요한 PHP나 CGI 파일의 이미지 수정을 위해서는 VSCODE 등의 텍스트에디터로 HTML을 구성하는 능력이 필요하다.
참고로, .txt 확장자 파일도 웹 브라우저에서 파일 → 열기를 해서 웹 브라우저 안에 내용을 띄울 수 있다. 하지만 txt 파일의 특성상 태그는 적용되지 않으니 주의.
마지막으로, 이렇게 저장한 .html 파일을 더블클릭해서 실행할 경우 HTML 파일 내부에서 다른 외부 리소스들을 불러오는 데 제약이 가해진다. 사실상 HTML 파일 하나만 로딩되는 수준인데 이는 브라우저의 보안 모델이 로컬 컴퓨터의 리소스(파일)를 읽지 못하게 제약을 걸었기 때문으로, 이 문제를 피하려면 웹 서버를 실행해서 http://localhost 또는 http://127.0.0.1 로 접근해야 한다. 그냥 더블클릭했을 때의 URL은 file:// 로 시작하는 걸로 구분할 수 있다. 간단한 페이지를 만든다면 로컬 웹 서버를 실행하는 것보다는 월 500~1000원 정도의 싼 가격의 웹호스팅이나 무료 웹호스팅[12] 계정을 개설한 뒤에 FTP를 통해 이용하는 방법이 더 간단하므로 이 편을 추천한다. 웹 서버는 설정 과정이 필요한데 초보자들에게는 설정 파일을 직접 편집해야 하는 등 간단하지 않은데, 웹호스팅은 이 설정 과정을 업체에서 해 준다.
7. 트랜스 컴파일러[편집]
2016년 즈음부터는 웹 환경이 나날이 대형화되고 복잡해짐에 따라 웹 사이트의 근간을 이루는 HTML, CSS, JavaScript는 모두 대안 언어나 기술이 존재한다. HTML은 열고 닫는 태그를 일일이 오타 없이 쓰는 게 불편하고 마크업 언어인 탓에 템플릿 지원이 되지 않고 객체 지향적으로 작성이 불가능한 등의 여러 단점이 있다. 그래서 이것을 극복하고자 Pug(구 JADE)라는 컴파일러(트랜스컴파일러)가 만들어졌다. 들여쓰기로 블럭을 구분하고 변수나 템플릿 기능을 추가하고 자주 사용하는
idclass그렇지만 Pug 자체는 컴파일러이고 컴파일 결과가 HTML로 나오는 것이라서 Pug만으론 홈페이지에 동적인 기능을 삽입하기 곤란하다. 어디까지나 정적 HTML 문서를 만들어내는 데 특화된 언어 및 유틸리티이다. jQuery 와 궁합이 잘 맞는 편이다. jQuery를 사용할 때에는
class그리고 Pug는 트랜스컴파일러이지 Virtual DOM의 일종이 아니다. 그래서 최종 결과물인 홈페이지의 렌더링 속도를 가속해주지는 못한다. 엄격하게 구조화된 HTML을 생성하기 때문에 HTML 문서 자체의 파싱 속도는 빠르지만 DOM 조작 속도를 개선하지는 못한다는 소리다.
Pug 홈페이지에서는 서버 사이드 렌더링 언어로 Pug를 소개하고 있는데 정적 컴파일도 가능한 언어이다. 또한 node.js에서 돌아가는 라이브러리인 탓에(컴파일러 겸 라이브러리) express 프레임워크와도 궁합이 좋은 편이다.
8. 외부 링크[편집]
- W3C (영어)
- WHATWG HTML Living Standard (영어)
- W3CSchools (영어): 이 사이트는 W3C와 아무런 관련이 없다.
- MDN Web Docs: 위키 형식이며, HTML뿐만 아니라 CSS나 자바스크립트 등도 학습할 수 있지만 한국어 번역이 되지 않은 경우도 많다.
- Google HTML/CSS Style Guide (영어): 구글에서 권장하고 있는 HTML/CSS 가이드라인이다.
- 생활코딩 HTML 코딩수업 입문용으로 좋으며, 추후 Javascript 수업도 함께 들으면 좋다.
- KOREA HTML5 KISA에서 운영하는 HTML5 사이트. 지식 수준을 막론하고 각종 교육과 정보 등이 있으니 HTML5에 관심 있다면 한번 들어가보자. 후에 차세대웹기술지원센터로 바뀌었다.
- 처음하는HTML 거의 기본적인 지식만 있으며, 입문용으로 간단히 읽어보는 것을 추천한다
- ChatGPT를 활용하여 공부하기 간단한 수준의 html은 ChatGPT가 거의 완벽하게 구현을 해준다. 초반에 html을 공부하는데 많은 참고가 될 수 있다.
9. 둘러보기[편집]
이 문서의 내용 중 전체 또는 일부는 2023-10-27 03:33:23에 나무위키 HTML 문서에서 가져왔습니다.[1] XHTML 제외. XHTML은 XML의 부분집합이라 문법에 엄격하다.[2] 대신 컴파일러가 없으므로 오류를 확인 할 수 없다.[3] 예를 들어
<body><html><head><head><meta charset="UTF-8">