sohyeon kim

[CSS/React] tailwind checkbox 커스텀 : checked:bg-url 본문

CSS

[CSS/React] tailwind checkbox 커스텀 : checked:bg-url

aotoyae 2024. 4. 5. 00:27
728x90

 

 

💡 tailwind 로 체크박스 커스텀하기

 

우선 결과물.. 이렇게 보니 화질이..

<input
  type="checkbox"
  checked={option.isAnswer}
  className="w-11 h-11 appearance-none border-solid border border-pointColor1 rounded-md
	checked:bg-pointColor1 checked:bg-[url('https://icnlbuaakhminucvvzcj.supabase.co/storage/v1/object/public/assets/checkbox.png')]
	bg-md bg-no-repeat bg-center"
  onChange={() => {
    handleCheckObjectAnswer(id, options, option.id);
  }}
/>

 

checked 됐을 때 표시될 배경색을 넣어주고, 그 위에 png 하얀색 체크 표시를 넣어줬다!

그리고 bg-no-repeat bg-center 로 이미지가 가운데 위치하도록 했다.

 

🥵 url 문제가 좀 있었는데..

파일에 넣어둔 이미지를 가져오려 했는데 url 에 파일 경로를 아무리 넣어봐도 .. 적용이 안됐다.

tailwind.config 에서도 넣어봤지만.. 자꾸 경로 오류가 떠서 시간만 보내다가

supabase storage 에서 URL 가져올 수 있지 않나?!?!??! 해서

이미지 올려두고 url 복사해서 넣어두니 아주 잘 표시됐다. 😭

 

 

 

🔗 https://dalsong-00.tistory.com/35

 

[Tailwind CSS] background-image 경로 설정

이번에 프로젝트로 tailwind css를 활용하기로 해서 tailwind css를 연습하는 중이다. tailwind css는 클래스네임에 css 속성을 입력하기 때문에 클래스네임이 매우 지저분해진다는 단점이 있긴 하지만, 약

dalsong-00.tistory.com

🔗 https://velog.io/@eunbi/tailwind%EB%A1%9C-checkbox-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

TIL #73 | tailwind로 checkbox 커스텀하는 방법

디자인에 맞게 체크박스를 커스텀하기 위해 조사를 해봤는데 다른 요소보다 커스텀하는게 더욱 까다로운 것 같았다.label을 사용해서 커스텀 하는 방법과 checkbox 자체를 커스텀하는 방법이 있는

velog.io

🔗 https://sophiecial.tistory.com/34

 

input type:checkbox 체크박스 커스텀 css디자인 변경하기

input태그 커스텀은 label으로! html태그 는 기본적으로 아주 심플한 디자인으로 보여지는데 프로젝트를 진행해보면 사이트의 분위기라던거 컨셉에따라 다른 디자인으로 변경해야하는 경우가 있다

sophiecial.tistory.com

 

 

 

728x90
반응형
저작자표시

'CSS' 카테고리의 다른 글

[CSS/React] tailwind 조건부 스타일링  (0) 2024.04.16
[CSS/React] tailwind 에서 calc 사용하기  (0) 2024.04.12
[CSS/Next] tailwind drop-shadow 태그에 그림자 넣기  (0) 2024.03.21
[CSS/Next] tailwind text-shadow 폰트 그림자 넣기  (0) 2024.03.21
[CSS/Next] Next.js + tailwind 구글폰트 설정 Roboto_Mono  (0) 2024.03.13
'CSS' Related Articles more