Under the Sign of Saturn

  • 🔎 Home
  • ✨ Portfolio
  • 👀 Github

커스텀 체크박스 1

[CSS3/tailwindCSS] background-image를 통해 커스텀 체크 박스를 만드는 방법

전체 동의 우선 제일 먼저 태그의 type 속성을 checkbox로 둔다. 위 코드는 전체 동의를 위한 checkbox input 예제 코드. TailwindCSS와 섞어 써서 몇 가지를 설명하자면, sr-only : 라벨 내 태그 텍스트는 스크린 리더 사용자에게만 읽히도록 한다. rounded-full : border-radius: 50%;와 동일. 체크 박스 이미지를 둥글게 만든다. checked:bg-green-default : green-default라는 변수명으로 tainwind.config.js 파일에 등록해둔 색상으로 background-color를 지정해준다. 단, checked가 true일 때만 활성화하는 코드이다. appearance-none : appearance: none;과 동일한..

👩‍💻/CSS3 2022.02.25
1
더보기
프로필사진

프론트엔드 개발자의 Today I Learnt

  • 분류 전체보기 (110)
    • 👩‍💻 (93)
      • JavaScript (22)
      • React Native (0)
      • React (11)
      • Vue (11)
      • TypeScript (3)
      • Java (4)
      • ruby & python (7)
      • CSS3 (9)
      • HTML5 (3)
      • Data Base (1)
      • Firebase (3)
      • Git (5)
      • Network (9)
      • Web (2)
      • Markdown (1)
      • KNOU (2)
    • 🛠 (15)
      • Blog (2)
      • Dev Tool (13)
    • 💎 (2)
      • books (0)
      • Log (2)
      • Private (0)

Tag

techBlog, 리액트, CSS, programmers, 파이썬, git, 루비, coding test, CRA, Frontend, github, javascript, React, Typescript, 프론트엔드, 프로그래머스, ESLint, todolist, vue, vue.js,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바