728x90
반응형
태그
-
[html css] label 로 텍스트 클릭 시 체크박스 체크되도록 연결하기오늘의 정보 2023. 1. 8. 08:00
회원가입등 정보 선택시 사용하는 체크박스를 PC화면으로 보면 마우스를 쉽게 클릭 가능하지만 모바일 화면으로 보면 아무래도 손가락으로 체크박스를 정확히 체크하기 힘들기 때문에 사용하면 좋은 기능! 체크박스 옆의 정보표기 텍스트를 선택&클릭해도 체크박스에 체크혹은 체크 해지가 되도록 해주는 기능인데 label 태그와 input 태그를 동시에 사용하여 만들 수 있다. input 태그 내에 id와 label 태그 내에 for 내용을 똑같이 넣어주면 되는데 사과 클릭 할 수 있는 텍스트를 label 태그로 감싸서 작성해 주면 된다.
-
[html css] select에 [appearance] 속성으로 화살표 지우고 이미지 넣기오늘의 정보 2022. 12. 4. 08:00
appearance: none; 요소의 자체구성 요소 숨김 select 태그의 css 내용에 사용 하면 원래 화살표를 지워준다. 대신 사용할 이미지는 배경으로 깔아서 넣어줌 배경으로 작은 이미지를 넣어주면 공간만큼 반복되므로 no-repeat 속성을 넣어서 한번만 나오도록 해준다. 뒤에 %로 위치 선정 ex) 100% 50% 100% (가로 위치)가장 오른쪽 50% (상하 위치) 가운데 백그라운 사이즈를 조절해서 대신할 이미지 크기 변경.