태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2007.09.19 11:49
1) Font
Font의 기본 Size : 3
Link시 : Mouse를 text에 올리면 기본색은 파란색, text(alink)를 누르면 빨간색, 한 번 방문한 text(vlink)는 보라색으로 지정


2) Body Tag
body Tag 내의 변수명
- bgcolor : 문서의 Background Color 설정
- text : 문서의 전체 Font Color 설정
- background : 문서의 Background Image 설정
- topmargin : 문서의 상단 여백 조정
- leftmargin : 문서의 좌측 여백 조정
- marginheight : Frame의 좌우 경계선과 그 안에 들어있는 내용 사이의 여백
- marginwidth : frame의 상하 경계선과 그 안에 들어있는 내용 사이의 여백

body Tag 내의 변수 설정하기
- 변수는 [body]내에 연속적으로 입력이 가능
- Color의 지정은 “#색상명”으로 입력
- margin 크기의 기준은 Pixel이므로 “Pixel 크기”로 입력
- 문서와 Browser와의 여백을 주지않고 작성할 때에는 margin의 크기는 "0"으로 입력
- 변수 설정의 예
[body bgcolor="#ccccff", text="#003399", topmargin="0", leftmargin="0", marginheight="0", marginwidth="0"]

 


객체입력
1) Text 입력 제목입력
- [hn] 제목 내용 입력 [/hn]
- n=1이 최대, n=6이 최소
- 정렬변수 : align ="left/center/right/justify"
[ example ] [h1 align="center"] 제목 내용을 입력 [/h1]

내용입력
- [font] 내용을 입력 [/font]
- 크기 변수 : size = "n" (n=7이 최대, n=1이 최소)
- 색상 변수 : color = "# 색상명"
- 폰트 변수 : face="폰트명"
- 정렬 변수 : [p align = "left/center/right" ] 내용을 입력[/p]
              [div align = "left/center/right"] 내용을 입력[/div]
[ example ]
[div align="center"][font size="2" color="#0000ff" face="굴림" ]내용을 입력[/font][/div]

 

2) Line 입력 Line은 가로(horizontal line)선 입력만 가능
- [hr] : 별도의 Close Tag가 필요하지 않음
- 크기 변수 : width="선의 길이", size = "선의 두께"
- 색상 변수 : color = "#색상명"
- 정렬 변수 : align = "left/center/right"
- 음영변수 : noshade
[ example ]
[hr align="center" width="500" size="3" color="#ff0000" noshade]

 

 

3) Image 입력
Image 입력 방법 : ex) [img src="Image 파일명"]
정렬 변수
  - 상하 정렬 valign="top/middle/bottom",
  - 좌우 정렬 align="left/center/right/baseline"
크기 변수 : width="image 넓이", height="image 높이"
두께 변수 : border="image의 테두리 두께"
주석 변수 : alt="이미지에 대한 설명"
간격 변수(Image와 Text간의 간격) : vspace="상하 간격 크기", hspace="좌우 간격 크기"
[ example ]
[img src="Image 파일명" valign="top" align="center" width="100" height="100" vspace="10" hspace="10" border="0" alt="이미지에 대한 설명"]


4) Link 및 경로 지정
Link : 다른 문서와 연결(작업 folder내에 저장)
Text Link
  - [a href="연결할 파일명이나 Site의 URL"]내용 입력[/a]
  - Font의 속성을 입력하고자 할 때 : [a href="연결할 파일명"][font size="2"]내용 입력[/font][/a]
Image Link
  - [a href="연결할 파일명"][image src="Image 파일명"][/a]
Text & Image Link
  - [a href="연결할 파일명"][image src="Image 파일명"]내용 입력[/a]
절대 경로 : 최상위 Folder에서 파일의 위치를 결정(Folder의 구분 : "/")
  - File의 위치 정보는 그대로 입력 ex) c:/folder name 1/folder name 2/파일명.htm
상대 경로
  - 동일 Folder 파일 지정 : ex) 파일명.htm
  - 상위 Folder 파일 지정 : ex) ../파일명.htm
  - 하위 Folder 파일 지정 : ex) ../폴더명/파일명.htm

 


5) Table 입력
Table Tag 입력 방법 : [table] [/table]
Table 선의 두께 : border="값"
border와 cell간 간격 : cellspacing="값"
cell의 내부 여백 : cellpadding="값"
table background color : bgcolor="색상값"
table background image : background="image의 경로 지정"

table의 제목 / 설명 입력 방법 : [caption]제목 / 설명[/caption]
Header Cell : [th]제목 입력[/th]
Data Cell : [td]내용 입력[/td]
Cell의 줄 바꿈 : [tr]내용 입력[/tr]
정렬 변수
  - 좌우 정렬 : align="left/center/right"
  - 상하 정렬 : valign="top/middle/bottom"
Cell 병합 변수
  - 행 병합 : [td rowspan=n]
  - 열 병합 : [td colspan=n]

 

 


