글
입체감있는 텍스트상자들
안녕하세요?
오늘은 input박스와 textarea를 입체감있게 보이게 하는 소스입니다.
<html>
<head>
<title>http://www.blueb.co.kr</title>
<style>
input, textarea{
background-color:#FFFFFF;
background-image:url("inputBG.gif");
background-position:left top;
background-repeat:no-repeat;
border:1px #AAAAAA solid;
padding-top:5px;
font-family:tahoma;
font-size:12px;
color:#777777;
}
</style>
<!--영어해석하면 됩니다. input과 textarea에 style을 적용시키는데 background-color 배경색은 #FFFFFF즉 흰색이고 background-image 배경이미지는 inputBG.gif이고 position은 left top 왼쪽 위이고 no-repeat이니깐 반복해서 보이게 하지 않고 border경계는 1px 1픽셀의 #AAAAAA색깔로 solid 실선으로 나타냅니다. -->
</head>
<body>
<input style="width:200px;height:30px;" />
<input style="width:250px;height:30px;" />
<textarea style="width:400px;height:150px;" scrolling="yes">
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
</textarea>
</body>
</html>
실행해보면
이렇게 텍스트상자가 입체감있게 보이는 것을 알 수 있습니다.
여기서 사용된 그림파일 inputBG.gif는
이 그림입니다. 이 그림을 텍스트 상자 배경으로 하니깐 입체감있게 표시된 것입니다. 그럼 오늘은 여기까지. 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| id,class (0) | 2011.12.08 |
|---|---|
| 초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
