웹마스터 팁

게시판 관리자에 의해서 본문 내용이 수정 되었습니다!(통신어체 관련)

★input태그가 안먹는군요,, 글상자를 보실분들은

http://mytale.cafe24.com/zeroboard/input.htm

으로 가셔서 보시길,, 죄송해요^-^,,★


왠만하면 출처는 밝혀 주세요 ^-^,,
테일(zolazolazola@sayclub.com)입니다,,ㅋㅋ


안녕하시와요^-^,, 테일입니다,, 음,,
글상자속성과 스타일 태그에 대해서
하나 하나,,^-^,,
우선 기본적인 속성부터,,


1.폼이름 nzeoform
글상자
타입
text
이름 nzeotext기본표시되는값
글상자속성11
최대타이핑 10너비
12


name="nzeoform">
type="text" name="nzeotext"
value="글상자속성11"maxlength="10"
size="12">


우선,, 보통 HTML에서 개체의 이름은 name입니다. 눈에 보이는
것이 아니라,,
개체 제어를 위해 주어지는 값이라고 보면 되겠습니다.


그 다음 글상자(input)의 타입이 text라는 것은 입력시 text로
표시된다는 뜻입니다.
이 외에 password와 file이 있는데,, password는 보통 로그인시
암호를 뜻하는데,,
초기값과 입력값 모두 별 모양으로 표시됩니다,
file은
파일주소를 입력받는 란으로 '찾아보기'가 뜨며 초기값은 무용지물,,


그리고 value는 위에서 말했던 초기값입니다. 처음에 아무것도
타이핑 하지 않았을때
글상자속성11 으로 보이게 한다는 것이지요.


maxlength란 최대로 타이핑 할 수 있는 문자수이며 size는 말
그대로 너비입니다.
maxlength와 size는 value값에 영향을 줄 수도 있습니다,,


결과는 아래와 같군요,


2.글상자스타일-
글상자의 스타일 표시 방법은 다른 개체들과
비슷하지요,,
위에서 보이는 input 태그 사이에 style="스타일:값; 스타일:값;"
형태로 넣어주면 됩니다.


3.글상자스타일 - 테두리
우선 테두리를 없애보도록 하겠습니다.
style="border-width:0px;"
간단하지요?
테두리의 두께를 0 으로 해놓으면 두께가 사라집니다..
<-글상자같지
않죠? 사실 글상자입니다,,


그다음엔 두께를 준 상태에서 여러 가지 스타일을 보여드릴께요,,
칸만 바꾸면 되니깐,,
예제만 보여드리고 칸내에 채울 것만,,(테두리의 색깔은
검정이구요,,)
border-color:black;
 <- 우선 색깔을 주시구요,,
border-style:스타일명;   <-
이렇게 테두리 스타일을 주는겁니다^-^





우선 solid는 그냥 선,, dotted와 dashed는 모두 점선인데,, 차이가
안나는 듯 보이죠?
하지만 아까 보여드린 두께를 2px로 주면 차이가 난답니다.
보실래요?




대략 명확하게 보이시리라,,


4.글상자스타일 - 색깔/배경/기타
그다음에 색깔을 넣어볼까요ㅇㅅㅇ?
우선 테두리 색깔은 3에서 봤구요,,

color:
yellow;
background-color:black; 
color는 글상자내 글씨를 뜻하고 background-color
는 글상자 배경색 입니다.
이런식으로 다양한 색상을 넣을 수 있겠죠^-^,,
그리고
배경을 넣어볼께요,, 아이콘을 이용해보도록 하죠,,
네이버에서 이쁜 아이콘을
가져왔어요. 이렇게,,
(마우스를 갖다대면 주소가 나와요,,)

http://bingoimage.naver.com/data2/bingo_40/imgbingo_82/jj7606/16055/jj7606_29.gif 


이쁜 아이콘을 넣은 글상자를 만들어보죠. 글씨도 크게 해보구요^0^,,


