[HTML] HTML5 기본 문법 정리

 

 

1.HTML5

HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어 이다. HTML은 2014년 10월 28일 확정된 차세대 웹 표준으로 아래와 같은 기능들이 추가되었다.

멀티미디어(Multimedia)
플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 등의 멀티미디어 기능을 자체적으로 지원

그래픽(Graphics & Effects)
SVG, 캔버스를 이용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원

통신(Connectivity)
지금까지의 HTML은 단방향 통신만이 가능하였으나 HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능

디바이스 접근(Device access)
카메라, 동작 센서 등의 하드웨어 기능을 직접적으로 제어 가능

오프라인 및 저장소(Offline & Storage)
오프라인 상태에서도 애플리케이션을 동작시킬 수 있음, HTML5가 플랫폼으로서 사용될 수 있음을 의미

시맨틱 태그(Semantics)
HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명 가능, 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있음

CSS3
HTML5는 CSS3를 완벽하게 지원

기본 문법

HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이의 content로 구성된다.

<p>Hello</p>

 

태그는 대소문자를 구별하지 않으나 W3C:World Wide Web Consortium에서는 소문자를 추전하고 있다.

- 어트리뷰트 (Attribute)

어트리뷰트(Attribute, 속성)란 요소의 성질, 특징을 정의하는 명세이다. 어트리뷰트는 요소의 추가적인 정보를 제공한다. 시작 태그에 위치해야 하며 이름과 쌍을 이룬다. (name="value")

<img src="html.jpg" width="104" height="142">

 

 

• 글로벌 어트리뷰트 (HTML Global Attribute)
  글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에 사용될 수 있다.

Attribute	Description
id	유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가능 하다.
class	스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능 하다.
hideen	css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang	지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
style	요소에 인라인 스타일을 지정한다.
tabindex	사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
title	요소에 관한 제목을 지정한다.

- 주석

주석(comment)은 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.

<!-- 주석은 화면에 표시되지 않는다. --> 
<p>Lorem ipsum dolor sit amet</p>

 

시맨틱 웹(Semantic Web)

검색 엔진은 정보를 수집할 때 HTML 코드 만으로 그 의미를 인지하여야 한다. 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

<font size="6"><b>Content</b></font> 
<h1>Content</h1>

 

위의 코드는 브라우저에서 동일한 외형을 갖는다. 그러나 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않고 2행의 요소는 header 중 가장 상위 레벨이라는 의미를 내포하고 있어 개발자가 의도한 요소의 의미가 명확히 드러나고 있다. 이는 코드의 가독성을 높이고 유지보수를 쉽게 한다.

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

non-semantic 요소	div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소	form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

• HTML5에 새롭게 추가된 시맨틱 태그

tag	Description
header	헤더를 의미한다.
nav	내비게이션을 의미한다.
aside	사이드에 위치하는 공간을 의미한다.
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다.
article	본문의 주내용이 들어가는 공간을 의미한다.
footer	푸터를 의미한다.

 

태그

1. head tag

head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다. head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.

tag	Description
title	문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다. <title>문서 제목</title>
style	HTML 문서를 위한 style 정보를 정의한다. <style>스타일 정보</style>
link	외부 리소스와의 연게 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계할 때 사용한다. <link rel="stylesheet" href="style.css">
script	client-side JavaScript를 정의한다. <script>스크립트 내용</script> src 어트리뷰트를 사용하여 외부 JavaScript 파일을 로드할 수 있다. <script src="main.js"></script>
meta	description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 사용된다. <meta charset="utf-8"> 브라우저가 사용할 문자셋을 정의한다. <meta name="keywords" content="HTML, CSS, JavaScript"> SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords를 정의한다. <meta name="description" content="Web tutorials on HTML"> 웹페이지의 설명을 정의한다. <meta name="author" content="mebadong"> 웹페이지의 저자를 명시한다. <meta http-equiv="refresh" content="30"> 웹페이지를 30초마다 Refresh 한다.

2.body tag

body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.

3. 텍스트 관련 태그

