..

Search

37) Form 요소

Form 요소


form 요소

CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있습니다.


input 요소의 크기 설정

width 속성을 이용하여 input 요소의 크기를 설정할 수 있습니다.

예제

<style>

    inputwidth: 100%padding: 10px 20pxmargin: 5px 0; box-sizing: border-box; }

</style>

코딩연습 ▶

 

위의 예제에서 사용된 box-sizing 속성에 대한 더 자세한 사항은 CSS 사용자 인터페이스 수업에서 확인할 수 있습니다.

 

CSS 사용자 인터페이스 수업 확인 =>


input 요소의 테두리 설정

border 속성을 이용하여 input 요소의 테두리(border) 색상과 두께를 바꿀 수 있습니다.

또한, border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있습니다.

예제

<style>

    input[type="text"] { border: solid 2px #D2691Eborder-radius: 8px; }

    input[type="password"] { border: noneborder-bottom: solid 2px #D2691E; }

</style>

코딩연습 ▶


input 요소에 배경색 적용

background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있습니다.

또한, color 속성을 이용하여 input 요소의 텍스트 색상를 변경할 수도 있습니다.

예제

<style>

    inputbackground-color: #FFF8DCcolor: olive; }

</style>

코딩연습 ▶


포커스를 가지고 있는 input 요소의 스타일 적용

:focus 선택자를 이용하여 해당 input 요소가 포커스(focus)를 가지고 있을 때의 스타일을 별도로 설정할 수 있습니다.

예제

<style>

    input[type="text"] { border: solid 2px #FFE4B5; -webkit-transition: 0.5s; transition: 0.5s; }

    input[type="text"]:focus { border: solid 2px #D2691E; }

    input[type="password"] { border: solid 1px black; }

    input[type="password"]:focus { background-color: #E0FFFF; }

</style>

코딩연습 ▶


input 요소에 아이콘(icon)이나 이미지 삽입

background-image 속성을 이용하여 input 요소에 아이콘(icon)이나 이미지를 삽입할 수 있습니다.

또한, background-position 속성을 이용하여 삽입한 아이콘이나 이미지가 나타날 위치를 설정할 수도 있습니다.

예제

<style>

    input {

        background-image: url("/examples/images/img_search_icon.png");

        background-position: 5px 4px;

        background-repeat: no-repeat;

    }

</style>

코딩연습 ▶


textarea 요소의 크기 조절

resize 속성을 이용하여 textarea 요소의 크기를 조절할 수 있습니다.

resize 속성을 설정하면 해당 textarea 요소의 오른쪽 아래 부분에 마우스로 잡을 수 있는 핸들이 생깁니다.

사용자가 그 핸들을 마우스로 클릭하여 조절하면 textarea 요소의 크기를 마음대로 조절할 수 있게 됩니다.

 

CSS에서 사용할 수 있는 resize 속성값은 다음과 같습니다.

속성값 설명
none 해당 요소의 크기를 조절할 수 없음. (기본 설정)
both 사용자가 해당 요소의 높이와 너비를 모두 조절할 수 있음.
horizontal 사용자가 해당 요소의 너비만을 조절할 수 있음.
vertical 사용자가 해당 요소의 높이만을 조절할 수 있음.

 

예제

<style>

    textareawidth: 100%height: 200px; box-sizing: border-box; resize: both; }

</style>

코딩연습 ▶

 

resize 속성은 익스플로러에서 지원하지 않습니다.

select 요소에 스타일 적용

CSS를 이용하면 select 요소에도 여러 가지 스타일을 적용할 수 있습니다.

예제

<style>

    select {

        width: 100%;

        padding: 10px;

        border: solid 1px black;

        border-radius: 5px;

        background-color: #FFFFE0;

    }

</style>

코딩연습 ▶


연습문제