Oasis' story

HTML 정의 및 태그 본문

Program Note/HTML/CSS

HTML 정의 및 태그

oasispapa 2015. 11. 17. 18:14

* 정의 

HTML (Hyper Text Markup Language) - 웹 상에서 Hyper Text 문서를 표현하는 일종의 언어

 

* 역사

1980년도 유럽 입자 물리 연구소(CERN)의 팀 버너스리가 엔콰이어 (HTML 원형) 제안. 연구원들의 문서 공유를 위함
1991년10월 HTML 태그가 비공식 문서를 통해 대중에게 처음 언급됨
1992년 7월 HTML 1.0 비공식 초안 공개
1992년 12월 HTML 1.1 비공식 초안 공개
1995년 11월 HTML 2.0 IETF의 RFC 1866로 발표됨
1997년 1월 HTML 3.2가 W3C 권고안으로 발표됨
1997년 12월 HTML 4.0이 W3C 권고안으로 출시됨
1999년 12월 HTML 4.01이 W3C 권고안으로 출시되며, 2001년 5월 최종 오류 수정사항이 발표됨
2008년 1월 HTML 5.0의 초안 작업이 W3C에 의해 발표됨

 

* 구분
구조적 마크업 : 문서의 구조를 나타냄 (제목, 단락, 목록 인용 등. ex-> <h1> <p>)
표현적 마크업 : 내용을 꾸밀때 사용 (ex-> <b> <i>)
하이퍼텍스트 마크업 : 다른 문서와 연결을 시킴 (ex-> <a>)

 

* 기본 태그

1. Basic 태그
<title></title> : 브라우저 창에 나타나는 제목으로 헤더 영역에 서술함
<h1~6></h1~6> : 글자 크기
<p></p>: 문단
<br/> : 한 줄 변경
<hr/> : 영역 나눔 선 출력

 

2. Formating 태그 (문장, 단어의 형식 및 의미를 나타내는 태그. 웹 브라우저 별로 표시되는 형태가 다를 수 있음. 동일하게 하려면 CSS 사

용할 것)
<acronym> : 두 문자어를 표시하는 태그. 마우스를 해당 구문에 가져가면 title 속성 값이 나타남.
<abbr> : 축약된 단어를 나타내는 태그. 마우스를 해당 구문에 가져가면 title 속성 값이 나타남.
<address> : 해당 문서의 소유자에 대한 연락처를 나타내는 태그
<em> : 강조할 구문을 표시함
<strong> : em 보다 한층 더 강조할 구문을 표시함
<dfn> : 정의를 표시함
<code> : 컴퓨터 코드를 나타냄
<samp> : 컴퓨터 코드 샘플을 표시함
<kbd> : 키보드 문자를 표시함
<var> : 문서의 변수를 나타냄
<cite> : 인용구를 나타냄
<b> : 굵은 글씨
<i> : 이탤릭체
<big> : 큰 글자
<smal> : 작은 글자
<tt> : 텔레타이프 문자
<sup> : 위 첨자
<sub> : 아래 첨자
<del> : 삭제된 단어
<ins> : 추가된 단어
<blockquote> : 긴 인용문
<q> : 짧은 인용문
<pre> : 태그 안의 내용이 공백 및 줄바꿈을 하여 출력됨. 주로 컴퓨터 프로그래밍 코드를 표현할 때 많이 사용됨. 해당 태그 안에 사용된

태그들이 적용되어 출력
<xmp> : 태그가 모두 출력. 현재 사용하지 않도록 권고됨.

** 사용하지 말도록 권고된 태그
<font> : 문자열의 폰트 종류, 크기, 색상 정의하는 태그로, <div>, <span> 등의 태그를 사용하여 문자를 꾸미도록 권고함
<u> : 해당 구문에 밑줄을 표시하는 태그로, <span> 태그의 속성중 underline 사용 권고
<strike> or <s> : 해당 구문에 취소선을 나타내는 태그로, <del> 태그 사용 권고


