HyperText Markup Language
|
HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 css 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 w3c는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다. 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다. 버너스리의 개인적인 기록 에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. 그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소의 13개는 HTML 4 버전에서도 여전히 존재한다.
What is HTML?
HTML은 웹 페이지를 기술하기위한 언어이다.
- HTML stands for Hyper Text Markup Language://developer.mozilla.org/ko/docs/Web/HTML/Element) .
- HTML is not a programming language, it is a markup language(HTML%3ASymbols.md) or HTML Special Characters .
- A markup language is a set of markup tagsers](HTML_Special_Characters.md) .
- The purpose of the tags are to describe page contents element](Canvas_element.md), WebCanvas; Web Canvas; web canvas).
Category
- HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
- HTML:Libraries
- HTML:Symbols or HTML Special Characters
- HTML:canvas (Canvas element, WebCanvas; Web Canvas; web canvas) markdown="1">
- Imagemaps - HTML 이미지 맵을 쉽게 만들수 있는 웹 편집기
- HTML:iframe
- HTML:Drag - HTML Drag and Drop
- HTML:VirtualScroll
- HTML:History
- HTML:Examples
- 웹 표준 (Web standards)
- 웹 접근성 (Web accessibility)
- WAI-ARIA
- Server-Sent Events
- Web Component
- Cross-window communication - iframe 간의 통신 방법에 대한 설명.
- WebSocket
- Semantic HTML
- htmx
Layout
ETC
HTML Tutorials
| Basic | Advanced | Media | XHTML | References | HTML5 |
|
|
|
|
|
|
Sample
meta 태그를 이용할 redirect 처리방법:
Submit 사용방법:
<form method="post" action="/">
<input type="test" name="field1">
<input type="test" name="field2">
<input type="submit">
</form>
모바일 화면 너비 정의:
Coding
- 태그(Tag)는 대소문자를 가지리 않지만 가능한 소문자로 사용한다. (HTML4는 소문자를 권장하며, XHTML은li markdown="1"> 소문자를 요구한다.)
HTML5
HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다. 2004년 6월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다. 2012년 4월 현재에도 개발 중이다. HTML5는 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차기 표준 제안이다. 최신 멀티미디어 콘텐츠를 브라우저에서 쉽고 용이하게 볼 수 있게하는 것을 목적으로 한다.
문서 선언은 으로 간소화 되었다. (대소문자 구별 안함) 기본 문서 구조는 아래와 같다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="icon" type="image/png" href="webrtc.png" /> -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<title>Index</title>
</head>
<body>
<div class="container">
<p>Example paragraph</p>
</div>
</body>
</html>
Layout
Clear fix
- [추천] 2단, 3단 스킨을 만들어 보자ox: The character encoding of the HTML document was not declared](https://github.com/webpack/webpack-dev-server/issues/1) 1
div에 float속성을 적용하면 외곽선을 벗어나는 현상이 발견될 수 있다. 이 경우 부모 레이어(감싸주는 레이어)의 class를 아래의 clearfix로 지정해 준다.
/* full clearfix */
/* add to floating elements which shall clear floating after themselves */
* html .clearfix{
height: 1%; /* IE5-6 */
}
*+html .clearfix{
display: inline-block; /* IE7not8 */
}
.clearfix:after{ /* FF, IE8, O, S, etc. */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Vertical align
자세한 내용은 Cascading Style Sheets#세로 정렬 방법 (Vertical Align) 항목 참조.
Troubleshooting
HTML encoding
Firefox 콘솔에서 아래와 같이 출력될 수 있다.
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.
이 경우 아래 코드를 head안에 추가해야 한다.
앱 배포 후 브라우저 캐시를 클리어하지 않으면 최신버전으로 갱신되지 않는 현상
Cache Busting 항목 참조.
See also
- CSS
- JavaScript
- Internet
- World Wide Web (www)
- DOM
- Gomponents - 순수 Go로 작성된 HTML 컴포넌트
Favorite site
- W3C website
- W3C 대한민국 사무국
- Wikipedia (en) HTML에 대한 설명
- Wikipedia (en) HTML5에 대한 설명
- w3schools HTML에 대한 설명
- This wiki is for connecting the W3C communities
- This presentation is an HTML5 website 2
Guide
- w3schools website 5
- Youtube: html5 tutorial notepad++
- HTML 5: Is it
or
? - 3.1.1 HTML 코드에 주언어 관련 속성(lang)이 선언되어 있는가?
- HTML URL Encoding Reference
- [추천] 실전 HTML5 가이드) - HTML/CSS로 만들어진 무료 UI 엘리멘트들
- SQLER.com HTML5 강좌 78
- HTML 4.01 DTD 읽는방법 9
- [추천] Learn about the DOM Event system through exploration - DOM 이벤트 전파 순서를 그래픽으로 볼 수 있다.
Tools
- Open-Source UI elements - made with CSS and HTML - HTML/CSS로 만들어진 무료 UI 엘리멘트들
- 버튼/로더/체크박스/스위치/인풋/카드 등 636개의 컴포넌트
- 5232명의 컨트리뷰터
- 완전히 무료. 개인용/상업용 상관없이 이용 가능
HTML Reference
- Clear Both website
- [추천] HTML5 Open Referenceext.com/)
HTML Editor
- http://stackoverflow.com/questions/1163376/html-css-javascript-editor
- http://www.sublimetext.com/
- http://kldp.org/node/117359
- http://www.kompozer.net/
References
-
Designersnote_-Layout-_2_or_3_depth_skin.pdf ↩
-
This_presentation_is_an_HTML5_website.zip: (2014-03-11 download) ↩
-
This_presentation_is_an_HTML5_website_(ko).zip: (2014-03-11 download) ↩
-
Oh_My_Library_-_disable_mouse_drag.pdf ↩
-
Wget: Wget-w3schools.7z ↩
-
Html5-guide.pdf ↩
-
Html5-sqler_com.pdf ↩
-
Html_dtd_statement.pdf ↩
-
Html_table_tag_helper.pdf ↩