웹마스터 팁

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

★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;
★점선으로 하면 이쁘겠네요,,
┗┗
"
★스타일태그가 끝났어요
>
★이제 글상자도 마치공,,

★폼도 마치죠^-^
제목 글쓴이 날짜
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
"서버에 요청중..." 메세지 없애기 [3] SeoSeungHyun 2011.01.11
xe에 모바일 업로드 하기(api 이용, 파일첨부 업로드 해결) [4] 천민수 2011.01.12
Content위젯에서 분류명(카테고리)를 이미지로 표현하기 [1] nalireco 2011.01.12
텍스타일 블로그 메인페이지 만들기 [1] designm 2011.01.13
탈퇴회원 아이디 재사용 막는 법 [5] 한꼬마 2011.01.18
XE에서 레이아웃이나 기타의 페이지에 include 사용에 대한 오해??? [3] DuRi 2011.01.18
[ 도움요청 ] 게시판 리스트에서 작성한 사람만 작성한 리스트가 보이는 방법 ?? 잘살아서복수!! 2011.01.20
[왕초보팁] 2차 메뉴를 레이아웃 스킨에 넣을 때 [2] HolyJohn 2011.01.21
좋은 레이아웃 찿으시는 분들 선우님이 새로 또 하나의 좋은 레이아웃을 만드 셨네요... [2] 유샤인 2011.01.21
PHP 5.3.x DEPRECATED 에러 해결하기 [2] 난다날아 2011.01.21
'대표도메인'연결후 '로그인'이 안될때,,(먹통) moonlight994 2011.01.24
XE 게시판에 소셜댓글 라이브리 적용하기 [6] [1] file 미자503 2011.01.26
외부에서 단독으로 xe게시판에 글 올리기, blogapi 기능 사용하여, [6] file 김기철980 2011.01.27
PHP의 끝을 닫지 않아도 실행됩니다. [2] SMaker 2011.01.29
홈페이지 브라우저 크기 고정시키기 코아 코스튬 2011.01.30
메뉴에서 채팅방 띄우기 용도로 쓰는 스크립트 코아 코스튬 2011.01.30
랜덤 이미지 롤링위젯스킨에서 컬러셋이 적용되지 않는분은 필독! file xemall 2011.02.02
게시판 관리자 표시하기... [6] file 카르마 2011.02.05
"서버에 요청중입니다" 메세지(혹은 다른 메세지, DB접속실패 등) 바꾸기 Cloverworld 2011.02.08