Form tag css

오늘은 form의 css를 알아보겠습니다.

 

1. 먼저 입력받는 필드를 꾸미는 것 부터 보겠습니다.

위의 예시는 input 요소를 모두 적용시키는 것입니다. 만약 특정 입력요소만 꾸미고 싶다면 아래의 selector들을 사용하시면 됩니다.

 

input[type = text]: 텍스트 필드만 고른다.

input[type = password]: 비밀번호 필드만 고른다

input[type= number[: 숫자 필드만 고른다

그외...

 

2. 입력받는 값의 내부 공백을 조절합니다.

padding을 통해 내부에 여백을 형성할 수 있고 또 margin을 통해 입력부 바깥에 간격을 생성할 수 있습니다.

 

3. 입력값 경계선을 디자인 할 수도 있습니다. border 속성을 이용해 자유롭게 디자인이 가능하고 border-radius를 통해 경계선의 모서리를 둥글게 만들 수 있습니다.

 

4.  입력부분의 내부 색을 변경할 수도 있습니다. 내부의 칸, 글자 색을 디자인이 가능합니다.

5. 클릭했을 때 해당 입력부분에 색이 바뀌는 등 효과를 넣어줄 수 있습니다

6. 입력 값 안에 아이콘을 넣고 싶을 때 background-image, background-position을 이용하여 설정이 가능합니다. 여기서 중요한 점은 해당 아이콘을 넣기 위해 위에서 설명한 입력부분 안에 padding을 넣어서 아이콘이 들어갈 공간을 마련해줘야한다는 것입니다.

7. tansition 속성을 이용해 검색입력창의 길이를 애니메이션효과 처리할 수 있습니다. 선택했을때 길이가 조절되는 방법

으로요.

8. textarea또한 디자인가능합니다.

9. 선택 메뉴를 디자인 할 수도 있습니다.

10. 버튼도 디자인이 가능합니다.

11. 브라우저 창 크기에 따라 열 배치 등을 바꾸는 방법도 있습니다.