6) Frame 입력
Frame의 구조
- Frameset은 [head]와 [body]사이에 입력

Frameset 변수 설정
- cols = 300,200,* : 300과 200간격으로 나뉘어지고, 나머지는 마지막 Frame으로 출력
- rows = *,*,* : rows의 전체를 동일한 간격으로 3등분 (단, 맨 오른쪽의 *은 scrollbar의 영역이 더해짐)
- frameborder : frame 경계선의 표시 ex) frameborder="0"(No), frameborder="1"(Yes)
- frameset border : frame과 frame의 경계선 표시 (단위는 : pixel이고, 값이 "0"이면 Frame간의 여백은 없음
- noresize : Frame 크기의 고정
- scrolling=Yes / No / Auto : Browser상에서의 Scrollbar 출력 여부
- Frame내 여백 (marginwidth : 좌우 여백, marginheight : 상하 여백)

Frameset내에서 Link
- [a href=Link될 문서 target=_self/_blank/_top/_parent][/a] (cf : target : Open될 Browser의 위치 지정)

 

 


7) Form 입력
CGI(Common Gateway Interface)
- 개념 : 외부 응용 Program(Script)을 이용하여 활용 가능한 자원을 HTTP Server에 제공하는 Interface 규약
Form의 구조
[form action="nocgi.cgi" method="post"]
[input type="text" name="변수" size=n maxiength=n]
-type="text" : 입력한 양식을 text로 처리
-type="password" : 입력한 양식을 암호 처리
-name="변수" : 입력한 다양한 text 정보를 최종 server에서 원하는 정보로 받아들이기까지의 임시 기억 장소의 이름
-size=n : 입력한 cd의 길이(n은 숫자, 단위는 byte)
-maxiength=n : 입력 가능한 글자의 수 지정

[input type="submit" value="button Name"]
- type="submit" : 입력한 정보를 server로 전송하기 위한 기능
- type="reset" : 입력한 양식의 상태 초기값

[input type="checkbox" name="변수명" value="제어값"]
-type="checkbox" : 다중 선택이 가능하도록 목록으로 만드는 기능

[input type="radio" name="변수값" value="제어값" checked]
-type="radio" : 단일 선택 기능
-checked : 미리 checkbox에 선택하는 기능

[/form]



 * type 종류
button 버튼
checkbox 체크박스
file 화일
hidden 숨기기
image 이미지
password 암호입력창
radio 라디오버튼
reset 리셋
submit 보내기
text 기본텍스트입력창


value : 텍스트입력창에 보일값
value속성 사용 type= file , checkbox , radio

src : 이미지링크
alt : 풍선말
align : 정렬 (값: left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom)
value속성 사용type= image

size : 인풋박스의 사이즈 ( hidden 타입 외 모두 사용)

disabled : 인풋택 비활성화 ( hidden 타입 외 모두 사용)

readonly : 읽기전용
maxlength : 입력문자의 최대값지정 value속성 사용type= text

name : 인풋태그 이름
value속성 사용 type= button , checkbox , file , hidden, image , password , text , radio

checked : 채크여부
value속성 사용type= checkbox , radio

accept : 화일을 받음.
value속성 사용type= file

예)

소스    
button 버튼 [input type="button" name="one" value=""]
checkbox 체크박스 [input type="checkbox" name="one" value=""]
file 화일 [input type="file" name="one" value=""]
hidden 숨기기 [input type="hidden" name="one" value=""]
image 이미지 [input type="image" src="http://www.sp.or.kr/sp2007/img/logo.gif" alt="로고임당" width="137" height="26" value=""]
password 암호입력창 [input type="password" name="one" value=""]
radio 라디오버튼 [input type="radio" name="one" value=""]
reset 리셋[input type="reset" name="one" value=""]
submit 보내기[input type="submit" name="one" value=""]
text 기본텍스트입력창[input type="text" name="one" value=""]




[form action="nocgi.cgi" method="post"]
[textarea name=변수며 cols=n rows=n]내용[/textarea]
-textarea : 방명록, 게시판, E-Mail등의 글을 입력할 수 있는 영역
-cols=n : 가로줄에 입력 가능한 글자 수
-rows=n : 세로줄의 영역 지정

[select name="변수명" size=n multiple]
[option value="제어값" selected]data1[select]
-size=n : 목록 상자에 나타나는 항목의 개수
-multiple : 다중 선택 기능(shift key를 누르고 click)
-selected : checkbox나 radio button에 사용하는 checked의 속성과 동일

[/form]
 

'웹표준 > Html' 카테고리의 다른 글

동적인 TEXTAREA  (1) 2007.09.29
img 속성  (0) 2007.09.19
Tag 몇개  (0) 2007.09.19
기본 Tag  (0) 2007.08.24
구글 검색기 달기  (0) 2007.08.21
이미지맵  (0) 2007.08.20
Posted by 고시랑

티스토리 툴바