HTML 4.01 tag

HTML & CSS & JS 2015. 6. 22. 10:58

html 태그는 "<"로 시작하여 ">"로 끝난다.
대부분의 태그는 동일한 태그 명 앞에 "/" 문자를 붙여 종료를 알린다.
줄바꿈 태그 <br> 태그와 같이 단일 개체로 된 태그는 종료해야 할 필요가 없다.
다만, XHTML(eXtensible HTML)이라는 더 엄격한 html의 경우,
<br>과 같은 자체 종료 테그에도 "/" 문자를 붙여줘야 한다.

예)

<br />

이렇게 하면 웹 페이지가 더 많은 수의 웹브라우저와 클라이언트에서 제대로 표시되고,
많은 RSS(Really Simple Syndication) 리더에서 많이 사용하는
XML(eXtensible Markup Languange) 포맷으로 더 쉽게 변환될 수 있게 된다.

 

태그 속성(tag attribute)

속성은 속성 이름과 "=" 부호 뒤에 작은따옴표나 끈따옴표로 묶여 나오는 속성 데이터로 이루어진다.
서로 다른 태그는 각각 다른 종류의 속성을 지원한다.
그러나, 모든 태그에서 지원되는 속성들도 몇가지 존재한다.

id
태그로 참조하는 객체에 이름을 부여하여 CSS나 자바스크립트에서 접근할 수 있게 한다.
class
이 객체와 다른 객체에 적용 가능한 그룹명을 지정하게 한다.
style
CSS 스타일을 객체에 적용한다.
title
어느 객체든 이름을 부여할 수 있다.
대다수의 브라우저는 마우스 커서가 해당 객체에 위치하면 툴팁을 띄워준다.

 

html 문서의 구성

<!DOCTYPE>

문서 타입 선언(Document Type Declaration) 태그이다.
사용할 수 있는 인수는 doctype.org에 나용되어 있고,
wikipedia.org/wiki/Doctype에 설명되어 있다.

 

<html> </html>

html 콘텐츠가 시작하는 위치를 알려준다.

 

<head> </head>

제목, 메타데이터, 스타일 시트 정보 등 문서에 대한 정보가 위치한다.

 

<title> </title>

웹 문서의 제목을 정의한다.

 

<meta />

문서에 대한 추가 정보를 제공한다.
<head> 바깥에 위치시킬 수 있지만 일반적으로 태크 안에 위치시킨다.

<meta name='viewport' content='width=980' />

뷰포인트(Viewpoint) 설정으로 애플, 안드로이드 폰과 같은 모바일 장치에
웹 페이지가 980픽셀 너비이므로 그 안에 뷰를 올바르게 표시하도록 알려준다.
980픽셀은 모바일 브라우저가 쉽게 다룰 수 있는 표준 너비이다.

 

<style> </style>, <link />

웹 문서에 스타일 시트를 넣는 방법으로
<style> 태그 안에 CSS를 포함시킬 수도 있고
<link />태그를 사용하여 분리된 파일을 불러올 수도 있다.

예)

<link rel='stylesheet' href='styles.css' type='text/css' />

 

<script> </script>

웹 페이지에서 사용하는 자바스크립트를 최대한 빨리 불러들일려면
<head> 영역내에 위치 시킨다. 외부 파일을 불러올 수도 있다.

예)

<script src='script.js'></script>

 

다른 파일 포함시키기

모바일 장치에 저장되면(앱 또는 책갈피 등등) 표시되는 아이콘을 알려주어야 한다.

예)

<link rel='apple-touch-icon' href='icon.png' />

위 코드는 애플과 안드로이드 장치 모두에서 동작한다.

 

<body> </body>

웹 브라우저가 표시해야 하는 모든 것들이 위치한다.

 

<!-- -->

주석

 

표제(Headings)

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

 

문단(Paragraphs)

<p> </p>

문단과 문단사이에 여백이 생성된다.

 

텍스트 강조

<b> </b> 볼드체로 표시

<big> </big> 태그 안에 위치한 텍스트를 바깥에 위치한 텍스트 보다 크게 표시

<center> </center> 텍스트를 가운데 정렬, 권장하지 않음, CSS를 사용 추천

<del> </del> 가운데 줄긋기 된 채로 표시

<em> </em> 일반적으로 이탤릭체로 표시, CSS 재정의 사용

<i> </i> 이탤릭체로 표시

