2020. 9. 19. 15:47ㆍfront-end
오늘은 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. 브라우저 창 크기에 따라 열 배치 등을 바꾸는 방법도 있습니다.
'front-end' 카테고리의 다른 글
RWD 관련 tag 및 css 정리, 연습 (0) | 2020.09.27 |
---|---|
Form javascript (0) | 2020.09.19 |
html form tag 정리 (0) | 2020.09.18 |
form에서 서버로 데이터 전송하기 (0) | 2020.09.15 |
css 기본 속성과 문법 및 적용방법 (0) | 2020.09.14 |