티스토리 뷰
HTML
hypertext Markup Language
- 웹 문서를 기술하기 위해 사용되는 국제 표준언어이다.
- 마크업(Markup) 언어로서 태그(Tag)를 사용하여 데이터의 구조를 표현한다.
- HTML 문서는 ASCII코드로 구성된 일반적인 텍스트 형태이다.
- HTML 문서는 일반 에디터(메모장), 워드프로세서, 홈페이지 제작 도구를 통해 작성한다.
HTML 문서의 구조
- HTML 문서의 구조는 <Html>태그로 시작해서 </html> 태그로 종료한다.
<!DOCTYPE html> <html> - html 문서 시작 <head> - 머리 (헤드)시작 <title>문서의 제목</title> - 문서 제목 시작/끝 </head> - 머리(헤드)끝 <body> -몸체(본문)시작 문서의 내용 </body> - 몸체(본문)끝 </html> -html 문서 끝
|
HTML 태그
태그의 사용
- 태그는 시작 태그와 종료 태그가 한 쌍을 이루어 사용된다.
- 종료 태그가 없는 태그도 있다.
- 태그 이름은 대소문자를 구별하지 않는다.
- 줄바꿈이나 빈칸을 인식하지 못하기 때문에 줄바꿈과 빈칸을 위해 지정된 태그를 사용하여 표현한다.
HEAD 부분 관련 태그
<head></head> | 문서 자체에 대한 설명 |
<title></title> | 웹브라우저 제목 표시줄에 문서의 제목을 나타냄 |
<meta> | Html 문서의 일반 정보 예) 작성자, 검색키워드, 문서 파기일자 등 |
문단 관련 태그
<body></body> | 본문(몸체)의 시작과 끝 지정 |
<hr> | 수평선 속성 : size, width, align 등 |
<br> | 줄바꿈 |
<p></p> | 문단바꿈 |
<center></center> | 가운데 정렬 |
<div></div> | 문서를 구분하여 문단별로 정렬 |
<body>태그 속성
<body bgcolor="#ffffff" background="bg1.jpg" text="#0000000"> bgcolor : 문서배경색 background : 문서 배경 이미지 text : 문서 기본 글자색 |
목록 관련 태그
<ul></ul> | 순서가 없는 기호 목록 작성 |
<ol></ol> | 순서가 있는 숫자 목록 작성 |
<li> | 목록 각각의 내용 정의 |
<dl></dl> | 용어에 대한 정의 목록 |
<dt></dt> | 용어의 제목 |
<dd></dd> | 용어의 내용 |
글자 관련 태그
<hn></hn> | 제목 글자를 표현, n값은 1~6까지이며 작을 수록 큰 글자로 나타냄 |
<font></font> | 글자의 크기와 모양을 지정 |
<!-- --!> | 주석문 처리 <!--여기는 주석문입니다.--!> |
<i></i> | 글자를 이탤릭체로 처리 |
<b></b> | 글자를 굵은 글씨체로 처리 |
<strong></strong> | 글자를 강조하며 굵은 글씨체로 처리 |
<u></u> | 글자에 밑줄을 나타냄 |
<sup></sup> | 글자를 위첨자로 나타냄 |
<sub></sub> | 글자를 아래첨자로 나타냄 |
<strike></strike> | 글자에 취소선을 나타냄 |
<cite></cite> | 글자를 인용문으로 표현 |
<code></code> | 프로그램 소스 코드를 나타낼 때 사용 |
멀티미디어 삽입 관련 태그
<a></a> | 문서, 이미지 등을 하이퍼링크로 연결 |
<embed></embed> | 멀티미디어 개체 삽입 (mp3,wma,swf등) |
<object></object> | 멀티미디어 개체 삽입(플레이어를 지정, Actice X, Quick time 등) |
<img> | 이미지 삽입 src속성을 통해 위치입력 |
<map></map> | 이미지맵 작성 |
<area> | 이미지맵 안에서 영역 분할 / circle(원), poly(다각형),rect(사각형) |
<applet></applet> | 자바 애플릿 삽입 |
<A>태그 herf 속성
<A herf="http://hanipf.com" target="_blank"> _blank : 새로운 창에 링크가 나타남 _self: 현재 창에 링크가 나타남 _parent : 현재 창 이전에 상위 프레임에 링크가 나타남 _top : 현재 창의 최상위 창에 링크가 나타남 |
표 관련 태그
<table></table> | 표의 시작과 끝을 의미하는 태그 |
<tr></tr> | 표에서 행을 만듦(가로 분할) |
<td></td> | 표에서 열을 만듦(세로 분할) |
<th></th> | <td>와 동일하나, 제목과 관련된 내용일때 사용 |
<caption></caption> | 표 제목(캡션)표시 |
<table> 태그 속성
<table width:"400", border="1" cellpadding="0" cellspacing="0"> width : 표 너비 border : 표 테두리 두께 cellpadding: 셀과 셀 내용 사이의 간격(셀 내부 두께) cellspacing: 셀과 셀 사이의 간격 |
프레임 관련 태그
<frameset></frameset> | 문서를 프레임으로 분할 |
<frame> | 각 분할된 프레임창에 속성을 지정 |
<iframe></iframe> | html문서 내의 일부분만 프레임으로 분할 |
<frameset>태그 속성
<frameset rows="100", border="0"> <frameset cols="20%,80%> rows: 프레임을 행으로 나눔 cols: 프레임을 열로 나눔 border : 프레임 경계선 크기 지정(0이면 안보임) 분할 정도 값: 픽셀 수, 백분율(%),상대 비율(*) |
<frame> 태그 속성
<frame src="left.htm" name="left" scrolling"no" noresize> src: 해당 프레임에 표시된 문서의 경로 name: 프레임 이름 지정 scrolling: 창의 스크롤바 표시 여부 지정 noresize: 프레임 크기 변경 금지 |
문서 양식 태그
<form></form> | 입력 양식 만듦 (cgi프로그램으로 데이터 전달) |
<input> | 선택양식 지정 (라디오 버튼, 체크 박스) |
<select></select> | 선택 리스트를 만듦 |
<textarea></textarea> | 2줄 이상의 text를 넣을 수 있는 입력상자를 만듦 |
출처: http://avalangche.tistory.com/64 [이것저것 공부노트]
'HTML+CSS' 카테고리의 다른 글
| [CSS]반응형 웹 media query (0) | 2019.01.05 |
|---|---|
| [CSS]CSS 박스 모델 (0) | 2019.01.05 |
- Total
- Today
- Yesterday