<s> </s> 가운데 줄긋기 된 채로 표시, 권장하지 않음, CSS 또는 <del> 사용 추천

<small> </small> 바깥에 위치한 텍스트 보다 작게 표시

<strike> </strike> <s>와 동일

<strong> </strong> 일반적으로 볼드체로 표시, CSS 재정의 사용

<sub> </sub> 아래첨자로 표시

<sup> </sup> 윗첨자로 표시

<u> </u> 밑줄긋기된 채로 표시, 권장하지 않음, CSS 사용 추천

 

서체와 색상 바꾸기

서체와 색상을 바꾸는 태그는 모두 사용 금지되었고
CSS를 대신 사용하도록 권하고 있다.

<font> </font>

color=''
텍스트의 색상이 따옴표 안에 지시한 대로 변경, 색상 이름 또는 숫자로 표현
face=''
서체를 작은 따옴표 안에 지시한 대로 변경, 브라우저에서 사용 가능한 서체의 이름이어야 함
face="' ', "
서체를 작은따옴표 안에 지시한 대로 변경하나 없으면 큰따옴표 내의 서체로 대체됨
size=''
텍스트의 크기, 1~7 사이의 숫자로 기본값은 3, 숫자 값 앞에 +, -를 붙여 상대적 크기를 지정할 수 있음

<basefont> </basefont> <font> 태크와 동일한 속성을 갖음, 문서 전체에 영향을 주지만 표제는 영향을 받지 않음
<body>, <table>에서 배경색을 변경할 때 bgcolor=''를 사용한다.

사용할 수 있는 색상 이름
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, rad, silver, teal, white, yellow

숫자로 색상 지정하기
#으로 시작해서 6자리 16진수로 표현(#000000, #ffff00 등등), 빨강, 녹색, 파랑의 삼원색을 나타냄

 

<img />

src=''
가져올 이미지의 위치를 지정
alt=''
이미지를 표시하지 못할 경우 이미지를 설며하는 대체 텍스트
width=''
이미지의 폭
height=''
이미지의 높이, 하나의 속성만 사용하면 이미지 비율에 맞도록 나머지 값을 조절함
border=''
이미지의 테두리 두께를 설정, 테두리가 지정된 이미지는 앵커를 갖게 됨
align=''
현재 줄에서 어떻게 수직 정렬할지 지정,
top, middle, bottom, absmiddle, absbottom, left, right

 

<br clear='left' />, <br clear='right' />, <br clear='all' />

텍스트나 그 외 html 요소가 정렬된 항목의 아래를 지나가면, 좌측 혹은 우측 정렬은 취소됨
그 전에 겍체의 정렬을 제거하려 할때 사용, 정렬이 제거되면 그 다음에 나타나는 요소는 객체 아래에 위치함

 

<a> </a>

href=''
앵커가 연결될 항목을 지정
target=''
목표 문서가 불려질 요소를 지정
name=''
페이지 안에서 부여한 이름으로 링크를 사용할 수 있음
<!-- 이름 부여 --> <a name='aaa'></a>
<!-- 문서내에서 이름 위치로 이동 --> <a href='#aaa'></a>
<!-- 외부에서 문서의 이름 위치로 이동 --> <a href='http://...#aaa></a>

 

<table> </table>

align=''
텍스트의 정렬, 권장하지 않음, CSS를 사용
bgcolor=''
표의 배경 색 지정, 권장하지 않음, CSS를 사용
border=''
표의 테두리 두께를 지정
cellpadding=''
각 셀 테두리와 내용 사이의 여백, 픽셀로 지정
cellspacing=''
표 전체 테두리와 셀 사이의 여백, 픽셀로 지정
width=''
표의 폭
height=''
표의 높이
<caption> </caption>
표와 같은 너비로 설명을 붙임
<tr> </tr>
행을 정의
<th> </th>
해당 셀이 제목임을 알려줌
<td> </td>
한 행 안에 들어갈 각각의 셀(열)을 생성

 

<ol> </ol>, <ul> </ul>

목록으로 정렬된 목록은 <ol>, 정렬되지 않은 목록은 <ul> 태그를 사용한다.

start=''
정렬된 목록은 기본값 1로 시작하여 다음 항목에는 다음 숫자가 붙는다. 시작값을 지정한다.
type=''
정렬된 목록은 기본값으로 숫자를 붙이는데, A, a, I, i를 사용하여 표기를 바꿀 수 있다.
정렬되지 않은 목록은 disc(기본값), square, circle 순으로 반복해서 하위 목록을 표시한다.
<li> </li>
목록 내 각 항목을 감싸준다.

 

