커스텀

[CSS] checkbox, radio, range 색상 바꾸기

기존의 CSS로 체크박스, 라디오 등의 색상을 바꾸기 위해서는 appearance 속성을 사용하여 네이티브로 지원되는 모양들을 해제한 후 색상을 입혀야 했습니다. 기존에는 appearance 속성으로 인해서 체크박스, 라디오 같은 상호작용 요소도 사라져 버려, 번거로운 추가 작업이 필요했습니다. 이번에 accent-color 속성이 CSS에 추가됨으로 input의 체크박스(checkbox), 라디오(radio), 레인지(range), 프로그레스(progress) 타입에 손쉬운 색상 변경이 가능해졌습니다. 코드 input, progress { accent-color: red; } appearance 같은 속성을 사용하지 않고, 단순히 accent-color 속성을 사용하여 색을 지정해 주면 됩니다. 그럴 ..

[CSS] 스크롤바 스타일 커스텀하기

코드 각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있습니다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 영역::코드로 적용 대상을 제한하여 사용할 수 있습니다. body::-webkit-scrollbar { width: 8px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #217af4; /* 스크롤바의 색상 */ border-radius: 10px; } body::-webkit-scrollbar-t..

[CSS] checkbox 둥글게 만들기

코드 input[type="checkbox"] { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #999; appearance: none; cursor: pointer; transition: background 0.2s; } input[type="checkbox"]:checked { background: #32e732; border: none; } 코드 풀이 해당 코드의 핵심은 appearance 속성입니다. 그냥 border-radius 속성을 적용할 시 checkbox 타입을 가진 input은 모양이 바뀌지 않습니다. 위 속성은 네이티브로 지원되는 모양들을 해제하거나 추가할 때 이용할 수 있으며 라디오처럼 둥글게 만들거나 커스텀 시..