tag	Description
h1 ~ h6	제목을 나타낼 때 사용한다. h1이 가장 중요한 제목을 의미하며 글자 크기도 가장 크다. 시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. <h1>heading</h1>
b	bold체를 지정한다. 시맨틱 중요성의 의미는 없다. <b>굵은 글씨</b>
strong	bold체를 지정한다. 시맨틱 중요성의 의미를 갖는다. 외양은 b 태그와 동일하지만 웹 표준을 준수하고자 한다면 strong을 사용하는 것이 바람직한다. <strong>굵은 글씨</strong>
i	Italic체를 지정한다. 시맨틱 중요성의 의미는 없다. <i>이탤릭체</i>
em	emphasized(강조, 중요한) 텍스트를 지정한다. i 태그와 동일하게 Italic체로 표현된다. 시맨틱 중요성의 의미를 갖는다. <em>이탤릭체</em>
small	작은 텍스트를 지정한다. <small>작은 글씨</small>
mark	highlighted text를 지정한다. <mark>강조된 글씨</mark>
del	deleted(removed) text를 지정한다. <del>취소된 글씨</del>
ins	inserted(added) text를 지정한다. 밑줄이 쳐진 글씨 <ins>밑줄 글씨</ins>
sub / sup	sub 태그는 subscripted text, sup 태그는 superscripted text를 지정한다. <sub>아래첨자</sub> <sup>위첨자</sup>
p	단락(Paragraphs)를 지정한다. <p>내용</p>
br	강제 개행을 지정한다. 빈 요소로 종료태그가 없다. <br>
pre	형식화된(preformatted) 텍스트를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다. <pre>내용</pre>
hr	수평줄을 삽입한다. <hr>
q	짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다. <q>내용</q>
blockquote	긴 인용문 블록을 지정한다. css를 이용하여 다양한 style을 적용할 수 있다. <blockquote>내용</blockquote>

4. 하이퍼링크 태그

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.

<a href="http://mebadong.tistory.com">메바동 서식지</a>

 

• href 어트리뷰트
  href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.

  • 디렉터리(Directory)

    • 루트 디렉터리
      파일 시스템 계층 구조 상의 최상위 디렉터리이다.
      Unix: /
      Windows: C:\

    • 홈 디렉터리
      시스템의 사용자에게 각각 할당된 개별 디렉터리이다.
      Unix: /User/{계정명}
      Windows: C:\User{계정명}

    • 작업 디렉터리
      작업 중인 파일이 위치한 디렉터리이다.
      ./

    • 부모 디렉터리
      작업 디렉터리의 부모 디렉터리이다.
      ../

  • 파일 경로(File path)

    • 절대경로(Absolute path)
      현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.

    • 상대경로(Relative path)
      현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.

  • href 어트리뷰트에 사용 가능한 값

    Value	Description
    절대 URL	웹사이트 URL(href="주소")
    상대 URL	자신의 위치를 기준으로한 대상의 URL(href="경로")
    fragment identifier	페이지 내의 특정 id를 갖는 요소로의 링크(href="#id")
    메일	href="mailto:"
    script	href="javascript:스크립트"

• target 어트리뷰트
  링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.

  Value	Description
  _self	링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (default)
  _blank	링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다.

4. 목록(List)와 표(Table)

• 목록(List)

  • 순서 없는 목록(Unordered List)

    <ul> 
      <li>item1</li> 
      <li>item2</li> 
    </ul>

     

  • 순서 있는 목록(Ordered List)

    <ol> 
      <li>item1</li> 
      <li>item2</li> 
    </ol>

     

    type 어트리뷰트를 이용하여 순서를 나타내는 문자를 지정할 수 있다.

    Value	Description
    "1"	숫자 (default)
    "A"	대문자 알파벳
    "a"	소문자 알파벳
    "I"	대문자 로마숫자
    "i"	소문자 로마숫자

    start 어트리뷰트를 이용하여 리스트의 시작값을 지정할 수 있다.

• 테이블(Table)
  표를 만들 때 사용하는 태그, 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.

  tag	Description
  table	표를 감싸는 태그
  tr	표 내부의 행(table row)
  th	행 내부의 제목 셀(table heading)
  td	행 내부의 일반 셀(table data)

  테이블 태그의 어트리뷰트는 아래와 같다.

  attribute	Description
  border	표 테두리 두께를 지정한다. CSS border property를 사용하는 것이 더 나음)
  rowspan	해당 셀이 점유하는 행의 수 지정
  colspan	해당 셀이 점유하는 열의 수 지정

5. 멀티미디어 태그

• 이미지(image)
  웹페이지에 이미지를 삽입하는 경우 img 태그를 사용한다.

  <img src="파일 경로" alt="내용" width="너비" height="높이">

   

  attribute	Description
  src	이미지 파일 경로
  alt	이미지 파일이 없을 경우 표시되는 문장
  width	이미지의 너비(CSS에서 지정하는 것이 일반적)
  height	이미지의 높이(CSS에서 지정하는 것이 일반적)