<dl> </dl>

정의 목차, 목차 원소 앞에 심벌을 붙이는 대신, 단어나 구가 사용되고 그 다음 목차 원소로 이를 정의한다.

<dt> </dt>
심벌을 대신할 단어 또는 구
<dd> </dd>
단어 또는 구를 정의할 내용

 

<form> </form>

사용자가 데이터를 웹사이트에 전달하는 일반적인 방법

method=''
post, get 값을 사용
get을 사용하면 데이터가 html 요청 뒤에 ?와 함께 나타나고 이는 쿼리 스트링이라고 한다
이 방식을 사용하면 웹 서버 대신에 로컬 자바스크립트 프로그램에 폼을 포스팅할 수 있다.
action=''
폼이 전송될 url을 담는다. get방식으로 요청하면 url 뒤에 ?와 폼 데이터가 붙는다.

 

<input />

type=''
text
텍스트를 입력하기 적합한 입력 필드를 생성한다.
password
패스워드를 입력하기 적합한 입력 필드를 생성, 문자를 *로 바뀌어 표시됨
radio
라디오 버튼, 원형
checkbox
체크 박스, 사각
hidden
사용자에게 보여지지 않아야 하는 경우 지정
submit
전송할 버튼을 생성, Submit 또는 Submit Query라고 표시
value=''
필드에 기본값을 부여, type='hidden' 속성과 함께 사용하면 추적 데이터나 숨김 데이터를 포스팅할 때 유용
size=''
입력 필드의 너비를 지정
maxlength=''
입력할 수 있는 최대 문자 수를 지정

 

<textarea> </textarea>

텍스트를 여러 줄에 걸쳐 입력할 수 있는 영역을 생성

rows=''
표시할 줄의 수
cols=''
표시할 열의 수

 

<select> </select>

드롭다운 리스트를 생성, 포스팅된 데이터를 구별할 수 있도록 태그에 이름을 부여해야 함
선택된 값은 소문자로 포스팅되며, 필드 이름도 함께 전송된다.

name=''
이름 부여
<option> </option>
선택할 옵션들을 배치
value=''
옵션의 이름 지정
selected="selected"
선택할 옵션들 중에서 기본값을 지정

 

<button> </button>

클릭 가능한 버튼을 표시, 추천하지 않음, 브라우저마다 다른 값을 전송하여 일관성 있게 사용하기 어려움

 

<label> </label>

크기가 작은 라디오 버튼 또는 체크 박스를 사용할 때 유용, 텍스트와 함께 배치시 텍스트를 클릭하여 선택 및 해제가 가능함

<input />
type=''
name=''
value=''

 

<div> </div>, <span> </span>

표의 셀을 사용하는 것과 유사하게 요소를 그룹지울 수 있다.
주된 용도는 포함된 요소들을 스타일 시트를 사용해 한 번에 조작하는 것이다.
<div> 태그는 블록 요소라는 것을 만드는데, 기본적으로 너비가 브라우저의
우측 끝까지 차지하여 뒤따르는 요소는 다음 줄에 나타나게 한다.
사각형 형태로 사방의 면을 갖는다.
<span> 태그는 텍스트 내 인라인 요소를 만들어 주므로
텍스트 내 일부에 스타일을 적용할 경우 적합하다.

 

<frameset> </frameset>

가장 추천하지 않는 방법, 웹 페이지를 여러 파트로 나눠서 배치

 

<noframes> </noframes>

브라우저에서 프레임을 지원하지 않는 경우 표시할 콘텐츠를 제공
예)

<frameset cols='20%, *, 20%'>
    <frame src='header.html' />
    <frame src='body.html' />
    <frame src='footer.html' />
    </frameset>
<noframes> <!-- Alternative content goes here --> </noframes>

 

<iframe> </iframe>

프레임을 이미지처럼 배치할 수 있음
예)

<iframe src='frame.html' width='200' height='200'></iframe>

'HTML & CSS & JS' 카테고리의 다른 글

html color code 색상 코드  (0) 2015.06.23
xml 스키마  (0) 2015.06.23
HTML XML 문서 형식 선언  (0) 2015.06.22
XML DTD 선언  (2) 2015.06.22
XML 문서 규칙  (0) 2015.06.22
: