[HTML] Textarea 태그 배경 색상, 배경 이미지 설정 하는 방법

[HTML] Textarea 태그 배경 색상, 배경 이미지 설정 하는 방법

[ TextArea 태그 ]

- 사용자가 여러 줄에 걸쳐 긴 문장을 입력 할 수 있도록 해 주는 메모장과 같은 양식을 구현해 주는 태그 입니다.





[ TextArea 태그 속성 ]

- name : 식별자
- rows : TextArea의 세로 길이
- cols : TextArea의 가로 길이




형식 :

<TextArea Name = 이름 Rows=열수 Cols=행수 >
   초기 출력할 문자열
</TextArea>




예제 :

<TextArea Name="memo" Rows=12 Cols=70 >
메모장 처럼 내용을 입력 할 수 있습니다.
</TextArea>

---

텍스트를 입력할 수 있는 TextArea 태그 영역이 기본적으로는 흰색 바탕에 배경이 없습니다.

Style 속성을 이용하면

TextArea의 배경색상을 지정할 수 있고,
TextArea의 배경 이미지를 지정할 수 있고,
배경이미지의 반복, 고정 , TextArea의 테두리선 등 ,

TextArea의 디자인적인 부분을 수정할 수 있습니다.




<TextArea
   style="
      background-image:url('https://t1.daumcdn.net/cfile/tistory/150F24034CA7E7436A' );
      background-repeat:no-repeat;
      background-attachment:fixed;"
   rows=4 
   cols=89>
          TextArea에 들어갈 내용
</TextArea>





TextArea에 들어갈 내용


위 TextArea 태그 영역은 실제로 적용된 부분입니다.

TextArea 태그 영역의 배경 이미지가 적용되었구요,

배경 이미지 반복 없음, 배경 이미지 고정 속성을 지정 하지 않았습니다.

( 다양한 속성들로 테스트를 해보아야 될것 같네요.. 기대했던 반응이 나오지 않네요 ㅠ.ㅠ. )




TextArea의 특징이라면 여러줄에 걸쳐 긴 문장을 입력 할 수 있는것인데요

위  TextArea 태그의 텍스트입력창에

엔터키를 입력하면서 계속 입력해도 스크롤만 생성되고, 배경 이미지는 반복되고 있음을 확인 할 수 있습니다.






- TextArea 배경색상

style="background-color:#ffffff;"



- TextArea 배경 투명

style="background-color:transparent;"



- TextArea 배경 이미지 삽입

style="background-image:'url(이미지경로)'; background-repeat: no-repeat; background-position:center;"