Today I Learned ⭐️
input[type="checkbox"] css 커스텀하기
<input type="checkbox"></input>
<label></label>위와 같은 구조로 html을 작성하고, 가상요소 afetr를 사용해 input의 바로 뒤 요소로 content를 추가할 수 있다.
.checkbox {
width: 16px;
height: 16px;
margin-right: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
appearance: none; /* 브라우저의 기본 스타일링을 제거*/
font-size: 12px;
border: 1px solid #ababab;
border-radius: 2px;
}
.checkbox:checked {
background-color: #e68031;
border: none;
}
/* checkbox가 선택되었을 경우 체크표시 추가 */
.checkbox:checked::after {
content: '✔';
color: white;
}React - PostCSS 사용 시 class 여러개 추가하기
만약 버튼에 두 개의 class를 할당하고 싶다면, 일반 CSS에서는 다음과 같이 공백을 기준으로 class 이름을 적어주면 된다.
<button class='btn selected'>그러나, PostCSS를 사용한다면 class 이름에 임의의 문자가 추가되기 때문에 (컴포넌트 별 class 이름 충돌 방지) CSS 모듈 파일로부터 styles 객체를 import해서 사용해야 한다.
className에 문자 리터럴을 사용해서 동일하게 공백을 기준으로 class 이름을 추가한다.
<button className={`${styles.btn} ${styles.selected}`}>공태기 극복이 시급해 😱
이번주는 왠지 모르게 의욕이 안생겼는데 몸 상태도 안좋아버리는 바람에 거의 집중을 못했다.
프로젝트 때는 정신이 없어서 이런 생각도 안 들었던 것 같은데.. 역시 생각할 시간이 많아지면 이게 문제다.
다행(?)인 건 여기저기 얘기 나누고 보니 나만 이런게 아니라 다들 같은 상황인 것 같다. 지금이 그냥 그런 시기인가 보다.
전 팀원분께 얘기해봤는데 나를 나약하게 만들지말라고 하셨다 ㅋㅋㅋㅋㅋ 그리고 친구한테도 나 요즘 번아웃 온거같다고 말했더니 이번주 겨우 이틀밖에 안됐다고. 그정도는 공부하면서 다 겪는 시기이고 아무것도 아니라고 했다. 이게 왜 위로가 되지 😂
그래 맞아 고민은 시간낭비일 뿐! 그냥 공부하거나 정 안되겠으면 푹 쉬자! 그러고 다시 시작하자!! 나 자신을 나약하게 바라보지 말자! 파이팅파이팅 🔥❣️
Software Engineer 🍊