이것저것 공부노트

HTML5와 태그 정리 본문

IT

HTML5와 태그 정리

avalanche 2017. 11. 25. 21:11

HTML

hypertext Markup Language


- 웹 문서를 기술하기 위해 사용되는 국제 표준언어이다.

- 마크업(Markup) 언어로서 태그(Tag)를 사용하여 데이터의 구조를 표현한다.

- HTML 문서는 ASCII코드로 구성된 일반적인 텍스트 형태이다.

- HTML 문서는 일반 에디터(메모장), 워드프로세서, 홈페이지 제작 도구를 통해 작성한다.

- HTML 문서 확장명은 .htm 또는 .html이다.


HTML 문서의 구조

- HTML 문서의 구조는 <Html>태그로 시작해서 </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> 

 글자를 굵은 글씨체로 처리 

<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> 

 이미지 삽입 

<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를 넣을 수 있는 입력상자를 만듦


저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

디자인포트폴리오사이트 - 웹디자인 벤치마킹 사이트  (0) 2017.12.06
초등 코딩교육이란  (0) 2017.11.29
멘탈모델/애자일 UX 디자인  (0) 2017.11.25
워드프레스 기초강좌  (0) 2017.11.19
3DSMAX 기본 인터페이스 1  (0) 2016.10.15
공유하기 링크
'IT' Related Articles more
Comments