1)일반 TextArea
<TEXTAREA rows=10 cols=60 >텍스트 박스에 들어갈 내용
</TEXTAREA>
이제 TextArea에 배경 이미지를 삽입해 봅시다.
2) 배경이 들어간 TextArea
<TEXTAREA style="background-image:url('.gif');
background-repeat:no-repeat;" rows=10 cols=60 >
텍스트 박스에 들어갈 내용 </TEXTAREA>
위의 태그를 보면 아시겠지만 TextArea에 style 속성을 사용하여
backgroung-image:url('...') 부분에 삽입할 이미지의 주소를
적어주시면 됩니다. 여기서 backgroung-repeat는 no-repeat로
설정하였습니다. 이것은 배경 이미지가 반복되지 않음을 의미
합니다. 2) 예제는 스크롤을 할 경우 배경 이미지가 함께 스크롤
되어 버립니다.
배경 이미지가 그대로 고정 되게려면?
3) 배경이 스크롤 되지 않고 고정된 TextArea
<TEXTAREA style="background-image:url('.gif');
background-repeat:no-repeat; background-attachment:fixed;"
rows=10 cols=60> 텍스트 박스에 들어갈 내용 </TEXTAREA>
위의 태그보면 background-attachment:fixed; 부분을 삽입하여
습니다. fixed 대신 scroll을 적으면 배경 이미지는 스크롤됩니다.
scroll 값이 디폴트이므로 이 속성을 사용하지 않으면 디폴트로
배경 이미지는 스크롤됩니다. 3) TextArea 예제에서 스크롤바를
움직여 보면 배경 이미지가 고정되어 있음을 알 수 있습니다.
TextArea에도 다양한 style 속성을 적용하여 깔끔한 디자인을
만들어 보십시요. 마지막으로 하나의 예를 더 든다면, style
속성을 이용하여 TextArea의 테두리를 없애는 것입니다.
4) 3)번에서 테두리를 없앤 TextArea
<TEXTAREA style="background-image:url('.gif');
background-repeat:no-repeat; background-attachment:fixed;
border-width:0;" rows=10 cols=60> 텍스트 박스에 들어갈 내용
</TEXTAREA>
간단합니다. border-width:0; 부분만 추가하면 됩니다. ^ _ ^
선종류: border-style:dotted, border-style:dashed, border-style:solid, border-style:double, border-style:groove, border-style:ridge, border-style: inset, border-style: outset
선색깔: border-color:#000000;
글자바꾸기와정렬: style="font-family:Verdana; font-style:normal; font-weight:bold; font-size:8pt; text-align:center;"
잘 보시면 금방 이해가 가실겁니다 family는 글꼴을 말하는 것이구요 weight는 폭을 style은 모양새를 말하는 것입니다.
weight에는 bold외에도 bolder, lighter등이 있으며 style에는 italic등이 있습니다
참고: 스크롤바 색깔 바꾸기를 적용하였습니다.
< STYLE>
BODY { scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FF0000;
scrollbar-track-color:#99CCFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#3333FF;
scrollbar-shadow-color:#3333FF}
< /STYLE>
출처 :
http://web.ggambo.com/