HTML 4.01 tag
HTML & CSS & JS 2015. 6. 22. 10:58html 태그는 "<"로 시작하여 ">"로 끝난다.
대부분의 태그는 동일한 태그 명 앞에 "/" 문자를 붙여 종료를 알린다.
줄바꿈 태그 <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 |