출처: http://mythmist.tistory.com/100
※ 직접 작성한거 아님~_~ 인터넷 돌아다니다가 이것저것 퍼다 긁어놓은거임. 주소를 잊어버려서 그냥 글적이게 되었삼. 정리해주신분에게 다시
한번 감사의 마음을 _(_ _)_ 꾸벅.
<html> : 이 문서가 html이라는 것을 알려준다.
<head> : 어떠한 속성 설정
<title> : 브라우저의 창 제목 <head> 안의 속성이며 <body>와 따로 쓰인다
<br> : 줄바꿈 태그 , 여러 번 쓴만큼 줄을 바꾼다.
<p> : 문단 나눔 태그, 여러 번 써도 한번만 적용된다.
align : 정렬 속성(left , center , right)
<p align="right">오른쪽~~ </p>
<body bgcolor="yellow" text="black" leftmargin=100 topmargin=100>
<body> : 본문의 실질적인 내용 출력
bgcolor : 배경색 background : 배경 이미지
text : 본문 글자 색 link : 링크 색
vlink : 방문한 링크 색 alink : 클릭하는 순간 링크 색
leftmargin : 왼쪽 여백 rightmargin : 오른쪽 여백
------------------------------------------------------------------------------------------------
<hr> : 수평선 자동 줄바꿈 효과가 적용되어있다
<!-- 내용 --> : 주석
: 글자와 글자 사이의 공백
------------------------------------------------------------------------------------------------
<hr size=3 align="left" color="red">
<hr size=2 noshade>: 음영이 없는 수평선
<hr size =5 width="400" align="right">: 선의 수평길이를 설정하겠습니다.
<hr size=5 width="50%" align="right"> :수평선을 정렬해 보겠습니다.
------------------------------------------------------------------------------------------------
글자 관련
<hn> 태그 : 글자 크기
<h1> 가장 큰 글자 크기 ~ <h6> 가장 작은 글자 크기
<address> : 주소, 약간 기울어져 출력
<font> : 글자 꾸미기
size : 값은 1~7 color : 글자의 색 face : 글꼴
------------------------------------------------------------------------------------------------
<font size=4 color="green" face="궁서체">OJT KOREA FIGHTING</font>
------------------------------------------------------------------------------------------------
<B> : 글자 굵게
<I> : 이텔릭체
<U> : 밑줄
<TT> : 타이프체
<SMALL> : 현재 글자보다 한단계 작게
<BIG> : 현재 글자보다 한단계 크게
<STRONG> : 글자를 강조.. 두껍게 함
<S> : 취소선 넣기
<EM> : 글자 강조+이텔릭
<SUB> : 아래첨자
<SUP> : 위첨자
------------------------------------------------------------------------------------------------
<PRE> 태그 : 에디터에서 작성한 내용을 그대로 출력
<XMP> 태그 : 에디터에서 작성한 내용,태그를 그대로 출력
------------------------------------------------------------------------------------------------
<PRE> 태그는 내용만 html문서에서 작성한 내용이 그대로 출력되지만
<XMP> 태그는 내용과 태그 자체가 모두 출력된다.
<OL> 태그 : 순서 있는 목록을 표시
start : 시작 번호 설정
type : a, 1, A, ......
<li> : 하위 태그
<UL> 태그 : 순서 없는 목록을 표시
type : circle, square, disc
<li> : 하위 태그
------------------------------------------------------------------------------------------------
<html>
<head><title>목록 보여주기 예제</title></head>
<body>
<h1>금주의 인기 강사 순위</h1>
<ol type=a start=1 >
<li>A 강사</li>
<li>B 강사</li>
<li>C 강사</li>
</ol>
<h1>점심 메뉴표</h1>
<ul type="square">
<li>짬뽕</li>
<li>짜장면</li>
<li>갈비탕</li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------
<IMG> : 이미지 삽입
align : 화면상 이미지 정렬
src : 보여줄 이미지의 주소
width : 이미지의 넓이
height : 이미지의 높이
alt : 마우스를 이미지에 올려 놓았을 때 풍선도움말의 내용
border : 이미지 두께
align = (top , middle , bottom) 이미지 옆의 텍스트 정렬 위치
vspace : 이미지와 다른 내용과의 위아래 여백
hspace : 이미지와 다른 내용과의 좌우 여백
<img src="sub.jpg" width=100 height=100 border=10 vspace=200 hspace=200 align="top">위아래 정렬을 테스트 하는 텍스트
------------------------------------------------------------------------------------------------
<a href="주소">
절대주소 : 주소란에 ( c:\aaa\a.html ) 라고 입력
상대주소 : 자기 자신 파일이 있는 위치(같은 폴더)에서 상대적으로 주소를 지정
../ : 자기 자신 경로에서 한단계 위의 상대주소
./ : 자기 자신의 경로인 상대주소
<a name= " 책갈피 이름"> : 책갈피를 지정할 위치의 이름 지정
<a href="#책갈피이름"> : 지정한 책갈피 위치로 링크
------------------------------------------------------------------------------------------------
<bgsound src= "경로"> : 배경음악
<embed src="경로"> : 플레이어이용한 음악
hidden : 재생기 보이기위한 설정 true, false
width, height : 재생기 크기
loop =1 무한 반복
------------------------------------------------------------------------------------------------
<embed src="ding.wav" hidden="false" width="400" height="400" loop=1>
------------------------------------------------------------------------------------------------
<table> : 표생성 태그 속성
width : 테이블 넓이
height : 테이블 높이
bgcolor : 표 색상
background : 표에 배경그림 넣기
align : 표 정렬
cellpadding : 셀 테두리와 셀의 실질적인 내용과의 간격
cellspacing : 셀과 셀 사이의 간격
align, valign : 셀 내용의 수평, 수직 정렬
border : 표의 테두리 설정
<td> 한행 속성
colspan : 양 옆 셀을 합친다.
rowspan : 위아래의 셀을 합친다.
<tr> 한 줄
<th> : 셀의 내용이 중앙에 출력되면서 두껍게 출력 , 표의 제목셀
------------------------------------------------------------------------------------------------
<table align="center" border="10" background="back.gif" cellspacing="4" cellpadding="10">
<tr>
<th>음식종류</th>
</tr>
<tr>
<td width="200" align="right" valign="top">한식</td><td width="200">중식</td>
</tr>
</table>
------------------------------------------------------------------------------------------------
<marquee> : 움직이는 내용 출력
direction : 글씨가 움직이는 방향
loop : 마퀴 태그가 실행되는 횟수
scrollamount : 속도 지정( 숫자가 클수록 빠르다)
scrolldelay : 속도지정( 숫자가 클수록 느리다)
behavior = alternate : 글씨 왕복설정 , right는 오른쪽 이동 up은 위로 이동…
width : 글씨 좌우 폭
height : 글씨 상하 폭
bgcolor : 글씨가 움직이는 영역의 배경색 지정
------------------------------------------------------------------------------------------------
<marquee direction="down" behavior="alternate">I Love You</marquee
------------------------------------------------------------------------------------------------
<frame> 태그 : 프레임 나누기
rows : 화면을 가로(상하)로 나누기
cols : 화면을 세로(좌우)로 나누기 (cols="30%,70%")
frameborder =0,1 : 프레임 사이의 구분선 표시 여부
framespacing : 프레임 간의 간격 조절
name : 프레임 이름지정
noresize : 프레임의 크기 조절
scrolling : auto,yes,no 스크롤 속성
marginwidth : 프레임의 좌우 경계와 내용과의 간격
marginheight : 프레임의 상하 경계와 프레임 내용과의 간격
------------------------------------------------------------------------------------------------
<html>
<head>
<title>프레임 속성 적용하기</title>
<frameset rows="30%,70%">
<frame src="top.html" marginwidth="300" marginheight="200"
<!--noresize scrolling=yes scrolling=auto marginwidth="" marginheight=""-->
<frameset cols="30%,70%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</head>
<body>
</body>
</html>
------------------------------------------------------------------------------------------------
<iframe> : 임의적 프레임 생성, textarea와 비슷하지만 iframe은 TAG를 사용할수 있는점이 다르다
src : iframe 에 출력될 URL
name : iframe의 이름
frameborder : 프레임의 테두리 여부
align : 정렬방식
height/width : 높이, 넓이
marginwidth/marginheight : 여백
scrolling : 스크롤바 생성 여부
------------------------------------------------------------------------------------------------
<html>
<head>
<title>iframe 사용하기</title></head>
<body bgcolor="orange">
<h1>iframe 으로 이미미를 출력해 보겠습니다.</h1>
<iframe src="girl.jpg" scrolling=no
width=500 height=600 frameborder=yes align=center>bottom
</iframe>
</body>
</html>
------------------------------------------------------------------------------------------------
<form> 태그 : 데이터를 서버로 전송하는 태그
name : 폼 이름 지정
action = * . jsp : 폼태그에서 작성한 데이터를 어느 서버의 페이지로 데이터를 전송할지 결정
method = get, post : 전송 방식 get 방식은 값이 주소창에 나타나고, post방식은 단순히 주소만 나타난다.
1. 텍스트입력양식
<input type="text" name="" size= "10" maxlength="3" value = "abc ">
type=text : 한 줄 입력할 수 있는 입력양식
name : 입력양식의 이름
size : 입력 양식의 크기
maxlength : 입력양식에 입력할 수 있는 문자 수
value : 입력양식 초기값
2.암호입력양식
<input type="password" name="" size= "10" maxlength="3" value = "abc ">
type=password : 한 줄 입력할 수 있는 입력양식( 패스워드 ******* 식으로 입력된다.)
name : 입력양식의 이름
size : 입력 양식의 크기
maxlength : 입력양식에 입력할 수 있는 문자 수
value : 입력양식 초기값
3. 텍스트영역입력
<textarea name="이름" rows=13 cols=30>
rows : 택스트 영역의 행수
cols : 텍스트 영역의 열수
나머지 속성은 위와 같다
4. 체크박스양식
<input type="checkbox" name="이름" value="전송될 값" checked="on">
cheched= on : 체크박스의 초기값이 체크가 되어있는 상태
5. 라디오버튼양식
<input type="radio" name="이름" value="전송될 값" checked="on">
cheched= on : 라디오박스의 초기값이 체크가 되어있는 상태
6. 숨겨진양식
<input type="hidden" name="이름" value="전송될 값" checked="on">
입력 양식을 화면에 보여주지 않고 전송될 값을 프로그램상에서 서버로 전송하는 양식.
7. 선택양식
<select name ="이름" size="3" mutiple>
<option value="전송될 값">
<option value="전송될 값">
</select>
size : 최대 동시에 선택가능한 수
mutiple : 동시에 여러개 선택 가능
8. 이미지입력양식
<input type ="image" name ="이름" src="이미지 주소">
이미지를 클릭하면 폼 안의 모든 데이터가 서버로 전송
9. 리셋버튼
<input type="reset" value="취소">
버튼을 클릭하면 폼에 기입한 내용이 모두 지워진다.
10. 전송버튼
<input type="submit" value="확인">
폼에 기입한 내용을 서버로 전송
11.버튼양식
<input type="button" value="확인">
전송버튼이나 취소 버튼이 아닌 버튼을 생성할 때 사용
------------------------------------------------------------------------------------------------
<meta> 태그 : HTML 문서의 정보를 설정, 홈페이지를 검색엔진에서 검색하기 위한 키워드 제공, HTML 문서의 작성자 확인
<meta name="author" content=" 소류하 " >
이 문서는 소류하라는 사람이 작성했다는 정보 제공
<meta name="description" content = "what a html">
홈페이지에 대한 간단한 설명을 검색엔진에서 보여줌
<meta name="keyword" content = "html, javascript....">
content에서 제공한 키워드로 검색엔진에서 검색할 수 있게 해준다.
<meta http-equiv="refresh" content="1; url=http://blog.naver.com/battledocho">
지정한 시간 1초 내에 지정한 url로 페이지를 이동한다.
<meta http-equitv="generator" content ="EDITPLUS">
html 문서를 개발한 툴 종류를 표시해 준다.
------------------------------------------------------------------------------------------------
Style시트 : 문자나 테이블, 그림과 같은 것들의 스타일을 따로 정의해 두어서 나중에 본문에 써 먹는 것이다.
p{color:blue;text-align:right} # p 태그를 이용
<p>html selector</p> # p 태그 적용
CLASS selector : 같은 태그라도 클래스 이름 별로 다른 스타일을 적용
.aa{background-color:red;text-align:center} # aa라는 스타일의 클래스이름 지정
<p class="aa">class selector</p> # aa 클래스 적용
ID selector : #을 이름 앞에 붙여 이름별로 스타일 지정
#bbb{font-size:20pt;text-align:center;color:brown}
<p id="bbb">ID selector 사용</p?
------------------------------------------------------------------------------------------------
inline style : 특정 태그내에 스타일을 직접 정의한다.
<p style="font-size:10pt;color:red;">Inline Style</p> # 지정된 태그에만 스타일이 적용된다.
embeded style : 스타일을 정의 하고 각 selector를 이용하여 적용, HTML 정리 (19)번 내용
external file style : 스타일을 별도의 파일로 만들어서 링크를 이용하여 적용
<link rel="stylesheet" type="text/css" href="1.css">
imported style : 외부에 있는 스타일 시트 파일을 이용하여 적용
<style type="text/css">
@import url("1.css");
</style>
동시에 여러 태그 적용
h1,h2,h3,h4{color:red} <!-- # 동시에 여러 태그 적용 -->
p b {color:red} <!-- # 중첩 태그 적용 -->
------------------------------------------------------------------------------------------------
fond-size : 폰트크기
font-family : 폰트 명( 여러개로 나열하면 왼쪽폰트가 지원이 안되면 그다음 폰트가 적용된다.)
font-weight : 폰트의 두께 font-style : 폰트 모양
normal italic
oblique : 살짝 기울임효과 font-variant : 영문 대문자 만들기 속성
small-cpas : 영문 대문자 보다 약간 대문자로 표현
font-size: line-height: 사이에 / 가 들어간다.
------------------------------------------------------------------------------------------------
<STYLE TYPE="text/css">
H3 {font:normal bold 20pt/36pt 돋움, airal, 굴림; font-style:italic}
A{font-family:돋움; font-style:normal; font-size:20pt; font-weight:bold;color:red}
P{font-family:굴림, 돋움; font-size:10pt;background:red}
.aaa{font-variant:small-caps;}
</STYLE>
------------------------------------------------------------------------------------------------
Font 에 추가적으로 들어가는 속성
line-height : 텍스트의 행간의 높이 설정
숫자(1,2,...), 길이(12pt,15pt,....), 퍼센트로 표현(150%(1.5),200%(2),......)
text-decoration : 텍스트를 꾸미는 속성, 밑줄 취소선
underline : 밑줄
line-through : 취소선
brink : 깜빡거림 (넷츠케이프에서만 적용)
overline : 윗줄 ( 익스플로러에서만 적용)
text-transform : 대소문자를 변형
capitalize : 단어의 첫 문자만 대문자로 바꾼다.
uppercase : 모두 대문자로 변경
lowercase : 모두 소문자로 변경
text-align : 텍스트 정렬
left,right,center,justify(양쪽정렬)
text-indent : 들여쓰기 설정
길이(2em), 퍼센트 속성 이용
vertical-align : 수직 정렬
baseline(기본), sub(아래첨자), supper(위첨자)
letter-spacing : 문자 하나하나의 간격 설정
white-space : 단어와 단어 사이의 간격 설정
------------------------------------------------------------------------------------------------
H3 {font:normal light 16pt/36pt 돋움, helvetica;}
P {font-family:굴림, 돋움, arial; font-style:normal; font-size:10pt;}
.under {font-family:굴림, 돋움, arial; font-style:normal; font-size:20pt;
text-decoration:overline; text-align:left}
.throu {text-decoration:line-through; text-align:right;}
.indent {text-indent:2em;background-color:orange;line-height:22pt;}
.aa {color:blue; line-height:3;background-color:yellow}
------------------------------------------------------------------------------------------------
border 속성 : 일정한 영역의 테두리 두께, 모양, 색 설정하는 속성
border-style : 테두리 모양
solid,double,groove,ridge,inset,outset 의 속성이 있다.
border-width : 테두리를 각각 좌우위아래별로 설정 가능
border-left-width
border-right-width
border-top-width
border-bottom-width
border-color : 테두리 색상
border을 사용할 때는 border-style이 반드시 정의되어있어야 한다.
------------------------------------------------------------------------------------------------
background-repeat : 배경그림의 반복 설정
repeat : 상하좌우로 무한 반복하여 화면을 채운다.
repeat-x : x축으로 반복
repeat-y : y축으로 반복
no-repeat : 반복하지 않음
background-position : 이미지를 반복하지 않을 경우 그림을 어느 영역에 위치할 지 설정
right, top, left, bottom 속성이 있다.
background-attachment : 스크롤 바가 움직일 때 그림이 고정될 지 같이 움직일지를 설정
scroll : 스크롤바와 같이 움직인다.
fixed : 이미지는 고정되고 텍스트만 움직인다.
배경 그림에 대한 속성을 한 번에 정의 할 때
background-color : image : repeat : attachment : position : 를 콤마없이 이 순서대로 나열한다.
------------------------------------------------------------------------------------------------
z-index : 여러 가지 내용이나 그림을 여러 층층으로 출력 할 때 층의 순서를 정한다.
속성 값으로 정수값이 오며 숫자가 낮을 수록 뒤 쪽에 출력된다.
------------------------------------------------------------------------------------------------
#el1 {position:absolute; z-index:0; top:120px; left:100px;}
<!-- # el1이라는 ID 에 position 은 absolute라는 좌측의 상단부터 어느정도 떨어져서 위치를 설정할지 결정하는 속성 지정 z-index 는 층의 높이 순서, top,left는 왼쪽위 꼭지점부터 내용을 표시할 위치이다. -->
#el2 {position:absolute; z-index:1; top:60px; left:150px;}
#el3 {position:absolute; z-index:2; top:80px; left:80px;}
#el4 {position:absolute; z-index:3; top:0px;left:20px;}
------------------------------------------------------------------------------------------------
z-index : 여러 가지 내용이나 그림을 여러 층층으로 출력 할 때 층의 순서를 정한다.
속성 값으로 정수값이 오며 숫자가 낮을 수록 뒤 쪽에 출력된다.
A:link : 모든 링크 걸린 부분을 꾸며줌, body 태그의 link 와 같은 속성
A:visited : 방문했던 링크의 스타일
A:hover : 마우스가 링크 위에 올라갔을 때 스타일
A:active : 마우스로 링크를 누를 때 의 스타일
------------------------------------------------------------------------------------------------
이미지 맵 : 이미지의 일정한 영역에 링크를 걸 때 사용
<img src="이미지주소" usemap="#맵이름">
<map name="맵이름">
<area>
</map>
------------------------------------------------------------------------------------------------
area 속성
shape : 영역 모양( rect, circle)
coords : 좌표값
href : 링크시킬 문서 경로
alt : 문서에 대한 설명 , 마우스를 맵에 올릴경우 박스로 표시되는 곳의 내용을 표현
mailto : 링크를 누르면 아웃룩익스프레스가 실행된다.
<a href="mailto:aaa@aaa.com"> 누구에게</a>
------------------------------------------------------------------------------------------------
<img src="1.jpg" usemap="#test" border="0">
<map name="test">
<area shape="rect" coords="42,41,300,300" href="link1.html" target="_blank">
<area shape="circle" coords="43,345,100,100" href="link1.html" target="_blank">
</map>
------------------------------------------------------------------------------------------------
'WEB' 카테고리의 다른 글
| ASP 한글 인코딩 캐시 (0) | 2014.04.15 |
|---|---|
| 윈도우7용 익스플로러11(IE11)의 특징. (2) | 2013.09.25 |
| asp 연산자 조건문 관련 (0) | 2013.06.19 |
| [Asp] switch case 문 (0) | 2013.06.19 |
| [asp] 특정문자가 포함된 문자열 찾기, 문자열 길이 등등 문자열 관련 (1) | 2013.06.19 |
댓글 영역