- 펫모리 프로젝트에서 Radio Button 관련 퍼블리싱 작업과 가상요소, 가상클래스에 대해 정리하고자 한다.
Radio Button
-
먼저 앨범 작성, 수정페이지에서 사용한 라디오 버튼이다. 공용 컴포넌트로 작성하였다.
-
input태그의 type중 radio를 사용했다. radio 같은경우 하나만 선택이 가능하고, type checkbox같은 경우 여러개를 선택 가능하다.
-
css에서는 가상요소와 가상선택자가 존재한다. 두개의 차이점을 정리해보자.
가상클래스 vs 가상요소
가상클래스
-
먼저 가상클래스란 선택자에 추가하는 키워드로, 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다.
-
가상클래스가 없다면, 어떤 태그에 특정 스타일을 적용하고 싶을 때 JS를 통해 동적으로 class를 추가하고 제거하는 과정을 거쳐야 한다.
-
이를 효율적으로 처리하기 위해 CSS에서 흔하게 사용되는 여러 패턴에 대해 정의 해놓고 가상클래스를 통해 제어하는 것이다.
-
대표적으로 사용되는 가상클래스는 다음과 같다.
| 가상클래스 | 내용 |
|---|---|
| :active | 활성화시 스타일 부여 |
| :checked | input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크 되어있을 때 스타일 부여 |
| :focus | input 태그에 focus를 한 상태일 때 스타일 부여 |
| :hover | 해당 요소에 마우스를 올렸을 때 스타일을 부여 |
| :disabled | 선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 부여 ex) input, button, a태그 |
| :enabled | :disabled의 반대로 활성화 되어있는 요소에 스타일 부여 |
| :link | 방문하지 않은 링크에 스타일 부여 |
| :visited | 이미 방문한 링크에 스타일 부여 |
| :required (필수입력) | input 태그에 readonly 속성을 지정한 요소에 스타일 부여 |
| :read-only (읽기전용) | input 태그에 readonly 속성을 지정한 요소에 스타일 부여 |
가상요소
-
가상요소는 미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소이다. 실제 태그가 존재하지는 않지만, css를 통해 마치 태그가 있는 것처럼 동작 할 수 있는 것이다.
-
꾸밈을 위해 의미없는 태그를 추가해야 할때 굳이 추가하지 않고 가상으로 처리할 수 있도록 하는 css 기능이다.
-
대표적으로 많이 사용되는 가상요소는 다음과 같다.
| 가상요소 | 내용 |
|---|---|
| ::before | 지정된 요소의 앞에 가상의 요소 생성 |
| ::after | 지정된 요소의 뒤에 가상의 요소 생성 |
| ::first-letter | 지정된 요소의 첫 번째 글자에 스타일 적용 |
| ::first-line | 지정된 요소의 첫 번째 줄에 스타일 적용 |
Radio Button 작업방식
- 가상요소를 통해 작업하였다. 먼저 CheckBox를 동그랗게 만든 후, 가상요소 선택자의 background url을 체크 svg로 설정하였다.
-
position absolute를 통해 중앙정렬을 한 후, 만약 check되었다면 가상요소의 배경을 흰색 체크와 배경색을 변경하는 식으로 Checkbox을 구현하였다.
-
visible, text, 이벤트핸들러는 prop으로 받아 다른 컴포넌트에서도 재사용 할 수 있도록 구현하였다.
import styled from 'styled-components';
const CheckBox = styled.input`
width: 30px;
height: 30px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 2px solid #666666;
border-radius: 50%;
margin-right: 10px;
position: relative;
box-sizing: border-box;
&::before {
content: url('/img/check.svg');
position: absolute;
text-align: center;
line-height: 30px;
width: 100%;
height: 100%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:checked {
border: none;
}
&:checked::before {
content: url('/img/checkwhite.svg');
background-color: ${({ theme }) => theme.color.main.orange};
line-height: 34px;
}
`;
type RadioButtonProps = {
visible: boolean;
handleIsOpen: (e: React.ChangeEvent<HTMLInputElement>) => void;
text: string;
id: string;
};
const RadioButton = ({ visible, handleIsOpen, text, id }: RadioButtonProps) => {
return (
<>
<CheckBox
type="radio"
name="check2"
value={text}
onChange={handleIsOpen}
checked={visible}
id={id}
/>
<label htmlFor={id} className="write_content">
{text}
</label>
</>
);
};
export default RadioButton;
ref)
가상 클래스, 요소 : https://abcdqbbq.tistory.com/15
