열심히 input요소들과 select를 만드는데,,, 디자인은 뭔가 아쉽고 ☹️ css 속성들은 내 맘처럼 움직여주지도 않을 때 사용합시다!
1. input custom
-
checkbox랑 radio 디자인을 바꾸고싶어!
이렇게 못생긴 기본 radio 디자인을 아래의 디자이너가 정해준 디자인으로 바꾸러면 어떻게 해야할까??
-
그냥 css로 냅다 디자인하기?
이 방법을 사용할 경우 border color나 size등 일부 수정은 가능하겠지만, 위 사진처럼 예쁜 체크박스 이미지를 사용할 순 없다..!
우린 저 이미지를 그대로 불러와서 사용하고 싶다. -
back ground 이미지로 지정하기
우선, 우리는 원래있던 저 동그라미를 사용하는 게 아니라 예쁜 체크 이미지를 불러올 예정이기 때문에 원래 있던 저 동그라미를 없애주자.
input[type="radio"]{
display: none;
}- display:none을 사용하여 radio를 안보이게 숨겨 두었다.
이렇게하면 radio가 아예 사라져서 클릭이 안되니까 기능이 안되는거 아냐? 라고 생각 할 수 있겠지만! 우리는 label을 이용해서 radio와 연결해두었기 때문에 사용 가능하다.
.logincheck{
content: url(./img/check.png);
}- radio의 content에 url을 이용하여 체크 이미지를 불러주고, 사이즈를 조정해준다.
.logincheck:checked{
content: url(./img/checked.png);
outline: 1px solid black;
}- checked라는 가상클래스를 사용하여 클릭되었을때 체크된 이미지로 바뀌게 해준다.
여기서 outline 을 추가해주면 체크되었을때 밖에 아웃라인 테두리가 생겨 웹접근성에 더욱 좋은 코드를 짤 수 있다.
( 그러나 디자이너 분들은 미관상 싫어하실 수 있으니 잘 설득하여 타협점을 찾자..! )
2. select custom
- css로 select 커스텀하기 ?
select 박스 커스텀이니깐, select를 사용해서 css로 커스텀하면 되겠지? 하고 다음과 같이 코드를 작성했다.
박스 까지는 잘 꾸며지는 것 같은데 select를 클릭해보면 리스트들 디자인이 매우 거슬린다.
여기저기 css속성을 옵션에 넣어봐도 전혀 먹질않는다 ..!!!
이럴땐 어떻게 해야할까?
( firefox는 셀렉트 박스에 배경색을 넣으면 셀렉트 리스트에도 함께 적용되기도 한다. )
- select 박스를 직접 만들자..!
이런경우 어쩔수 없이 다른 방법이 없기에, 버튼과 리스트를 이용해 select박스를 직접 만들어야한다. 위의 마크업을 확인해보면 버튼으로 최애 프로그래밍언어 선택 버튼과, 그 밑에 리스트 안에 버튼을 넣어 정렬해주었다.
위에 css로 커스텀했던 것 처럼, 맨위의 버튼을 스타일링 해주었다. 화살표의 경우 백그라운드로 no-repeat 속성을 설정하여 위치를 조절해주면 되는데, 코드펜상 입력이 안되어 참고하기!
밑에 list부분을 마저 스타일링 해주었다. 이제 제법 우리가 원하던 그림이 나왔는데, 우리는 이 친구들을 select기능으로 사용하려면 버튼을 클릭하면 셀렉트 리스트가 나오고, 선택한 언어로 바뀌는 작업이 필요하다. 바로 이러한 '동작'을 JS를 사용하여 구현해야한다.
(js 구현 코드는 추후 업로드 하겠습니다..)
이렇게 select박스와 그 밑에 옵션리스트까지 디자인하려면 단순히 select요소에 css를 입힌다고 해결되는 것이 아니라 다소 귀찮은 작업이 필요하다.
웹에서는 위와 같은 방법으로 리스트까지 디자인하여 많이 사용하지만, 모바일 환경에서는 셀렉트 옵션 선택이 웹과 다르기 때문에 이 방법을 사용하지 않는다.
모바일에서는 select를 바로 사용한다고 하니 좀 더 편해질 수 있다..!!!
하지만 우린 웹 프론트앤드 개발자니까 꼭 꼭 익혀두기 ~! 🤙🏻