3. Link 태그
<a> : 문서 내/외부 특정 부분으로 이동
속성
- href : 외부 URL, 상대문서경로, 문서 내부의 특정 지점(<a href="#chapter5">챕터5 이동</a>)
- target : _blank (새창), _self (클릭이벤트 발생창), _parent (상위 frame 에서 지정한 URL), _top (최상위 frame에서 지정한 URL),

framename (해당 이름을 가진 frame에서 지정한 URL로 이동)
- name : chaper 과 같은 중간 지점으로 링크 이동하기 위해 사용
<link> : 현재 문서와 외부의 문서간의 연결 관계를 기술하는 태그. 주로 <head> 태그 안에서 CSS 의 stylesheet 문서를 연결할 때 사용.

 

4. Img 태그
<img> : 이미지를 웹페이지에 표시. src, alt 등의 필수 속성 width, height, align 등의 추가 속성
<map> : 이미지 맵을 나타냄
<area> : 이미지맵의 영역을 표시함

 

5. List 태그 (의미에 맞는 목록을 표시)
<ul> : 순서가 없는 목록을 표현. unordered list 의 약자로 중첩하여 사용이 가능. 웹 브라우저에서 정의된 순서대로 블릿 모양이 바뀌게 됨.
<li> : 실제 목록의 내용을 담고 있음. list item 의 약자.
<ol> : 순서가 있는 목록을 표현. ordered list 의 약자. 자동으로 1,2,3,4 등의 숫자가 나타남.
<dl> : 정의 목록을 만들 때 사용. definition list 의 약자
<dt> : dl 태그 안에서 리스트 아이템을 표현하는 엘리먼트. defines the item in list 의 약자
<dd> : 아이템을 설명해주는 태그

 

6. Table 태그 (문서에서 표를 만들 때 사용. 머리글, 바닥글, 본문으로 그룹 지어 내용을 표현)
<table> : 표를 만들기 위한 기본 태그.
<caption> : 테이블의 제목을 나타내는 태그. 반드시 table 태그 바로 다음에 기입한다.
<col> : 각 열에 속성을 적용할 때 사용
<colgroup> : 표의 열 그룹에 속성을 적용할 때 사용하는 태그
<thead> : 표의 머릿말 부분을 표시하는 태그. tr, th 엘리먼트를 가질 수 있음.
<tfoot> : 표의 꼬릿말 부분을 표시하는 태그. tbody 태그보다 먼저 기술되어야함.
<tbody> : 표의 내용을 담고 있는 엘리먼트. 표의 마지막 부분에 기술됨.
<tr> : 표에서 행을 나타냄. 하나 이상의 td, th 태그를 포함할 수 있음.
<td> : 내용 열을 나타냄 (데이터를 갖고 있는 최소의 엘리먼트)
<th> : 제목 열을 나타냄 (굵은 글씨고 중앙 정렬되어 표현)
table 태그의 속성
- border : 테이블의 굵기 표현 (pixcels)
- cellpadding : 테이블 셀과 셀 내용 사이의 간격 (pixcels)
- cellspacing : 테이블 셀과 테이블 셀 사이의 간격 (pixcels)
- summary : 테이블 요약 설명 (Text)
- width : 테이블 넓이 (pixcels, %)
td 태그의 속성
- align : 셀 내용 가로 정렬 (right, left, center, justify, char)
- colspan : 셀을 가로로 입력된 숫자만큼 합침 (number)
- rowspan : 셀을 세로로 입력된 숫자만큼 합침 (number)
- width : 셀의 넓이 (pixcels, %)
- heigh : 셀의 높이 (pixcels, %)
- valign : 셀 내용 세로 정렬 (top, middle, bottom, baseline)
th, tr 태그의 속성
- align : 셀 내용 가로 정렬 (right, left, center, justify, char)
- valign : 셀 내용 세로 정렬 (top, middle, bottom, baseline)

저작자표시 비영리 변경금지
'Program Note/HTML/CSS' Related Articles more