logo

  • 홈으로
  • 로그인
  • 회원가입
  • 화면축소
  • 화면확대
2018년 12월 10일
  • 포토누리
  • 제작의뢰
  • 포트폴리오
잡다한몽상백서 메인배너
로그인
조회 수 165688 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print

<input type=text style="BACKGROUND-COLOR: #000000">

이런식으로 백그라운드 컬러를 지정할 수 있당.

 

1. 스타일을 이용한 input box 스타일 변형[기본]

<style type="text/css">
INPUT
{
background-color: #ffffff; border: #000000 1px solid
}
</style>

위 경우에는 input의 박스색깔은 흰색 #ffffff 테두리색은 검정색 #000000 으로 변형됩니다.

2. 스타일을 이용한 input box 스타일 변형[이미지 넣기]

<style type="text/css">
INPUT
{
background-image: url('이미지경로'); background-repeat: no-repeat; background-position: center
}
</style>

background-repeat: no-repeat; 이 부분은 배경 이미지를 반복하지 말라는 뜻이랍니다. 반복을 원하실 경우 삭제하시면 되구요. 위 소스는 반복하지 않기로 했기때문에 이미지 포지션을 가운데로 배치한것이랍니다. ^^
가끔 스타일을 지정하시고 일괄적으로 적용되는게 싫다고 하시는 분들이 많더라구요. ^^

이럴 경우에는 자주사용될 스타일의 종류를 미리 만들어두고 이용하시면 된답니다. 즉....

<style type="text/css">
.A
{
background-color: #FF00CC; border: #000000 1px solid
}
.B
{
background-image: url('이미지경로'); background-repeat: no-repeat; background-position: center
}
</style>

<input type=text value="값" class=A> 이러면 A가 적용
<input type=text value="값" class=B> 이러면 B가 적용되어 배경이미지가 들어 갑니다.

스타일을 선언하지 않고 그냥 쓰시려면

<input type=text value="값" style="background-color: #FF00CC; border: #000000 1px solid">

<input type=text value="값" style="background-image: url('이미지경로'); background-repeat: no-repeat; background-position: center">
 
스타일 타입 선언 소스는 <head></head>사이에 작성하는 것이 정석이랍니다. ^^ 

?

List of Articles
번호 제목 글쓴이 날짜 조회 수
62 [자료] 스파이더 - 검색엔진에 추가시 주의점 4 언더꿈 2007.07.13 374654
61 함수를 이용한 div 출력 1 똑띠 2007.11.23 208085
60 input 타입에 숫자만 입력받기 똑띠 2009.04.13 206823
59 input type=text 에서 엔터 눌렀을때 submit 실행 똑띠 2009.06.22 193751
58 폼체크 (submit 이전에 체크후 넘김) 1 똑띠 2010.09.30 175635
» INPUT 을 다양하게 표현하기 똑띠 2006.08.25 165688
56 input 에 배경으로 글자입력하고 클릭시 사라지는 기능 똑띠 2011.08.01 165557
55 onmouseOver 시 이미지 변경 똑띠 2009.07.18 146160
54 div , class에 대한 개념정의 file 똑띠 2006.09.18 145565
53 홈페이지에 팝업창달기 1 똑띠 2007.12.08 145367
52 select form 에서 submit 버튼 클릭시 사이트 이동 똑띠 2013.04.26 135911
51 울트라 에디터에서 파일 탭이 사라졌을 경우.. file 똑띠 2007.07.19 135792
50 input box 배경처리 똑띠 2008.10.28 135478
49 라디오 버튼 체크 여부 확인 하기 1 똑띠 2009.12.14 128340
48 form문에서 submit 시 action 처리 window.open 으로 하기 3 똑띠 2013.01.04 120647
47 구글 검색엔진에 자신의 홈페이지 등록하기. 똑띠 2007.08.08 118859
46 마우스 오버시 이미지 바꾸기 1 똑띠 2008.07.02 111368
45 간단하고 효과좋은 홈페이지 제작팁 똑띠 2006.08.25 111123
44 한줄짜리 웹소스 똑띠 2006.08.25 110487
43 스타일시트 예제 - 스크롤바를 사이트분위기에 맞게 수정하기 똑띠 2006.08.25 109583
목록
Board Pagination ‹ Prev 1 2 3 4 Next ›
/ 4

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

  • Designed by jobdahan.net