| <a> |
<a> 태그는 다른 페이지 이동을 설정합니다. 페이지 주소
뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며,
아이디(#) 값으로 페이지 내에서도 이동이 가능합니다.
|
| <abbr> |
<abbr> 태그는 줄임말이나 머리글자를 표현하는데
사용합니다. abbr은 abbreviation의 약자로, "약자 또는
생략어"라는 의미를 가집니다. title 속성을 사용하여 전체 단어를
지정 할 수 있으며, <dfn> 태그와 같이 사용하여 정의할 수
있습니다.
|
| <acronym> |
<acronym> 태그는 줄임말이나 머리글자를 표현하는데
사용합니다. 현재는 사용하지 않습니다.
|
| <address> |
<address> 태그는 웹 페이지의 연락처 정보를 설정합니다.
사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등의 정보와,
회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다.
|
| <applet> |
<applet> 태그는 애플랫 요소를 설정합니다. 현재는
사용하지 않습니다.
|
| <area> |
<area> 태그는 이미지 맵의 영역을 정의합니다. |
| <article> |
<article> 태그는 사이트의 독립적인 컨텐츠 섹션을
설정합니다. 독립적인 컨텐츠에는 포럼, 신문기사, 잡지, 블러그
항목, 게시판 글 등이 있으며, 각각의 컨테츠에는
제목(<h1>~<h6>)이 표시되어야 합니다.
|
| <aside> |
<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을
설정합니다. 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보,
광고 등 부분적인 정보를 나타낼 때 사용합니다.
|
| <audio> |
<audio> 태그는 오디오 파일을 설정합니다. |
| <b> |
<b> 태그는 다른 텍스트와 구별 할 때 설정합니다. 텍스트는
굵게 표시되지만 중요성을 강조하지 않습니다.
|
| <base> |
<base> 태그는 모든 문서의 기본이 되는 URL을 설정합니다.
<head> 태그 안에 설정 할 수 있으며, 문서에서 한 번만
설정 할 수 있습니다.
|
| <basefont> |
<basefont> 태그는 문서의 기본 폰트, 사이즈, 종류를
설정합니다. 지금은 CSS에서 이 기능을 구현하기 때문에 현재는
사용하지 않습니다.
|
| <bdi> |
<bdi> 태그는 텍스트의 출력 방향 영역을 설정합니다.
일반적인 글은 왼쪽에서 오른쪽으로 읽지만, 아랍어나 히브리어는
오른쪽에서 왼쪽으로 읽을 때 사용합니다.
|
| <bdo> |
<bdo> 태그는 텍스트의 방향을 설정합니다. 텍스트의 읽는
방향이 다른 나른 언어를 위해 사용합니다.
|
| <big> |
<big> 태그는 텍스트의 크기를 크게 설정합니다. CSS가 그
기능을 대신하기 때문에 현재는 사용하지 않는 태그입니다.
|
| <blockquote> |
<blockquote> 태그는 긴 문장의 인용문을 설정합니다.
인용된 정보 출처는 cite 속성을 통해 설정합니다.
|
| <blink> |
<blink> 태그는 텍스트를 깜박이게 설정합니다. 현재는
사용하지 않으며 오래된 태그입니다. 이 기능은 CSS Animation이
대신 할 수 있습니다.
|
| <body> |
<body> 태그는 문서의 타이틀, 스크립트, 스타일, 메타 정보
등을 설정합니다.
|
| <br> |
<br> 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. |
| <button> |
<button> 태그는 클릭 할 수 있는 버튼을 설정합니다.
|
| <canvas> |
<canvas> 태그는 비트맵 방식의 그림을 설정합니다. |
| <caption> |
<caption> 태그는 표의 제목을 설정합니다. |
| <center> |
<center> 태그는 텍스트를 가운데 정렬합니다. CSS 속성이
기능을 대신하고 있기 때문에 현재는 사용하지 않습니다.
|
| <cite> |
<cite> 태그는 저작물의 출처 표기를 설정합니다. |
| <code> |
<code> 태그는 코드를 나타내는 텍스트를 설정합니다.
|
| <col> |
<col> 태그는 <colgroup> 요소에 속하는 각 열의
속성을 설정합니다.
|
| <colgroup> |
<colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
|
| <data> |
<data> 태그는 주어진 요소의 데이터 값을 설정합니다.
|
| <datalist> |
<datalist> 태그는 선택 목록과 자동 완성 기능을
설정합니다. 사용자가 데이터를 입력하면 일치하는 목록이 있을
경우 보여줍니다. <select> 태그는 주어진 선택 목록을
선택만 할 수 있지만, <datalist> 태그는 선택 목록에
없어도, 사용자가 입력할 수 있습니다.
|
| <dd> |
<dd> 태그는 설명 목록의 항목을 설정합니다. |
| <del> |
<del> 태그는 문서의 삭제된 텍스트를 설정합니다. |
| <details> |
<details> 태그는 접기/펼치기 목록을 설정합니다. 컨텐츠
요소를 숨기거나 보여줄 수 있습니다. 자바스크립트를 이용하여
컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해
구현할 수 있습니다. 접기/펼치기 목록의 제목은 <summary>
태그를 통해 설정합니다.
|
| <dfn> |
<dfn> 태그는 용어를 정의할 때 설정합니다. |
| <dialog> |
<dialog> 태그는 팝업 정보을 설정합니다. |
| <dir> |
<dir> 태그는 파일 및 폴더의 디렉토리를 설정합니다.
현재는 사용하지 않습니다.
|
| <div> |
<div> 태그는 문서의 영역을 나누거나 그룹화 할 때
설정합니다.
|
| <dl> |
<dl> 태그는 설명 목록을 설정합니다. |
| <dt> |
<dt> 태그는 설명 목록 항목의 제목을 설정합니다. |
| <em> |
<em> 태그는 텍스트를 강조할 때 설정합니다. |
| <embed> |
<embed> 태그는 외부 콘텐츠를 사용할 수 있도록
설정합니다.
|
| <fieldset> |
<fieldset> 태그는 폼 컨트롤 요소의 내부 영역을
설정합니다.
|
| <figcaption> |
<figcaption> 태그는 <figure> 요소의 설명 또는
제목을 설정합니다.
|
| <figure> |
<figure> 태그는 인용, 도표, 사진, 코드 등의 독립적인
콘텐츠를 설정합니다.
|
| <font> |
<font> 태그는 폰트의 크기, 색, 종류를 설정합니다. |
| <footer> |
<footer> 태그는 사이트 관련 정보 및 관련 링크 콘텐츠
섹션을 설정합니다.
|
| <form> |
<form> 태그는 웹 서버에 정보를 제공하는 폼 컨트롤 유형을
설정합니다.
|
| <frame> |
<frame> 태그는 다른 HTML문서가 표시 될 수 있는 특정
영역을 설정합니다.
|
| <frameset> |
<frameset> 태그는 레이아웃 구성을 위한 프레임을
설정합니다.
|
| <h1>~<h6> |
<h1>~<h6> 태그는 섹션의 제목 설정합니다. |
| <head> |
<head> 태그는 제목과 스크립트, 스타일 시트, 메타 정보
등을 제공합니다.
|
| <header> |
<header> 태그는 사이트의 소개 및 메뉴 그룹을 나타내는
섹션을 설정합니다.
|
| <hgroup> |
<hgroup> 태그는 제목 요소 그룹화를 설정합니다. |
| <hr> |
<hr> 태그는 단란 요소간의 주제별 구분을 설정합니다.
|
| <html> |
<html> 태그는 웹 문서의 최상위 요소 문서의 루트를
나타냅니다.
|
| <i> |
<i> 태그는 특별한 이유로 평범한 글자와 구분하기 위해
설정합니다.
|
| <iframe> |
<iframe> 태그는 웹 문서에 다른 문서를 포함하는데
사용합니다.
|
| <img> |
<img> 태그는 웹 문서에 이미지를 정의합니다. |
| <input> |
<input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을
정의합니다.
|
| <ins> |
<ins> 태그는 문서에 삽입된 텍스트를 설정합니다. |
| <kbd> |
<kbd> 태그는 키보드 입력요소를 나타내는 텍스트를
정의합니다.
|
| <keygen> |
<keygen> 태그는 보안키를 생성하고 컨트롤합니다. |
| <label> |
<label> 태그는 해당 <input> 요소의 제목을
설정합니다.
|
| <legend> |
<legend> 태그는 <fieldset> 요소 영역의 설명을
설정합니다.
|
| <li> |
<li> 태그는 목록의 항목을 나타내는 태그입니다. |
| <link> |
<link> 태그는 외부 파일 연결 할 때 설정합니다. |
| <main> |
<main> 태그는 문서의 주요 콘텐츠를 정의합니다. |
| <map> |
<map> 태그는 이미지 맵을 정의합니다. |
| <mark> |
<mark> 태그는 참조용 표시를 정의합니다. |
| <marquee> |
<marquee> 태그는 텍스트의 스크롤과 움직임을 정의합니다.
|
| <menu> |
<menu> 태그는 메뉴 리스트를 정의합니다. |
| <menuitem> |
<menuitem> 태그는 메뉴 리스트 항목을 정의합니다. |
| <meta> |
<meta> 태그는 웹 문서에 대한 정보를 제공합니다. |
| <meter> |
<meter> 태그는 범위를 측정하는 게이지 정보를 정의합니다.
|
| <nav> |
<nav> 태그는 내부 페이지 및 외부 페이지에 대한 탐색
링크를 제공하는 페이지 섹션을 설정합니다.
|
| <noframes> |
<noframes> 태그는 프레임이 지원되지 않을 경우 대체
메세지를 표시합니다.
|
| <noscript> |
<noscript> 태그는 스크립트를 지원하지 않는 브라우저를
위한 대체 태그입니다.
|
| <object> |
<object> 태그는 웹 문서에 포함된 멀티미디어 요소를
정의합니다.
|
| <ol> |
<ol> 태그는 순서가 있는 목록형 태그입니다. |
| <optgroup> |
<optgroup> 태그는 <select> 메뉴 <option>
리스트의 그룹화를 설정합니다.
|
| <option> |
<option> 태그는 <select> 요소의 항목을 정의합니다.
|
| <output> |
<output> 태그는 사용자에 컨트롤에 따라 결과값을 계산으로
보여주는 요소입니다.
|
| <p> |
<p> 태그는 단락을 나타냅니다. 문단은 하나로 묶을 수 있는
짧막한 단위를 말하며, 단락은 하나 하나의 짧은 토막이라고 말 할
수 있습니다. 즉 단락이 모여서 문단이 됩니다. 마크업 할 때는
문단은 <div> 태그로 그 안에는 여러개의 <p> 태그로
구성되어 있다고 보시면 됩니다. <p> 태그와 <p> 태그
사이에는 한 줄의 행간이 표현됩니다.
|
| <param> |
<param> 태그는 <object> 태그의 매개변수를
정의합니다.
|
| <picture> |
<picture> 태그는 화면 크기에 따라 이미지를 정의합니다.
웹 사이트에서 이미지를 표현 할 수 있는 방법은 여러가지
있습니다. <img>, <picture>, <figure> 태그와
background를 통해서도 이미지를 표현 할 수 있습니다. 이미지를
불러올 때는 <img> 태그, 이미지를 표현할 때는
<figure> 태그, 이미지를 화면 크기에 따라 설정할 때는
<picture> 태그를 사용합니다. <picture> 태그는
반응형 사이트와 관련이 있으면 화면 크기에 따라 그에 맞는
이미지를 보여주는 태그입니다. <source> 태그와 같이
사용하며 미디어 쿼리를 통해 표현합니다.
|
| <pre> |
<pre> 태그는 마크업 소스를 화면 그대로 표현합니다. HTML
마크업시 두칸 이상은 브라우저에서 한칸으로 표현됩니다. 하지만
<pre> 태그는 마크업의 빈칸과 줄바꿈을 화면 그대로
표현합니다. 코드를 보여줄 때 많이 사용하는 편입니다.
|
| <progress> |
<progress> 태그는 작업의 진행 상태를 표시하는 바를
나타냅니다. 속성을 통해 최대 진행 표시와 현재 진행 표시를
나타낼 수 있습니다. 진행 바 표시는 브라우저마다 OS마다 틀릴 수
있습니다. 현재 진행률과 제목은 <label> 태그를 통해
표시합니다.
|
| <q> |
<q> 태그는 짧은 글을 인용할 때 사용합니다. 인용한 글의
출처는 cite 속성을 통해 표현 할 수 있으며, 긴 문장의 인용은
<blockquote> 태그를 사용할 수 있습니다.
|
| <rp> |
<rp> 태그는 루비 문자의 상단 주석을 정의합니다. 루비
문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게
읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby>
태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은
주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지
않을 경우 괄호('(')를 표현해주는 역할을 합니다. <rb>
태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너
역할을 합니다.
|
| <rt> |
<rt> 태그는 루비 문자의 상단 주석을 정의합니다. 루비
문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게
읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby>
태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은
주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지
않을 경우 괄호('(')를 표현해주는 역할을 합니다. <rb>
태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너
역할을 합니다.
|
| <rtc> |
<rtc> 태그는 루비 문자의 상단 주석을 정의합니다. 루비
문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게
읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby>
태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은
주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지
않을 경우 괄호('(')를 표현해주는 역할을 합니다. <rb>
태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너
역할을 합니다.
|
| <ruby> |
<ruby> 태그는 루비 문자의 상단 주석을 정의합니다. 루비
문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게
읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby>
태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은
주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지
않을 경우 괄호('(')를 표현해주는 역할을 합니다. <rb>
태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너
역할을 합니다.
|
| <s> |
<s> 요소는 텍스트에 취소선을 나타냅니다. 더 이상
텍스트와 관련이 없거나 적절하지 않은 것을 나타낼 때
사용합니다. 문서 편집을 위한 텍스트 수정은 <del> 또는
<ins> 태그를 사용합니다.
|
| <samp> |
<samp> 태그는 컴퓨터 프로그램으로 출력된 결과물을
나타내는 텍스트를 표현합니다. 스크립트의 결과값을 나타낼 때
사용하며 monotype의 폰트로 표현이 됩니다.
|
| <script> |
<script> 태그는 실행 가능한 스크립트 코드를 포함하거나
외부 스크립트를 연결할 수 있습니다.
|
| <section> |
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때
사용하며, 각 섹션에는 <h1>~<h6> 요소를 자식으로
포함시켜 식별해야 합니다. <section> 태그는 스타일링
요소가 아니기 때문에 그룹화나 편의를 위함이라면 <div>
태그를 사용하는 것이 좋습니다.
|
| <select> |
<select> 태그는 선택 목록을 설정합니다. <select>
태그는 선택 목록을 <option> 태그를 사용하여 설정하며,
접근성을 위하여 <label> 요소를 사용하며, id와 for 속성을
설정합니다.
|
| <small> |
<small> 태그는 저작권 및 법적인 텍스트에 설정합니다.
|
| <source> |
<source> 태그는 <picture>, <audio> 요소 및
<video> 요소에 소스를 지정하는데 사용합니다. 닫는 태그가
없는 빈요소입니다.
|
| <span> |
<span> 태그는 콘텐츠 요소를 표현하기 위한 인라인
요소이며, 의미가 없는 그룹화 요소입니다. 적절한 의미에 맞는
요소가 없거나 그룹화할 때 사용하며 <div> 요소와 비교가
됩니다. <div> 태그는 블록구조이며 <span> 태그는
인라인 구조입니다.
|
| <strike> |
<strike> 태그는 현재 사용하지 않는 태그입니다. 텍스트
위에 취소선(수평선)을 표현하기 위해 사용한 태그이지만 현재는
<del> 태그 또는 <s> 태그가 그 역할을 대신하고
있습니다.
|
| <strong> |
<strong> 태그는 텍스트의 중요성을 강조할 때 설정합니다.
일반적으로 텍스트는 굵게 표현이 됩니다. <strong> 태그는
다른 태그와 유사한 점이 있기 때문에 비교하며 적절한 곳에
사용해야 합니다. <b> 태그와 <strong> 태그는
출력되는 모양이 같지만 <strong> 태그는 컨텐츠의 중요성을
강조하는 반면 <b> 태그는 텍스트의 주의를 끌기
위함입니다. <em> 태그와 <strong> 태그는 강조하는
태그이지만 의미에 있어 약간의 차이가 있습니다. 예를 들면 "나는
너를 사랑해"하고 할 때 사랑해를 강조하기 위해 <em>
태그를 사용할 수 있습니다. 하지만 <strong> 태그는
"여기는 매우 위험합니다. 들어가지 마세요" 라고 할 경우
중요성과 심각성, 긴급성의 의미까지 내포하기 때문에 <em>
보다는 <strong> 태그가 더 적절합니다.
|
| <style> |
<style> 태그는 웹 문서에 스타일 정보를 설정할 수
있습니다. 웹 문서에 스타일을 표현하는 방법은 인라인 스타일
(inline style), 인터널 스타일 (internal style), 익스터널
스타일 (external style) 방법이 있으며, 상황에 맞게 쓸 수
있습니다. <style> 태그는 <head>나 <body>에
사용할 수 있지만 <head> 태그 영역 안에 설정 하는 것이
좋으며, 외부 스타일로 설정하는 것을 추천합니다.
|
| <sub> |
<sub> 태그는 텍스트의 아래첨자를 사용할 때 쓰입니다.
주로 수학적인 공식이나 화학식에서 많이 사용하게 됩니다.
<sub> 태그는 디자인적인 요소를 사용하는 것은 적합하지
않습니다. <sub> 태그의 위치는 변경이 필요한 경우에는
vertical-align 속성을 사용하면 변경할 수 있으며, 이런 모양이나
위치는 브라우저마다 틀릴 수 있으니 확인이 필요합니다.
|
| <summary> |
<summary> 태그는 접기/펼치기 목록을 설정합니다.
자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는
기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의
제목은 <summary> 태그를 통해 설정합니다.
|
| <sup> |
<sup> 태그는 텍스트의 위첨자를 사용할 때 쓰입니다. 주로
수학적인 공식에서 많이 사용하게 됩니다. <sup> 태그는
디자인적인 요소를 사용하는 것은 적합하지 않습니다. <sup>
태그의 위치는 변경이 필요한 경우에는 vertical-align 속성을
사용하면 변경할 수 있으며, 이런 모양이나 위치는 브라우저마다
틀릴 수 있으니 확인이 필요합니다.
|
| <svg> |
<svg> SVG(Scalable Vector Graphics)는 벡터 방식의 2차원
그림을 그리기 위한 XML기반의 마크업 언어입니다. SVG는 텍스트
기반의 표준 방식이며, HTML이나 CSS를 이용하여 사용 할 수
있습니다. SVG는 XML 파일을 기반으로 하고 있기 때문에
인덱싱이나 압축이 가능하며, 일러스트레이터와 같은 프로그램을
통해 편집도 가능합니다. SVG는 1999년부터 W3C(World Wide Web
Consortium)에 개발한 표준 언어입니다.
|
| <table> |
<table> 태그는 표를 설정합니다. 테이블은 테이터를
포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을
이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는
현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지
않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목,
설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야
합니다. 테이블은 제목을 표시하기 위해 <caption>을
사용하고 셀 요소를 그룹화하기 위해 <colgroup>과
<col>을 사용합니다. 테이블 전체 구조를 분리하기 위해
<thead>, <tbody>, <tfoot>를 사용하며, 행과
열을 나타내는 <tr>, <td> <th> 등을
사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의
병합을 위해 colspan과 rowspan을 사용하게 됩니다.
|
| <tbody> |
<tbody> 태그는 표의 본문 영역을 그룹화합니다.
<table> 태그는 표를 만들 때 사용합니다. 테이블은
테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는
테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을
준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은
적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기
위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등
여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해
<caption>을 사용하고 셀 요소를 그룹화하기 위해
<colgroup>과 <col>을 사용합니다. 테이블 전체
구조를 분리하기 위해 <thead>, <tbody>,
<tfoot>를 사용하며, 행과 열을 나타내는 <tr>,
<td> <th> 등을 사용합니다. 여기에 접근성을 위해
scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을
사용하게 됩니다.
|
| <td> |
<td> 태그는 표의 열(셀)을 설정합니다. <table>
태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는
셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서
레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는
테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다.
테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀,
셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.
테이블은 제목을 표시하기 위해 <caption>을 사용하고 셀
요소를 그룹화하기 위해 <colgroup>과 <col>을
사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>,
<tbody>, <tfoot>를 사용하며, 행과 열을 나타내는
<tr>, <td> <th> 등을 사용합니다. 여기에
접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과
rowspan을 사용하게 됩니다.
|
| <template> |
<template> 태그는 페이지가 로드 될 때 렌더링되지 않고
자바스크립트를 이용하여 HTML을 표현해주는 태그입니다. 템플릿을
설정하고 내용은 스크립트를 통해 처리하는 방식입니다.
|
| <textarea> |
<textarea> 태그는 여러줄의 텍스트를 편집할 수 있습니다.
코멘트 또는 피드백 양식으로 크기와 여러가지 속성을 설정할 수
있습니다. 접근성을 위해 <label> 요소를 같이 사용하며,
서버에 전송하기 위해 name 속성도 같이 사용합니다. row와 col
속성을 사용하면 텍스트 영역을 지원할 수 있으며, 브라우저마다
기본 값이 다를 수 있습니다. maxlength 속성을 이용하면 최대
문자수와 최소 문자수를 지정할 수 있으며, 필수 요소인 경우
필수요소로 설정할 수 있습니다. wrap 속성은 글의 줄바꿈을
설정할 수 있으며, placeholder를 이용하면 텍스트 영역의
미리보기 힌트 글자를 설정 할 수 있습니다.
|
| <tfoot> |
<tfoot> 태그는 표의 푸터 영역을 그룹화합니다.
<table> 태그는 표를 만들 때 사용합니다. 테이블은
테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는
테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을
준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은
적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기
위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등
여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해
<caption>을 사용하고 셀 요소를 그룹화하기 위해
<colgroup>과 <col>을 사용합니다. 테이블 전체
구조를 분리하기 위해 <thead>, <tbody>,
<tfoot>를 사용하며, 행과 열을 나타내는 <tr>,
<td> <th> 등을 사용합니다. 여기에 접근성을 위해
scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을
사용하게 됩니다.
|
| <th> |
<th> 태그는 행이나 열에 타이틀을 설정합니다.
<table> 태그는 표를 만들 때 사용합니다. 테이블은
테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는
테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을
준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은
적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기
위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등
여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해
<caption>을 사용하고 셀 요소를 그룹화하기 위해
<colgroup>과 <col>을 사용합니다. 테이블 전체
구조를 분리하기 위해 <thead>, <tbody>,
<tfoot>를 사용하며, 행과 열을 나타내는 <tr>,
<td> <th> 등을 사용합니다. 여기에 접근성을 위해
scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을
사용하게 됩니다.
|
| <thead> |
<thead> 태그는 표의 헤더 영역을 그룹화합니다.
<table> 태그는 표를 만들 때 사용합니다. 테이블은
테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는
테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을
준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은
적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기
위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등
여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해
<caption>을 사용하고 셀 요소를 그룹화하기 위해
<colgroup>과 <col>을 사용합니다. 테이블 전체
구조를 분리하기 위해 <thead>, <tbody>,
<tfoot>를 사용하며, 행과 열을 나타내는 <tr>,
<td> <th> 등을 사용합니다. 여기에 접근성을 위해
scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을
사용하게 됩니다.
|
| <time> |
<time> 태그는 시간의 특정 기간을 나타낼 때 사용합니다.
날짜를 인식하기 위해서는 datetime 속성을 같이 사용하며 엔진
결과나 알림 같은 기능을 개선 할 수 있습니다. 시간은 24시간을
기준으로 설정하며 날짜는 그레고리력(Gregorian calendar)을
기준으로 표현합니다.
|
| <title> |
<title> 태그는 브라우저의 제목 또는 탭에 표시되는 문서의
제목을 표시합니다. 타이틀에는 텍스트만 설정할 수 있으며,
태그들은 무시됩니다. 웹 사이트의 가장 중요한 제목을 표시하며,
검색에 있어서도 가장 중요한 부분입니다. 제목은 검색 결과
페이지를 나열하는 순서를 결정하는데 가장 중요한 구성요소이며,
독자의 주의를 끌 수 있는 가장 중요한 부분입니다. 그래서 독자의
주의를 표시하기 위하며 의미 없는 단어의 작업은 검색에 있어
효율적이지 못하며, 한 단어 또는 두 단어의 제목도 피하는게
좋습니다. 검색 엔진은 일반적으로 페이지에 제목 중 50~60자
정도만 표시해 줍니다. 그래서 그 이상 쓰는 것도 좋지 않습니다.
그 이후의 글자는 생략 될 수 도 있습니다. 자신의 사이트 내에서
가장 핵심적인 부분만 제목으로 설정하는게 좋으며, 중복적으로
사용하는 것도 검색결과를 부정확하게 만들 수 있으므로 가장
중요한 제목은 한번 정도가 핵심적으로 사용하는 것이 좋습니다.
|
| <tr> |
<tr> 태그는 표의 행을 설정합니다. <table> 태그는
표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과
열로 구성된 정보표입니다. 예전에는 테이블을 이용해서
레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는
테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다.
테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀,
셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.
테이블은 제목을 표시하기 위해 <caption>을 사용하고 셀
요소를 그룹화하기 위해 <colgroup>과 <col>을
사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>,
<tbody>, <tfoot>를 사용하며, 행과 열을 나타내는
<tr>, <td> <th> 등을 사용합니다. 여기에
접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과
rowspan을 사용하게 됩니다.
|
| <track> |
<track> 태그는 <video> 태그와 <audio> 태그의
자막을 설정합니다. 자막은 vvt 파일을 이용하여 사용합니다.
|
| <tt> |
<tt> 태그는 타자모양의 텍스트를 보여주기 위한
태그입니다. HTML5에서 지원하지 않으며, 지금은 사용하지 않는
태그입니다. 구버전의 브라우저에서는 작동 될 수 있지만 최신
브라우저에서는 지원되지 않을 수 있습니다. 사용을 권하지
않습니다. 소스코드를 텍스트를 표현하고 싶다면 <code>,
프로그램 변수 텍스트를 표현하고 싶다면 <var>, 프로그램
출력결과 텍스트를 표현하고 싶다면 <samp>, 키보드
텍스트를 표현하고 싶다면 <kbd> 태그를 사용합니다.
디자인적인 요소를 위함이라면 CSS를 사용합니다.
|
| <u> |
<u> 태그는 HTML4에서는 밑줄을 표시하기 위해서
사용하였습니다. 하지만 밑줄 기능은 CSS로 충분히 표현 가능하기
때문에 더 이상 사용하지 않게 되었습니다. HTML5에서는 철자 오류
및 주석 표시를 위한 태그로 의미가 변경되었습니다. 이 태그는
밑줄을 표시하기 위한 디자인적인 요소로 사용하면 안됩니다. 철자
오류 및 주석 표시를 위한 태그입니다. 밑줄을 표시하기
위함이라면 text-decoration 속성을 이용하면 됩니다. <u>
태그는 철자 오류가 포함된 단락을 표시하며, 빨간색 물결 밑줄
스타일로 오류를 표시합니다.
|
| <ul> |
<ul> 일반적인 글이나 문장을 쓴다면 <p> 태그를
사용합니다. <ul> 태그는 일반적인 글 보다는 목록 형식의
글을 사용할 때 씁니다. 목록을 쓸 때 순서가 상관이 없다면
<ul> 태그를 사용하며, 순서가 상관이 있다면 <ol>
태그를 사용합니다. 무엇인가를 설명하고 정의할 때는 <dl>
태그를 사용합니다. 목록형 태그에는 각각의 항목이 있기 때문에
이 때에는 <li> 태그를 같이 사용해야 합니다. <dl>
태그의 경우에는 <dt> 또는 <dd>를 같이 사용합니다.
<li> 태그 안에는 또 다른 <ul> 태그 또는 <ol>
태그가 올 수 있으며, 2단 3단 목록형 태그로도 사용가능합니다.
목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과,
사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도
생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서
설정이 가능합니다.
|
| <var> |
<var> 태그는 수학적인 변수나 프로그램의 변수를 쓸 때
사용합니다. 일반적으로 기울기체로 표시되지만 브라우저마다
다릅니다.
|
| <video> |
<video> 웹 문서에 동영상을 재생하는 미디어
플레이어입니다. 비디오의 너비와 정보를 지정하고 여러가지
속성을 지정할 수 있습니다. 비디오를 지원하는 파일은 mp4, webM,
avi, ogg가 있으며, 브라우저마다 지원하는 파일이 다릅니다. 모든
브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에
사용하여야 합니다. <source> 태그를 사용하여 비디오
파일을 불러올 수 있습니다.
|
| <wbr> |
<wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다.
<wbr> 태그의 사용은 제한적입니다. 일반적인 한글이나
영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수
없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이
안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의
줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break
속성을 사용합니다.
|