style="font-size:18pt; color:black; text-decoration:underline;
background-image:url('그림주소');"
우선
font-size로 글씨 크기를 올렸습니다. 그다음 text-decoration에 underline으로
밑줄을
넣은거구요,,
포인트는 배경넣기,, 배경넣는 방법은 아까 그 그림의 주소를 그림주소
란에
넣으면 되는 겁니다. 쉽죠?


5.종합
종합해볼께요,,

name="merong">★폼의시작과
이름설정,, 임의의 이름은 메롱

★글상자 시작알림
┗┗
type="text"
★표시형태(타입)을 text로 설정
┗┗
name="all"
★임의의 이름은 all,,
┗┗
value="종합해보았습니다"
★초기입력값을 설정,,
┗┗
maxlength="15"
★최대타이핑문자수는 15,,
┗┗
size="20"
★가로너비가 20이고
┗┗
style="
★스타일 시작
┗┗┗
font-size:15pt;
★글상자내 글씨 크기는 15포인트고,,
┗┗┗
color:blue;
★그 글씨의 색깔은 파랑
┗┗┗
text-decoration:underline;
★또 그 글씨에 밑줄을 긋도록 하구요,,
┗┗┗
background-color:red;
★배경을 빨강으로 넣겠습니다.
┗┗┗
background-image:url('http://메롱닷컴/영구없다.gif');
★배경그림도 한번 넣어보공,ㅋ
┗┗┗
border-width:1px;
★테두리의 굵기는 1픽셀이고,,
┗┗┗
border-color:blue;
★그 테두리 색깔은 파랑
┗┗┗
border-style:dotted;
★점선으로 하면 이쁘겠네요,,
┗┗
"
★스타일태그가 끝났어요
>
★이제 글상자도 마치공,,

★폼도 마치죠^-^
제목 글쓴이 날짜
[HTML 초보자]iframe대신 사용할수있는 오브젝트-1 [8] ZipShin 2002.12.06
허접강의 -_-; 소스보기 금지 푸는방법들 [21] 허진규 2002.12.05
흐르는 폼 내용 출력 ㅡ,.ㅡγ [9] ☆밥동자γ 2002.11.30
[HTML 초보자] 글자움직이는 마퀴태그의 응용(Last) [3] ZipShin 2002.11.26
[HTML 초보자] 움직이는 글자반복횟수를 정하자... ZipShin 2002.11.22
[HTML 초보자] 글자가 움직이는 스크롤 지연값 -_- ZipShin 2002.11.22
〔Tale〕테일이랑 같이 글상자 이쁘게 만들어요 [1] TaleB˚ 2002.11.17
[HTML 초보자] 글자가 좌우 왕복하게 만들기. ZipShin 2002.11.14
[HTML 초보자] 마퀴태그가 한번 반복 후 화면 끝에서 정지 ZipShin 2002.11.08
[HTML 초보자] 일정한 방향으로 스크롤하기(마퀴태그) [5] ZipShin 2002.11.08
링크부분에 밑줄을 없애는 방법 [5] Kinds 2002.11.04
입력폼 스타일변경... [2] 디아릭스 2002.11.04
[HTML 초보자] 글자 움직이는 높이 설정 ZipShin 2002.11.02
희안한 css [투명한 프레임과 투명한 이미지] [10] ☜*핑♡크*☞ 2002.10.30
[HTML 초보자] 글자 움직이는 폭(넓이) 설정 ZipShin 2002.10.28
뽀유의 스타일시트 특별강좌 [28] 뽀유♡ 2002.10.25
오른쪽마우스, 드래그 금지하는 태그.. [4] xtersh 2002.10.24
[HTML 초보자]- 글자가 움직이는 배경색깔 [1] ZipShin 2002.10.22
[HTML 초보자]-marquee 마퀴태그의 움직이는 속도 [5] ZipShin 2002.10.20
[HTML 초보자] 마퀴태그로 움직이되, 마우를 가져다 되면 멈추고, 시작되고.. [6] ZipShin 2002.10.17