HTML

HTML

HTML(Hyper Text Markup Language)은 웹 페이지를 만들기 위한 언어입니다.
  • HT- Hyper Text : 문서와 문서를 연결
  • M - Markup : 마크업, 태그
  • Language : 언어
  • 즉 HTML이란 문서와 문서를 연결 된 태그 언어를 말합니다.

태그(Tag)

태그란 ? 정보를 정의하는 방식을 정의합니다.
  • 태그는 열린태그와 닫는 태그가 있습니다.
  • 닫는 태그에는 "/" 있어야 합니다.
  • 닫는 태그가 필요없는 태그도 있습니다.
  • HTML5에서는 "/"가 생략이 가능합니다.

블록요소/인라인 요소(Block/Inline)

블록 요소는 박스(레이아웃, 영역), 인라인요소는 텍스를 의미합니다.
  • 블록 엘리먼트(Block Element)
    • 독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있습니다.
    • 블록요소에는 블록요소와 인라인 요소를 포함 할 수 있습니다.
    • <div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <li>
  • 인라인 엘리먼트(Inline Element)
    • 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현 할 수 있습니다.
    • 인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.
    • <span>, <a>, <strong>, <em>, <img>

HTML Reference

Tag Description Content Version
<h1>~<h6> h1~h6 태그는 제목 영역을 설정합니다. Block HTML4
<div> <div>는 문서의 섹션을 만들거나 영역을 나눌 때 사용한다. Block HTML4
<ul> 순서가 없다. 앞에 기호가 붙는다. Block HTML4
<ol> 순서가 있다. 앞에 넘버링이 붙는다. Block HTML4
<li> ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다. Block HTML4
<p> 단락, 문단, 절을 말한다. Block HTML4
<span> 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다. Inline HTML4
<table> 표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용 한다. Block HTML4
<tr> 테이블 내의 한 행을 정의하는 태그이다. Block HTML4
<th> 셀 제목으로 지정하여 강조되게 표시하는 태그이다. Block HTML4
<td> 각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다 Block HTML4
<tbody> 테이블 내용 행 그룹이다. Block HTML4
<thead> 테이블 헤더 행 그룹이다 Block HTML4
<tfoot> 테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치한다. Block HTML4
<col> 빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정한다. Block HTML4
<colgroup> 열 그룹. 구조적인 그룹화를 위해 사용된다. Block HTML4
<br> break, 줄바꿈을 해줄때 사용한다. Block HTML4
<strong> 폰트와 관련된 태그이며 텍스트 자체를 강조할 때 사용한다. 기본적으로 <b>태그와 같이 굵게 렌더링된다. Inline HTML4
<em> 태그는 문맥상 중요하게 나타내어야 할 단어에 사용한다. Inline HTML4
<b> <b>태그는 다른 텍스트와 단순 구별 하고 싶을 때 사용 한다. Inline HTML4
<mark> <mark>태그는 중요성과 강조를 고려하지 않은 단순 참고용 표시를 할 때 사용한다. Inline HTML5
<address> 문서 나 문서의 작성자 / 소유자의 연락처 정보를 정의합니다. Block HTML5
<section> 장, 머리글, 바닥 글, 또는 문서의 다른 부분으로 문서의 섹션을 정의합니다. Block HTML5
<article> 태그는 독립적 인 자체에 포함 된 내용을 지정합니다. Block HTML5
<nav> 태그는 탐색 링크의 집합을 정의합니다. Block HTML5
<main> 태그는 문서의 주요 내용을 지정합니다. Block HTML5
<aside> 태그는 배치되는 내용을 제외하고 일부 내용을 정의합니다. Block HTML5
<header> 요소는 소개 내용이나 탐색 링크의 집합에 대한 컨테이너를 나타냅니다. Block HTML5
<footer> 태그는 문서 나 구역에 대한 바닥 글을 정의합니다. Block HTML5

