김평범's OrdinaryCode

  • 홈
  • 태그
  • 방명록

css체크박스디자인변경 1

css로 만드는 체크박스 ON/OFF 스위치 버튼 디자인 예제(라이트모드/다크모드)

🐣 들어가기 전 요즘 UI상에서 사용자에게 직관적인 형태로 ON/OFF 스위치 버튼을 제공한다. 이러한 형태는 HTML input Checkbox를 이용하여 만들 수 있다. 다크 모드/라이트 모드 변환이라던지 해당 기능을 끄고 키는 경우는 기본적인 체크박스 디자인보다는 스위치 형태로 제공하는 게 사용자의 이해도가 더 높을 수 있다. ON/OFF 스위치 완성 UI 보통 ON 상태일 경우 포인트 컬러를 이용하여 상태가 들어온 상태이며, OFF상태일 경우 회색 등을 이용하여 꺼져있는 느낌으로 만든 스위치 디자인이다. HTML 코드 CSS 코드 .switch-button { position: relative; display: inline-block; width: 55px; height: 30px; } .swit..

FrontEnd/css 2021.03.04
1
더보기
  • 분류 전체보기 (203)
    • Diary (4)
    • FrontEnd (109)
      • Javascript (20)
      • Vue.js (34)
      • css (17)
      • React (11)
    • etc. (88)
      • Notion (71)

Tag

노션무료템플릿, Vue, 노션활용법, JavaScript, 노션유용한템플릿, 노션가계부, 리액트, NUXT, Notion템플릿공유, react, 노션사용법, notion, 노션템플릿, 노션표, 노션템플릿공유, 노션수식, 노션데이터베이스, 노션, CSS, 노션가이드,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
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 31

Copyright © Kakao Corp. All rights reserved.

티스토리툴바