📚 HTML
HTML(HyperText Markup Language)란,
웹페이지의 내용과 구조를 담당하는 마크업 언어를 통해 정보를 구조화하는 것이다.
💡 Web Standards
Web Standards(웹 표준)이란,
웹에서 사용되는 표준 기술이나 규칙을 의미한다.
W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있으며, 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야한다.
➖ 장점
- 유지보수
- 비용 절감(서버 트래픽, 서버 공간)
- 웹 접근성 & 호환성
- SEO
- 효율적인 마크업으로 페이지 로딩 속도 향상
➖ HTML5 웹표준
-
Multimedia
플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원한다. -
Graphic & Effects
2차원 그래픽(SVG, 캔버스)과 3차원 그래픽(CSS3, WebGL)을 지원한다 -
Connectivity
지금까지는 단방향 통신만 가능했으나 HTML5는 소켓 통신을 지원하므로 양방향 통신이 가능하다. -
Device access
카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다. -
Offline & Storage
오프라인 상태에서도 애플리케이션을 동작시킬 수 있다. HTML5가 플랫폼으로서 사용될 수 있음을 의미한다. -
Semantics
시맨틱 태그를 도입하여 시맨틱 웹을 실현할 수 있다. -
CSS3
HTML5는 CSS3를 완벽하게 지원한다.
📚 HTML5 기본 문법
HTML5 문서는 반드시 <!DOCTYPE html>로 시작한다.
💡 Element
HTML document는 요소(Element)의 집합으로 이루어진다. 태그는 대소문자를 구문하지 않으나 소문자를 사용하는 것이 일반적이다.
➖ Nested Element
요소는 다른 요소를 포함할 수 있다. 이러한 중첩관계(부자관계)로 정보를 구조화한다.
➖ Empty Element
빈 요소(Empty element or Self-Closing element)는 content를 가질 수 없고, 가질 필요도 없으며, Attribute만을 가질 수 있다.
✔ br, hr, img, input, link, meta 등이 있다.
💡 Attribute
속성은 요소의 성질, 특징을 정의하는 명세이다. Attribute는 element에 추가적 정보를 제공한다.
➖ HTML Global Attribute
모든 HTML element가 공통으로 사용할 수 있는 Attribute이다. 몇몇 요소에는 효과가 적용되지 않을 수 있다.
✔ 자주 사용되는 Global Attribute
-
id
유일한 식별자(id)를 element에 지정한다. 중복 지정이 불가하다. -
class
stylesheet에 정의된 class를 element에 지정한다. 중복 지정이 가능하다. -
hidden
css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. -
lang
지정된 element의 언어를 지정한다. 검색엔진의 크롤링시 웹페이지의 언어를 인식할 수 있게 한다. -
style
element에 인라인 스타일을 지정한다. -
tabindex
사용자가 키보드로 페이지를 네비게이션 시 이동 순서를 지정한다. -
title
element에 관한 제목을 지정한다.
💡 Comments
브라우저는 주석을 화면에 표시하지 않는다.
📚 HTML 기본 태그
- DTD tag
- html tag
- head tag
- body tag
💡 DTD tag
<!DOCTYPE html> // HTML5 document문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다.
문서의 최상위에 위치해야 한다.
💡 html tag
html 태그는 모든 HTML element의 부모 요소이며 웹페이지에 단 하나만 존재한다.
글로벌 어트리뷰트를 지원하며, 특히 lang Attribut를 사용하는 경우가 많다.
💡 head tag
meta data를 포함하기 위한 element이다. 웹페이지에 단 하나만 존재하며 화면에 포이지 않는다.
-
title tag
문서의 제목을 정의하며 브라우저의 탭에 표시된다. -
style tag
HTML 문서를 위한 style 정보를 정의한다. -
link tag
외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일 연계에 사용한다. -
script tag
client-side JavaScript를 정의한다. -
meta tag
메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Web tutorials on HTML and CSS">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">💡 body tag
HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다.