section

  • 일반적으로 문서의 콘텐츠 섹션을 의미합니다.
  • 콘텐츠와 과련된 한 가지 주제 영역을 말합니다.
  • section요소는 문장이나 문서의 스타일링 요소가 아니기 때문에 편의나 영역을 위합이라면 <div> 태그가 좋습니다.
  • section요소는 제목이 없는 경우는 섹션이라고 할 수 없기 때문ㅇ[ 제목을 제공해야 합니다.
  • section요소는 일반적인 주제가 아니라면 구체적인 요소(article, aside, nav)를 사용하는 것이 더 적절합니다.

article

  • 콘텐츠의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.
  • article는 포럼, 신문기사, 잡지, 블로그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타냅니다.
  • section는 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠입니다.
  • section요소 안에는 article요소를 쓸 수 있으며, article요소안에도 section요소를 쓸 수 있습니다.

nav

  • 페이지내에서 이동 할 수 있는 네비게이션 링크 그룹입니다.
  • nav는 문서의 핵심적인 페이지의 메뉴 및 서브 메뉴에서 사용하고, 문서에서 주로 한 번 사용합니다.
  • 문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다.
  • nav는 핵심적인 네비게이션에 사용해야 하므로 foot 내에 링크 그룹의 사용은 적절하지 않습니다.

main

  • 웹 문서의 주요 콘텐츠 영역을 나태낼 때 사용합니다.
  • main는 웹 페이지에서 한 번만 사용할 수 있으며, 접근성과 검색영역에 노출을 항상시킵니다.
  • article,aside, footer, header, nav를 하위 요소로 사용할 수 있습니다.

aside

  • 웹 문서의 메인 콘텐츠와 관련된 사이드 콘텐츠 영역을 나타냅니다.
  • aside는 메인 콘텐츠의 관련된 사이드의 정보, 광고 등 부분적인 정보를 그룹화 할 때 사용합니다.

header

  • 웹 문서의 헤더 영역을 나타냅니다.
  • header에는 웹 페이지에 대한 소개, 네비게이션 영역, 테이블 영역, 검색 영역, 로고 영역을 포함한 영역입니다.
  • header는 제목 태그가 포함 될 수 있으며, 필수 조건은 아닙니다.
  • header는 섹션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함 할 수 없습니다.

footer

  • 웹 문서의 footer영역을 나타냅니다.
  • footer는 저작권 정보, 회사 정보, 관련 링크., 주소, 바닥글, 사이트 정보 등을 포함하는 콘텐츠 영역입니다.
  • footer는 섹션 콘텐츠가 아니 그룹을 나타내는 요소이며, section, article, aside 등을 포함 할 수 있습니다.

HTML5에서 새로 생긴 태그

  • section : 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h1~h6와 함께 사용할 수 있습니다.
  • article : 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠를 표시합니다.
  • aside : 문서의 주요 부분을 표시하고 남는 사이드 바 콘텐츠를 표시 합니다.
  • hgroup : 제목과 그에 관련된 부제목을 하나로 묶습니다.
  • header : 헤더 부분으로 사이트 소개나 네비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역할을 하기도 합니다.
  • footer : 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용합니다.
  • nav : 사이트 안의 내비게이션 요소를 표시합니다.
  • figure,figcaption : 그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙이려고 할 때 사용합니다.
  • audio, video : 멀티미디어 콘텐츠를 표시합니다. 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공합니다.
  • embed : 플러그인 콘텐츠를 표시합니다.
  • mark : 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 만듭니다.
  • progress : 시간이 걸리는 작업과정을 막대로 표시합니다.
  • meter : 측정값을 표시합니다.
  • time : 날짜나 시간을 표시합니다.
  • ruby, rt, rp : 루비 문자를 표현합니다.
  • canvas : 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들수 있습니다.
  • command : 사용자 실행 명령어를 표시합니다.
  • details : 추가적인 정보나 사용자가 요청하는 정보를 표시합니다.
  • datalist : 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.
  • keygen : 양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장합니다.
  • output : 학적인 계산의 결과값을 표시합니다.

HTML5에서 의미가 변한 속성

HTML4에서의 의미 HTML5에서의 의미
a href="#" 또는 href="javascript:;"로 지정해야 널 링크로 사용할 수 있습니다. href 속성 없이 사용하면 '널 링크'로 사용됩니다.
address 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시합니다. 실제 우편물 주소를 표시합니다.
b 텍스트를 진하게 표시합니다. 텍스트를 진하게 표시할 뿐 아니라, 제품 소개서안의 제품명, 요약 문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용합니다.
hr 가로줄을 표시합니다. 단락 단위로 주제를 바꾸려고 할 때 사용합니다.
i 텍스트를 기울어지게 표시합니다. 텍스트를 기울어지게 표시할 뿐 아니라, 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용합니다.
menu (사용하지 않도록 권고) 실제 문서 메뉴 정보를 제공하는데 사용합니다.
small 작은 글자로 표시합니다. 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용합니다.
strong 글자를 강조합니다. 단순히 진하게 표시하는 것보다 더 중요한 정보를 표시할 때 사용합니다.

HTML5에서 없어진 태그

  • <acronym>
  • <애플릿>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <프레임>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>