• 오디오(audio) audio 태그는 HTML5에서 새롭게 추가된 태그로 IE8 이하에서는 사용할 수 없다.

  <audio src="파일 경로" controls></audio>

   

  attribute	Description
  src	음악 파일 경로
  preload	재생 전에 음악 파일을 모두 불러올 것인지 지정
  autoplay	음악 파일을 자동으로 재생할 것인지 지정
  loop	음악을 반복할 것인지 지정
  controls	음악 재생 도구를 표시할 것인지 지정

  브라우저 별로 지원하는 음악 파일 형식이 다른데 source 태그를 사용하면 해결할 수 있다.

  <audio controls> 
    <source src="music.mp3" type="audio/mpeg"> 
    <source src="music.ogg" type="audio/ogg"> 
  </audio>

   

• 비디오(video)

  <video width="너비" height="높이" controls> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
  </video>

   

  attribute	Description
  src	동영상 파일 경로
  poster	동영상 준비 중에 표시될 이미지 파일 경로
  preload	재생 전에 동영상 파일을 모두 불러올 것인지 지정
  autoplay	동영상 파일을 자동으로 재생할 것인지 지정
  loop	동영상을 반복할 것인지 지정
  controls	동영상 재생 도구를 표시할 것인지 지정
  width	동영상의 너비를 지정
  height	동영상의 높이를 지정

6. 폼 태그

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.

<form> 
  ...
  form elements(input, textarea, button, select, checkbox, radio buttion, submit button...) 
  ... 
</form>

 

attribute	Value	Description
action	URL	입력 데이터(form data)가 전송될 URL 지정
method	get / post	입력 데이터(form data) 전달 방식 지정

GET

• GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.
  예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
• 전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다.
• URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자).
• REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.

POST

• POST 방식은 Request Body에 담아 보내는 방식이다.
  예) http://jsonplaceholder.typicode.com/posts
• URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
• REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.

input

input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다. input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다. form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다. 서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로 하여 key=value의 형태로 전송된다.

type 어트리뷰트값	Description
button	버튼 생성
checkbox	checkbox 생성
color	color picker 생성
date	date control 생성
datetime	data & time control 생성
datetime-local	지역 date & time control 생성
email	이메일 입력 생성, submit시 자동으로 검증
file	파일 선택 생성
hidden	감추어진 입력 생성
image	이미지로된 submit 버튼 생성
month	월 선택 생성
number	숫자 입력 생성
password	패스워드 입력 생성
radio	radio 버튼 생성
range	범위 선택 생성
reset	초기화 버튼 생성
search	검색 입력 생성
submit	submit 버튼 생성
tel	전화번호 입력 생성
text	텍스트 입력 생성
time	시간 선택 생성
url	url 입력 생성
week	주 선택 입력 생성

<input type="button" value="Click me" onclick="alert('Hello world!')">

 

select

tag	description
select	select form 생성
option	option 생성
optgroup	option을 그룹화

<select name="cars1"> 
  <option value="volvo" selected>Volvo</option> 
  <option value="saab" disabled>Saab</option> 
  <option value="fiat">Fiat</option> 
  <option value="audi">Audi</option> 
</select> 
<select name="cars2" size="4" multiple> 
  <option value="volvo">Volvo</option> 
  <option value="saab">Saab</option> 
  <option value="fiat">Fiat</option> 
  <option value="audi" selected>Audi</option> 
</select> 
<select name="cars3"> 
  <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
  </optgroup> 
  <optgroup label="German Cars" disabled> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
  </optgroup> 
</select>

 

textarea

<textarea name="이름" row="열" cols="행">초기 텍스트</textarea>

 

button

button 태그는 클릭할 수 있는 버튼을 생성한다. input의 button과 유사하지만 input 태그는 빈 태그인 반명 button 태그는 그렇지 않다. 따라서 button 태그에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다. type 어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 button, reset, submit을 지정할 수 있다.

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 

fieldset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다. legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.

<fieldset> 
  <legend>Login</legend> 
  Username <input type="text" name="username"> 
  Password <input type="text" name="password"> 
</fieldset>

 

7. 화면 분할 태그

공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 하지만 div 태그는 의미론적으로 어떠한 의미도 없기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서는 작동하지 않기 때문에 주의가 필요하다.

tag	Description
header	헤더를 의미한다.
nav	내비게이션을 의미한다.
aside	사이드에 위치하는 공간을 의미한다.
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다.
article	본문의 주내용이 들어가는 공간을 의미한다.
footer	푸터를 의미한다.

 

---

Reference

• Web, poiemaweb - HTML5