React + styled-component 조합으로 기본 input checkbox를 custom해보자!
export default function Checkbox() {
const [isChecked, setIsChecked] = useState(0);
return(
<input type="checkbox" checked={isChecked}/>
);
}
기본 checkbox는 회색?검은색? border에 check시 퍼런색 배경이 나타난다.
이런 border와 background 등을 custom 하기 위해서는 기본 checkbox와 새롭게 만드는 checkbox모양 친구를 묶어주는 container가 있어야하며, 기본 checkbox는 보이지 않도록 숨겨줘야 한다.
import * as S from "../styles/Login.styles";
export default function Checkbox() {
const onChangeCheckbox = (e: ChangeEvent<HTMLInputElement>) => {
setLogin({ ...login, isUserIdStored: e.target.checked });
};
return(
<S.CheckboxContainer>
<S.HiddenCheckBox
checked={login.isUserIdStored}
onChange={onChangeCheckbox}
/>
<S.SaveIDCheckBox checked={login.isUserIdStored}>
<S.Icon viewBox="0 0 24 24">
<polyline points="20 6 9 17 4 12" />
</S.Icon>
</S.SaveIDCheckBox>
</S.CheckboxContainer>
);
}
export const CheckboxContainer = styled.div`
display: flex;
vertical-align: middle;
align-items: center;
`;
export const HiddenCheckBox = styled.input.attrs((props) => ({
type: "checkbox",
checked: props.checked,
onChange: props.onChange,
}))`
border: 0;
clip: rect(0 0 0 0);
clippath: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
`;
export const Icon = styled.svg`
fill: none;
stroke: ${colors.black[1000]};
stroke-width: 2px;
`;
export const SaveIDCheckBox = styled.div<{ checked: boolean }>`
display: inline-block;
width: 18px;
height: 18px;
background: ${(props) =>
props.checked ? `${colors.brown[800]}` : `${colors.brown[900]}`};
opacity: ${(props) => !props.checked && 0.7};
border-radius: 3px;
transition: all 100ms;
margin-right: 8px;
&:hover {
background: ${colors.brown[800]};
opacity: 1;
}
${Icon} {
visibility: ${(props) => (props.checked ? "visible" : "hidden")};
}
`;
HiddenCheckBox의 경우
display: none
을 할 수도 있지만, 다음과 같이 숨길 경우 스크린 리더는 여전히 checkbox의 존재를 알 수 있다고 한다.
웹 접근성 측면에서 처음 안 사실!
https://polished.js.org/docs/#hidevisually
숨겨진 HiddenCheckBox로 checked, onChange를 관리해주고, custom checkbox에 check여부를 대신 표시해주는 방식이다.
viewBox와 polyline의 경우도 이번에 처음 봤다. 이걸 알려면 svg를 알아봐야 하는데...
svg
란 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽, 즉 크기를 확대하거나 축소할 수 있는 수학적 함수를 이용해 도형이나 선을 그려서 표현한 그래픽이라고 한다.
여기서 수학적 함수를 이용해 도형이나 선을 그려서 표현한 이라는 의미는 수학 시간에 배웠던 좌표 평선 위에 그려져 있는 그래프 정도로 이해할 수 있다.
viewBox
는 svg 요소가 그려지는 영역에서, svg 요소의 크기를 확대, 축소 그리고 위치를 조정할 수 있는 속성이다.
svg 요소를 viewBox 속성 없이도 화면에 그릴 수 있지만, viewBox 속성을 이용하면 화면의 크기에 따라 svg 요소의 크기가 자동으로 조절된다.
<polyline>
는 svg 내에서 사용되는 요소로, 여러 개의 점을 연결하여 부드럽지 않은 직선의 경로 또는 모양을 만들기 위해 사용한다.
svg는 <polyline>
외에도 <line>
, <circle>
, <ellipse>
, <polygon>
, <path>
등 다양한 기본 그래픽 형태를 제공한다.
< 출처 :
https://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/
https://gist.github.com/lucasriondel/4833c883c92a58b366d3b8a7577424c5 >
이렇게 유용한 정보를 공유해주셔서 감사합니다.