당신은 주제를 찾고 있습니까 “라디오 버튼 디자인 – HTML 및 CSS를 사용하여 사용자 정의 라디오 버튼 디자인“? 다음 카테고리의 웹사이트 ppa.khunganhtreotuong.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.khunganhtreotuong.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 GTCoding 이(가) 작성한 기사에는 조회수 10,195회 및 좋아요 163개 개의 좋아요가 있습니다.
Table of Contents
라디오 버튼 디자인 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 HTML 및 CSS를 사용하여 사용자 정의 라디오 버튼 디자인 – 라디오 버튼 디자인 주제에 대한 세부정보를 참조하세요
Hi in this video, I show you how to create a custom radio button using HTML and CSS.
Here is the source code: https://github.com/Godsont/Custom-Radio-Button
라디오 버튼 디자인 주제에 대한 자세한 내용은 여기를 참조하세요.
css 활용 예제 – 라디오 버튼을 활용한 선택 버튼 디자인
라디오 버튼 태그 활용 – 버튼 디자인 CSS. 모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우,. 라디오 버튼 보다는 버튼 형태를 …
Source: lionbum.tistory.com
Date Published: 3/4/2022
View: 3336
폼필드(체크박스, 라디오) 디자인 #3 – WEBDIR
체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 …
Source: webdir.tistory.com
Date Published: 6/30/2021
View: 835
체크박스와 라디오버튼 디자인 기초 – 어포스트
체크박스와 라디오버튼은 사용자가 선택할 수 있는 대상을 표현하는 폼 요소입니다. 선택적인 값을 표시하고, 선택된 값을 서버로 전송할 수 있는 …
Source: blogpack.tistory.com
Date Published: 12/30/2021
View: 7684
CSS 라디오 버튼 스타일 가이드
왜, 라디오 버튼을 스타일할까? 먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다.
Source: www.daleseo.com
Date Published: 8/16/2021
View: 7392
체크박스, 라디오 버튼 커스텀 디자인 – CodePen
HTML ; 1.
- ; 2.
- ; 3. ; 4. ; 5.
- Author: GTCoding
- Views: 조회수 10,195회
- Likes: 좋아요 163개
- Date Published: 2019. 9. 25.
- Video Url link: https://www.youtube.com/watch?v=fWBqepkdess
- css
- custom radio button
- radio button
- html tutorial
- radio button css
- radio button css style
- radio button in html
- how to design a custom radio button
- html
- css tutorial
- web design
.
Source: codepen.io
Date Published: 3/3/2022
View: 5767
[Insight] 라디오 버튼 디자인 할 때 고려할 점 4가지 – 네이버 블로그
오늘 뮤자인 디자인 센터에서 준비한 주제는. 라디오버튼 UI/UX 디자인 시 알아둘 사항입니다. . . musigned by musign 디지털 에이전시 뮤자인의 …
Source: m.blog.naver.com
Date Published: 9/18/2022
View: 6302
체크박스,라디오버튼 디자인변경(커스텀 디자인)
체크박스,라디오버튼 디자인변경(커스텀 디자인). 예쁜꽃이피었으면 2021. 12. 16. 11:40. https://webdir.tistory.com/433 · 폼필드(체크박스, 라디오) 디자인 #3.
Source: action713.tistory.com
Date Published: 3/7/2021
View: 1582
체크박스와 라디오버튼 – Bootstrap
form-check-label 이 아닌 .btn 스타일을 사용합니다. 이러한 토글 버튼은 필요에 따라 다시 button group으로 그룹화할 수 있습니다. 체크박스 토글 버튼.
Source: getbootstrap.kr
Date Published: 2/11/2022
View: 8198
[css] radio버튼 디자인 바꾸기 – My Web Story
[css] radio버튼 디자인 바꾸기 · 1. 기존 라디오 버튼을 없애고 디자인 되어있는 라디오 버튼 이미지를 가져와. 요소를 만들어 넣어줘 디자인을 바꿔 …Source: sseozzzy.tistory.com
Date Published: 2/13/2021
View: 2038
주제와 관련된 이미지 라디오 버튼 디자인
주제와 관련된 더 많은 사진을 참조하십시오 HTML 및 CSS를 사용하여 사용자 정의 라디오 버튼 디자인. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 라디오 버튼 디자인
css 활용 예제 – 라디오 버튼을 활용한 선택 버튼 디자인
라디오 버튼 태그 활용 – 버튼 디자인 CSS
모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우,
라디오 버튼 보다는 버튼 형태를 많이 사용하는데
기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기.
HTML
라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면
id속성과 label for속성을 같게 설정 한다.
tag label 속성
CSS
타입 선택자/인접 선택자 – input[type=radio]+label
선택자 종류 상세
.select { padding: 15px 10px; } .select input[type=radio]{ display: none; } .select input[type=radio]+label{ display: inline-block; cursor: pointer; height: 24px; width: 90px; border: 1px solid #333; line-height: 24px; text-align: center; font-weight:bold; font-size:13px; } .select input[type=radio]+label{ background-color: #fff; color: #333; } .select input[type=radio]:checked+label{ background-color: #333; color: #fff; }
결과
반응형
WEBDIR :: 폼필드(체크박스, 라디오) 디자인 #3
체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 대하여 알아봅니다.
체크박스와 라디오버튼 디자인 현황
모던 브라우저들과 IE11은 체크박스와 라디오버튼의 크기정도는 조정할 수 있다. 모바일 브라우저에서는 기본으로 제공되는 체크박스와 라디오버튼의 선택영역이 매우 작게 표시되어 선택의 불편함이 가중되기에 이 크기를 변경하는 것이 추천된다.
webkit 브라우저들에서는 -webkit-appearance: none 과 같이 네이티브 속성값을 제거하여 좀 더 다른 디자인을 구현할 수 있지만, 브라우저 호환이 되지 않는 단점이 있다.
이를 극복하기 위해 checked 속성을 이용하여 체크박스와 라디오를 꾸미는 방법이 활성화되고 있으며, IE8 이하의 브라우저들을 지원하기위해서 폴리필을 추가해야 한다.
checked 속성 폴리필 추가
구형 IE에서 checked 속성을 지원하기 위해 poly-checked를 추가한다. 이 폴리필은 jQuery를 필요로 하며, 모든 CSS파일은 이 스크립트 이전에 포함되어야 한다(IE7까지 지원).
이 밖에도 다른 폴리필도 존재했으나 직접적으로 테스트해보진 않았다.
체크박스 디자인
기본적인 체크박스 디자인의 구조는 아래와 같다.
input 요소의 ID값과 label 요소의 for 속성값을 일치시키면 된다.
기본적인 CSS는 아래와 같다.
.checks {position: relative;} .checks input[type=”checkbox”] { /* 실제 체크박스는 화면에서 숨김 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 } .checks input[type=”checkbox”] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .checks input[type=”checkbox”] + label:before { /* 가짜 체크박스 */ content: ‘ ‘; display: inline-block; width: 21px; /* 체크박스의 너비를 지정 */ height: 21px; /* 체크박스의 높이를 지정 */ line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */ margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #fafafa; border: 1px solid #cacece; border-radius : 3px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); } .checks input[type=”checkbox”] + label:active:before, .checks input[type=”checkbox”]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .checks input[type=”checkbox”]:checked + label:before { /* 체크박스를 체크했을때 */ content: ‘\2714’; /* 체크표시 유니코드 사용 */ color: #99a1a7; text-shadow: 1px 1px #fff; background: #e9ecee; border-color: #adb8c0; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); }
.checks input[type=”checkbox”] 에서 checkbox를 숨기고 있는데, IE8에서는 체크박스를 display: none 하거나 visibility: hidden 으로 숨기면 :checked 기능 자체가 작동하지 않는다. 이는 아마도 추가한 폴리필의 한계로 추측된다.
에서 checkbox를 숨기고 있는데, IE8에서는 체크박스를 하거나 으로 숨기면 :checked 기능 자체가 작동하지 않는다. 이는 아마도 추가한 폴리필의 한계로 추측된다. 체크박스의 모양을 결정하는 .checks input[type=”checkbox”] + label:before 부분과 체크박스의 체크상태를 표시하는 .checks input[type=”checkbox”]:checked + label:before 부분은 배경이미지를 사용해서 표현해도 된다.
See the Pen checkbox Design by Douglas Ham (@uzugoer) on CodePen.
글자와 체크박스의 정렬
위에서 소개한 CSS에서는 글자와 체크박스의 정렬을 .checks input[type=”checkbox”] + label:before 부분의 vertical-align 속성과 margin 속성을 이용해 정렬했다. 이것은 거의 모든 브라우저에서 이상없이 작동되나, 모바일 크롬 브라우저에서는 정렬되지 못하고 체크박스의 최상단에 글자가 달라붙는 경우가 생길수 있다.
원인은 파악하지 못하였으며, 모바일 크롬브라우저의 버그로 추측하고 있다.
물론, 글자와 체크박스 사이의 정렬을 vertical-align 속성과 margin 에 의존하지 말고 position: absolute 를 이용하여 크로스 브라우징이 가능하다. 다만, 이 경우 글자크기와 체크박스의 크기가 변경될때 마다 다시 위치값을 정렬해야 하는 수고를 해야 된다.
수정된 코드는 아래와 같다.
.checks {position: relative;} .checks input[type=”checkbox”] { /* 실제 체크박스는 화면에서 숨김 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 } .checks input[type=”checkbox”] + label { display: inline-block; position: relative; padding-left: 30px; /* 글자와 체크박스 사이의 간격을 변경 */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .checks input[type=”checkbox”] + label:before { /* 가짜 체크박스 */ content: ”; position: absolute; left: 0; top: -4px; /* 이 값을 변경해서 글자와의 정렬 */ width: 21px; /* 체크박스의 너비를 지정 */ height: 21px; /* 체크박스의 높이를 지정 */ line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */ text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius : 3px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); } .checks input[type=”checkbox”] + label:active:before, .checks input[type=”checkbox”]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .checks input[type=”checkbox”]:checked + label:before { /* 체크박스를 체크했을때 */ content: ‘\2714’; /* 체크표시 유니코드 사용 */ color: #99a1a7; text-shadow: 1px 1px #fff; background: #e9ecee; border-color: #adb8c0; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); }
라디오버튼 디자인
기본적으로 체크박스 디자인과 유사하며, 대부분의 코드가 중복 사용된다. 기본 구조는 아래와 같다.
CSS도 체크박스와 마찬가지인데, 이도 모바일 크롬 브라우저를 고려해서 글자와 라디오버튼의 정렬을 position: absolute 를 이용했다.
.checks {position: relative;} .checks input[type=”radio”] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .checks input[type=”radio”] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .checks input[type=”radio”] + label:before { content: ”; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); } .checks input[type=”radio”] + label:active:before, .checks input[type=”radio”]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .checks input[type=”radio”]:checked + label:before { background: #E9ECEE; border-color: #adb8c0; } .checks input[type=”radio”]:checked + label:after { content: ”; position: absolute; top: 1px; left: 5px; width: 13px; height: 13px; background: #99a1a7; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }
See the Pen Radio Design by Douglas Ham (@uzugoer) on CodePen.
이 예제들을 이용해서 다양한 체크박스와 라디오버튼을 만들수 있기를 바랜다.
체크박스와 라디오버튼 디자인 기초
반응형
체크박스와 라디오버튼은 사용자가 선택할 수 있는 대상을 표현하는 폼 요소입니다.
선택적인 값을 표시하고, 선택된 값을 서버로 전송할 수 있는 단순한 기능을 하는 요소입니다. 그리고 이 선택된 값을 표시하는 상태를 “checked” 속성으로 표현을 합니다.
체크박스는 1개 이상의 선택된 항목을, 라디오버튼은 그룹에서 1개의 선택된 항목을 “checked” 속성으로 표현합니다.
중요한 것은 HTML 요소의 “checked” 속성을 CSS에서 접근할 수 있고, “checked” 상태 값에 따라 CSS 표현을 다르게 할 수 있는 점입니다.
사용자 선택에 의해 선택된 체크박스, 또는 라디오버튼은 상태가 달라지고 거기에 맞는 CSS를 개별적으로 적용할 수 있습니다. 작고, 파랑색으로만 선택되는 체크박스와 라디오버튼을 원하는 디자인으로 변경할 수도 있습니다.
1. 큰 체크박스 만들기
웹 브라우저에서 제공되는 체크박스와 라디오버튼은 크기가 다소 작습니다.
다음처럼 CSS를 적용하면 체크박스, 또는 라디오 박스의 체크 표시 영역 크기를 더 크게 만들 수 있습니다.
.checkbox input.checkbox1{ font-size: 1em; width: 1.25em; /* 너비 설정 */ height: 1.25em; /* 높이 설정 */ vertical-align: middle; } .checkbox input.checkbox1 + label{ /* 라벨 텍스트 크기와 수직 정렬 맞춤 */ font-size: 1.125em; vertical-align: middle; }
2. 체크박스에 디자인 입히기
기본 체크박스와 라디오버튼은 검정색 테두리만 있는 기본 상태에서 선택되면 파랑색으로 영역이 채워지는 단조로운 형태를 가집니다.
CSS를 활용하면 다음처럼 예쁜 체크박스, 또는 라디오버튼으로 탈바꿈시킬 수 있습니다.
.checkbox2 + label{ position: relative; } .checkbox input[type=”checkbox”].checkbox2{ display: none; } .checkbox input[type=”checkbox”].checkbox2 + label:before { /* 체크박스 배경 */ display: inline-block; content: ”; width: 1.25em; height: 1.25em; border: 2px solid #a66; background-color: #a00; border-radius: 50%; margin: 0 5px -6px 0; } .checkbox input[type=”checkbox”].checkbox2 + label:after { /* 체크 마크 */ position: absolute; left: 4px; content: ‘✔’; /* 체크 마크 ASCii 문자 */ font-size: 1.5em; line-height: 0.8; color: #a88; transition: all .3s; } [type=”checkbox”].checkbox2 + label:after { /* 기본 상태 – 투명에 크기 0 */ opacity: 0; transform: scale(0); } [type=”checkbox”]:checked.checkbox2 + label:after { /* 체크 상태 – 불투명에 크기 1 */ opacity: 1; transform: scale(1); }
3. 스마트폰 스위치버튼 만들기
CSS 속성과 가상 요소를 활용하면 모바일 기기들의 환경 설정 화면에서 많이 사용하는 온/오프 스위치 디자인 모양을 한 체크박스, 또는 라디오버튼을 만들 수 있습니다.
.toggle { position: relative; display: inline-block; } .toggle input { display: none; } .toggle label { display: block; width: 48px; height: 24px; text-indent: -250%; /* 라벨 텍스트 왼쪽으로 이동*/ user-select: none; /* 라벨 텍스트 선택 차단 */ } .toggle label::before, .toggle label::after { content: “”; display: block; position: absolute; cursor: pointer; } .toggle label::before { /* 배경 */ width: 100%; height: 100%; background-color: #dedede; border-radius: 1em; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease;/* 배경색 애니메이션*/ } .toggle label::after { /* 스위치 */ top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.45); -webkit-transition: left 0.25s ease; transition: left 0.25s ease; /* 스위치 이동 애니메이션 */ } .toggle input:checked + label::before { background-color: skyblue; /* 켠 상태 배경색 */ } .toggle input:checked + label::after { /* 켠 상태 스위치 위치 */ left: 24px; }
4. 이미지/아이콘 토글하기
체크박스, 또는 라디오버튼을 이용해 이미지, 아이콘을 변경하는 동작을 만들 수 있습니다.
앞서 만들었던 체크박스, 또는 라디오버튼 동작에 반응해 추가로 표시될 이미지/컨텐츠를 붙이면 반응형으로 컨텐츠를 표시할 수도 있습니다.
체크박스와 라디오버튼 UI를 만드는 기본 구조는 다음 HTML 구현처럼 “input + label + content” 3개로 만드는 것을 기본으로 합니다. “” 태그 바로 뒤에 클릭할 텍스트를 표시하는 “
” 블록 태그가 옵니다..toggle2 input{ display: none; } .toggle2 label { /* 스위치 텍스트 버튼 */ background-color: #a00; color: #fff; padding: 0.5rem 1rem; border-radius: 1rem; user-select: none; cursor: pointer; } .toggle2 .content::after { /* 동작 기본 아이콘/이미지 */ content: “☀”; /* 온/오프 ASCii 아이콘 */ color: #e0e0e0; font-size: 6em; } .toggle2 input:checked + label + .content::after { /* 체크 상태 이미지 */ content: “☀”; color: yellow; }
체크박스나 라디오버튼을 이용해 구현하는 대부분의 반응형 UI는 “input + label + content” 구조를 기준으로 만들어집니다.
앞의 예처럼 “
” 구조로 한 덩어리로 묶어서 UI 1가지를 구현한다고 이해를 하면 쉽습니다.
“” 태그는 대부분의 디자인 UI 구현에서 감춤 처리되며, 아무런 기능을 하지 않습니다.
실제 클릭을 하는 동작을 위한 텍스트, 아이콘/이미지는 “
라벨 태그를 클릭하면 별도로 표시할 이미지, 컨텐츠가 있을 경우 “.content” 클래스를 가진 요소에 담게됩니다.
앞서의 예에서는 표시할 컨텐츠용 이미지를 아스키 코드 문자를 가상 요소를 이용해 붙였지만 “background-image: url();” 속성이나, “content: url();” 속성을 이용해 텍스트 대신 이미지를 붙일 수도 있습니다.
5. 이미지 선택 목록 만들기
라디오버튼을 활용해 여러 개의 아이콘/이미지 목록에서 하나를 클릭하면 활성화되어 표시되는 선택 옵션을 만들 수 있습니다. 쇼핑몰 상품 옵션, 질문 유형, 프로필 정보 선택 사항, 환경설정 선택 사항 등 다양한 용도에 사용할 수 있습니다.
.toggle3 input[type=radio]{ display: none; } .toggle3 input[type=radio] + label { color: #e0e0e0; font-size: 5em; } .toggle3 input[type=radio]:checked + label { color: #000; }
사용된 예제는 다음 압축 파일을 다운로드 받아서 확인할 수 있습니다.
checkbox1.zip 0.00MB
CSS 라디오 버튼 스타일 가이드
이번 포스팅에서는 CSS를 이용하여 라디오 버튼을 스타일하는 요령에 대해서 알아보겠습니다. 차근차근 따라오시다보면 아래와 같은 라디오 버튼을 만드실 수 있으실 거에요. 🍅😄
See the Pen css-html-radio by Dale Seo (@daleseo) on CodePen.
왜, 라디오 버튼을 스타일할까?
먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다.
일반적으로 웹사이트에서 라디오 버튼은 브라우저나 운영체제, 디바이스에 따라서 미묘하게 다르게 표현이 됩니다. 그래서 플랫폼에 구애받지 않고 일관적인 사용자 경험을 제공하기 위해서 라디오 버튼에 커스텀 스타일을 적용하는 경우가 많습니다.
예를 들어, 일반적으로 푸른색 계열로 칠해지는 라디오 버튼은 파란색을 브랜드 색상으로 사용하지 않는 이상 웹사이트의 통일감을 해치게 됩니다. 뿐만 아니라 기본 스타일을 적용된 라디오 버튼은 크기가 고정되어 있기 때문에 반응형 웹디자인을 할 때 걸림돌이 됩니다.
HTML 코드
HTML 코드 상에서 라디오 버튼은 요소를 사용하며 바로 옆에
< div > < input type = " radio " id = " mail " name = " contact " value = " mail " /> < label for = " mail " > 우편
그런데 이렇게 요소와
요소로 한 번 더 감싸줄 필요도 생깁니다.하지만 라디오 버튼과 레이블을 좀 더 간단하게 암묵적으로 연결해줄 수도 있는데요. 바로
< label > < input type = " radio " name = " contact " value = " mail " /> < span > 우편
본 포스팅에서는 후자와 같은 형태로 라디오 버튼에 대한 HTML 코드를 작성하려고 합니다.
사용자가 네가지 연락 방법 중에서 하나를 선택하게 하기 위한 4개의 라디오 버튼을 마크업해보겠습니다. 초기 상태로 이메일이 선택되게 하고, 팩스는 선택이 불가능하게 하였습니다.
< fieldset > < label > < input type = " radio " name = " contact " value = " email " checked /> < span > 이메일 < label > < input type = " radio " name = " contact " value = " phone " /> < span > 전화 < label > < input type = " radio " name = " contact " value = " fax " disabled /> < span > 팩스 < label > < input type = " radio " name = " contact " value = " mail " /> < span > 우편
요소 간 수평 정렬
라디오 버튼과 레이블 텍스트는 한 줄에 배치되었을 때 텍스트가 커질수록 라디오 버튼이 아래로 내려오게 됩니다. 따라서 수직 방향으로 중앙 정렬을 맞추기 위해서 이 두 요소에 vertical-align: middle; 스타일을 적용해줍니다.
라디오 버튼과 레이블 텍스트를 감싸고 있는 레이블 요소에는 글꼴 크기와 줄 높이와 같은 기본적인 스타일을 해주겠습니다.
label { font-size : 20px ; line-height : 2rem ; padding : 0.2em 0.4em ; } span { vertical-align : middle ; } [type=”radio”] { vertical-align : middle ; }
기본 스타일 제거
예전에는 라디오 버튼을 스타일하기 위해서 요소를 화면에서 숨기고 임의로 만든 요소를 보여주는 등 일종의 눈속임을 하기 위해서 별에 별짓을 다 했었는데요. 이러한 스타일 방식은 CSS 코드가 복잡해지고, 실수할 위험도 높으며, 자칫하면 웹 접근성(accessibility)도 해칠수 있기 때문에 요즘에는 추천드리고 싶지 않습니다.
브라우저 호환성이 좋아진 최근에는 CSS에 비교적 최근에 추가된 appearance 속성을 활용하여 요소를 직접 스타일을 하는 방식이 더 선호되는데요. 라디오 버튼에 appearance: none; 을 적용하면 기본 스타일이 깔끔하게 제거되기 때문에 백지 상태에서 스타일이 가능해집니다.
[type=”radio”] { vertical-align : middle ; appearance : none ; }이제 라디오 버튼이 화면에서 완전히 사라진 것처럼 보일 텐데요. 사실은 라디오 버튼의 크기가 0px x 0px 로 완전히 쪼그라들어버린 것입니다.
라디오 버튼 스타일
이제부터 본격적으로 라디오 버튼을 우리가 원하는데로 스타일해볼까요?
우선 체크되지 않은 기본 상태부터 시작할건데요. 테두리를 튀지않는 회색으로 주겠습니다.
오랜 시간 학습의 결과로 수많은 인터넷 사용자들이 무의식적으로 라디오 버튼은 둥근 모양이라고 인식하고 있습니다. 따라서 border-radius 속성을 50% 로 설정하여 라디오 버튼이 완전히 동그란 형태로 표시되게 하는 것이 무엇보다 중요하겠습니다.
라디오 버튼의 너비와 높이는 레이블 요소에 설정된 폰트 크기에 따라 상대적으로 커지거나 줄어들 수 있도록 em 단위를 사용하였습니다. 그리고 max() 함수를 활용하여 테두리의 두께가 2px 보다는 얇아지지 않는 선에서 폰트 크기에 비례해서 늘어나거나 줄어들도록 해주었습니다.
[type=”radio”] { vertical-align : middle ; appearance : none ; border : max ( 2px , 0.1em ) solid gray ; border-radius : 50% ; width : 1.25em ; height : 1.25em ; }체크 상태 스타일
사용자가 선택을 하여 체크가 된 상태의 라디오 버튼은 도드라져 보여야하겠죠?
테두리를 두툼하게 늘려주고, 토마토 색으로 테투리를 강조해주겠습니다.
[type=”radio”]:checked { border : 0.4em solid tomato ; }포커스 상태 스타일
웹 접근성(accessibility) 측면에서 마우스 사용자 뿐만 아니라 키보드 사용자도 고려하는 것이 상당히 중요한데요. 현재 키보드 포커스가 어느 라디오 버튼에 있는지를 알려줘야지 키보드 사용자도 큰 어려움 없이 원하는 라디오 버튼을 선택할 수 있을 것입니다.
키보드로 선택된 라디오 버튼에서는 점선의 포커스 링(ring)이 나타날 수 있도록 스타일을 추가해주겠습니다.
[type=”radio”]:focus-visible { outline-offset : max ( 2px , 0.1em ) ; outline : max ( 2px , 0.1em ) dotted tomato ; }호버 상태 스타일
이번에는 마우스 사용자를 위해서 마우스 포인터가 레이블 요소 위에 있을 때 그림자 효과를 살짝 주겠습니다. 그리고 라디오 버튼 위로 마우스 커서가 왔을 때 포인터 모양이 나타나도록 해주면 사용자에게 도움이 되겠죠?
[type=”radio”]:hover { box-shadow : 0 0 0 max ( 4px , 0.2em ) lightgray ; cursor : pointer ; }불능 상태 스타일
선택이 불가능한 라디오 버튼은 굳이 사용자가 여러 번 클릭해보지 않아도 바로 알아챌 수 있도록 스타일해주는 것이 바람직하겠죠?
배경색을 회색톤으로 바꿔주고 불투명도를 살짝 낮춰주겠습니다. 마우스 커서를 통해서도 체크가 불가능하다고 표시해주면 좋을 것 같네요.
[type=”radio”]:disabled { background-color : lightgray ; box-shadow : none ; opacity : 0.7 ; cursor : not-allowed ; } [type=”radio”]:disabled + span { opacity : 0.7 ; cursor : not-allowed ; }애니메이션
마지막으로 약간의 애니메이션 효과까지 첨가해주면 금상첨화겠죠? 😁
[type=”radio”] { vertical-align : middle ; appearance : none ; border : max ( 2px , 0.1em ) solid gray ; border-radius : 50% ; width : 1.25em ; height : 1.25em ; transition : border 0.5s ease-in-out ; }전체 코드
본 포스팅에서 작성한 코드는 아래에서 확인하고 직접 실행해보실 수 있습니다.
See the Pen css-html-radio by Dale Seo (@daleseo) on CodePen.
마치면서
지금까지 CSS로 다양한 커스텀 스타일을 적용하면서 웹사이트에 적용할 수 있는 간단한 라디오 버튼을 함께 구현해보았습니다.
UI 개발하다 보면 아무래도 시각적인 부분에 치중하기 쉬운데요. 웹 접근성(accessibility)도 어느정도 염두하셔서 좀 더 많은 사용자를 배려한 스타일을 하실 수 있으셨으면 좋겠습니다.
[Insight] 라디오 버튼 디자인 할 때 고려할 점 4가지
이 버튼은 여러 개 중 한가지가 눌려있을 때 다른 버튼을 누르게 되면 기존에 눌려있던 버튼이 튕겨져 나오게 되고,
마지막에 눌렀던 한가지의 버튼만 활성화 되는 특징을 가지고있습니다.
오늘 설명드릴 라디오 버튼 역시 하나의 선택만이 가능할 때 쓰는 UX버튼입니다.
체크박스,라디오버튼 디자인변경(커스텀 디자인)
체크박스와 라디오버튼 디자인 기초
체크박스와 라디오버튼은 사용자가 선택할 수 있는 대상을 표현하는 폼 요소입니다. 선택적인 값을 표시하고, 선택된 값을 서버로 전송할 수 있는 단순한 기능을 하는 요소입니다. 그리고 이 선
blogpack.tistory.com
체크박스와 라디오버튼
완전히 새로워 진 체크 컴포넌트를 사용해 크로스 브라우저와 크로스 기기로 일관된 체크 박스와 라디오 버튼을 만들 수 있습니다.
접근
브라우저의 기본 체크 박스와 라디오 버튼은 .form-check 의 도움을 받아 대체할 수 있습니다. 이는 두 입력 유형을 위한 클래스로, HTML 요소의 레이아웃과 동작을 개선하여 보다 높은 맞춤성과 크로스 브라우저의 일관성을 제공합니다. 체크 박스는 목록 중 하나 또는 여러 개를 선택하고, 라디오 버튼은 여러 목록 중 하나를 선택하는 것입니다.
구조적으로 과
체크 박스에서는 Bootstrap 사용자 정의 아이콘을 사용하여 선택되었거나 선택전 상태를 표시하고 있습니다.
체크박스
Default checkbox Checked checkbox
< div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "flexCheckDefault" > < label class = "form-check-label" for = "flexCheckDefault" > Default checkbox < div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "flexCheckChecked" checked > < label class = "form-check-label" for = "flexCheckChecked" > Checked checkbox
불확정
JavaScript를 수동으로 설정해 :indeterminate 가상 클래스를 사용할 수 있습니다 (이것을 지정하기 위해 이용 가능한 HTML 속성은 없습니다).
Indeterminate checkbox
< div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "flexCheckIndeterminate" > < label class = "form-check-label" for = "flexCheckIndeterminate" > Indeterminate checkbox
비활성화
disabled 속성을 추가하면
Disabled checkbox Disabled checked checkbox
< div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "flexCheckDisabled" disabled > < label class = "form-check-label" for = "flexCheckDisabled" > Disabled checkbox < div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "flexCheckCheckedDisabled" checked disabled > < label class = "form-check-label" for = "flexCheckCheckedDisabled" > Disabled checked checkbox
라디오버튼
Default radio Default checked radio
< div class = "form-check" > < input class = "form-check-input" type = "radio" name = "flexRadioDefault" id = "flexRadioDefault1" > < label class = "form-check-label" for = "flexRadioDefault1" > Default radio < div class = "form-check" > < input class = "form-check-input" type = "radio" name = "flexRadioDefault" id = "flexRadioDefault2" checked > < label class = "form-check-label" for = "flexRadioDefault2" > Default checked radio
비활성화
disabled 속성을 추가하면
Disabled radio Disabled checked radio
< div class = "form-check" > < input class = "form-check-input" type = "radio" name = "flexRadioDisabled" id = "flexRadioDisabled" disabled > < label class = "form-check-label" for = "flexRadioDisabled" > Disabled radio < div class = "form-check" > < input class = "form-check-input" type = "radio" name = "flexRadioDisabled" id = "flexRadioCheckedDisabled" checked disabled > < label class = "form-check-label" for = "flexRadioCheckedDisabled" > Disabled checked radio
스위치
사용자 정의 체크 박스의 마크업을 가지고 있는 스위치는 토글 스위치를 렌더링하기 위해 .form-switch 클래스를 사용합니다. disabled 속성도 지원하고 있습니다.
Default switch checkbox input Checked switch checkbox input Disabled switch checkbox input Disabled checked switch checkbox input
< div class = "form-check form-switch" > < input class = "form-check-input" type = "checkbox" id = "flexSwitchCheckDefault" > < label class = "form-check-label" for = "flexSwitchCheckDefault" > Default switch checkbox input < div class = "form-check form-switch" > < input class = "form-check-input" type = "checkbox" id = "flexSwitchCheckChecked" checked > < label class = "form-check-label" for = "flexSwitchCheckChecked" > Checked switch checkbox input < div class = "form-check form-switch" > < input class = "form-check-input" type = "checkbox" id = "flexSwitchCheckDisabled" disabled > < label class = "form-check-label" for = "flexSwitchCheckDisabled" > Disabled switch checkbox input < div class = "form-check form-switch" > < input class = "form-check-input" type = "checkbox" id = "flexSwitchCheckCheckedDisabled" checked disabled > < label class = "form-check-label" for = "flexSwitchCheckCheckedDisabled" > Disabled checked switch checkbox input
기본값 (중첩됨)
기본적으로 직계 형제인 체크 박스나 라디오 버튼은 .form-check 로 수직으로 쌓여 적절한 간격으로 배치됩니다.
Default checkbox Disabled checkbox
< div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "defaultCheck1" > < label class = "form-check-label" for = "defaultCheck1" > Default checkbox < div class = "form-check" > < input class = "form-check-input" type = "checkbox" value = "" id = "defaultCheck2" disabled > < label class = "form-check-label" for = "defaultCheck2" > Disabled checkbox
Default radio Second default radio Disabled radio
< div class = "form-check" > < input class = "form-check-input" type = "radio" name = "exampleRadios" id = "exampleRadios1" value = "option1" checked > < label class = "form-check-label" for = "exampleRadios1" > Default radio < div class = "form-check" > < input class = "form-check-input" type = "radio" name = "exampleRadios" id = "exampleRadios2" value = "option2" > < label class = "form-check-label" for = "exampleRadios2" > Second default radio < div class = "form-check" > < input class = "form-check-input" type = "radio" name = "exampleRadios" id = "exampleRadios3" value = "option3" disabled > < label class = "form-check-label" for = "exampleRadios3" > Disabled radio
인라인
.form-check 에 .form-check-inline 클래스를 추가해 체크 박스나 라디오 버튼을 같은 수평 방향에 놓아 그룹화할 수 있습니다.
1 2 3 (disabled)
< div class = "form-check form-check-inline" > < input class = "form-check-input" type = "checkbox" id = "inlineCheckbox1" value = "option1" > < label class = "form-check-label" for = "inlineCheckbox1" > 1 < div class = "form-check form-check-inline" > < input class = "form-check-input" type = "checkbox" id = "inlineCheckbox2" value = "option2" > < label class = "form-check-label" for = "inlineCheckbox2" > 2 < div class = "form-check form-check-inline" > < input class = "form-check-input" type = "checkbox" id = "inlineCheckbox3" value = "option3" disabled > < label class = "form-check-label" for = "inlineCheckbox3" > 3 (disabled)
1 2 3 (disabled)
< div class = "form-check form-check-inline" > < input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "inlineRadio1" value = "option1" > < label class = "form-check-label" for = "inlineRadio1" > 1 < div class = "form-check form-check-inline" > < input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "inlineRadio2" value = "option2" > < label class = "form-check-label" for = "inlineRadio2" > 2 < div class = "form-check form-check-inline" > < input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "inlineRadio3" value = "option3" disabled > < label class = "form-check-label" for = "inlineRadio3" > 3 (disabled)
라벨 없음
라벨 텍스트가 없는 체크 박스나 라디오 버튼을 사용하고 싶을 때에는 .form-check 를 생략합니다. 지원 기술을 위해 어떤 형태로든 접근성에 맞는 이름을 제공해야 하는 것을 잊지 마세요.(예를 들어, aria-label 을 사용 한다든지 등). 자세한 내용은 forms overview accessibility을 참조해 주세요.
< div > < input class = "form-check-input" type = "checkbox" id = "checkboxNoLabel" value = "" aria-label = "..." > < div > < input class = "form-check-input" type = "radio" name = "radioNoLabel" id = "radioNoLabel1" value = "" aria-label = "..." >
버튼 토글
버튼과 같은 체크 박스나 라디오 버튼을 작성하기 위해서는
체크박스 토글 버튼
Single toggle
< input type = "checkbox" class = "btn-check" id = "btn-check" autocomplete = "off" > < label class = "btn btn-primary" for = "btn-check" > Single toggle
Checked
< input type = "checkbox" class = "btn-check" id = "btn-check-2" checked autocomplete = "off" > < label class = "btn btn-primary" for = "btn-check-2" > Checked
Disabled
< input type = "checkbox" class = "btn-check" id = "btn-check-3" autocomplete = "off" disabled > < label class = "btn btn-primary" for = "btn-check-3" > Disabled
시각적으로 이러한 체크 박스 토글버튼은 button plugin toggle buttons 과 같습니다. 체크 박스의 토글 버튼은 스크린 리더에서는 “checked”/“not checked”로 표시되는데(외형은 체크 박스이기 때문에), 버튼의 토글 버튼은 “button”/“button pressed”로 표시됩니다. 이러한 두 가지 접근법 중 어느 쪽을 선택할지는 만들고자 하는 토글 유형과 그 토글이 체크 박스일 때와 실제 버튼일때 중, 어느 쪽이 사용자에게 더 의미가 있는지에 따라 달라집니다.
라디오버튼 토글 버튼
Checked Radio Disabled Radio
< input type = "radio" class = "btn-check" name = "options" id = "option1" autocomplete = "off" checked > < label class = "btn btn-secondary" for = "option1" > Checked < input type = "radio" class = "btn-check" name = "options" id = "option2" autocomplete = "off" > < label class = "btn btn-secondary" for = "option2" > Radio < input type = "radio" class = "btn-check" name = "options" id = "option3" autocomplete = "off" disabled > < label class = "btn btn-secondary" for = "option3" > Disabled < input type = "radio" class = "btn-check" name = "options" id = "option4" autocomplete = "off" > < label class = "btn btn-secondary" for = "option4" > Radio
테두리 스타일
다양한 종류의 .btn 이 지원되고 있습니다.
Single toggle
Checked
Checked success radio Danger radio
< input type = "checkbox" class = "btn-check" id = "btn-check-outlined" autocomplete = "off" > < label class = "btn btn-outline-primary" for = "btn-check-outlined" > Single toggle < br > < input type = "checkbox" class = "btn-check" id = "btn-check-2-outlined" checked autocomplete = "off" > < label class = "btn btn-outline-secondary" for = "btn-check-2-outlined" > Checked < br > < input type = "radio" class = "btn-check" name = "options-outlined" id = "success-outlined" autocomplete = "off" checked > < label class = "btn btn-outline-success" for = "success-outlined" > Checked success radio < input type = "radio" class = "btn-check" name = "options-outlined" id = "danger-outlined" autocomplete = "off" > < label class = "btn btn-outline-danger" for = "danger-outlined" > Danger radio
Sass
변수
[css] radio버튼 디자인 바꾸기
float 속성 레이아웃을 정렬하는 방법에대해 알아볼까합니다. 좌우 정렬을 위한 속성으로는 세가지가 있는데요. 첫번째, 이번글의 주제인 float입니다. 두번째, inline-block이 있고요. 세번째, flex가 있습니다. 이 셋 모두 css에서 좌우정렬이나 배치를 할 수 있는 속성입니다. 그중 제가 현재 가장 많이 사용하고 있는 float에 대해 설명할까 합니다. float는 레이아웃 정렬을 위해 제가 가장 많이 사용하는 속성인데요 속성 값으로 lfet(왼쪽띄움);right(오른쪽띄움);none(기본) 이 있습니다. 사용방법 안녕하세요 반갑습니다 – 예제 https://codepen.io/seozzz/pen/yLBRWqE 이렇게 좌우정렬이 되는데요 여기서 반드시 whidth 값이 존재해야 합니다. 그리고 주의할 점.. 공감수 0
키워드에 대한 정보 라디오 버튼 디자인
다음은 Bing에서 라디오 버튼 디자인 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 HTML 및 CSS를 사용하여 사용자 정의 라디오 버튼 디자인
HTML #및 #CSS를 #사용하여 #사용자 #정의 #라디오 #버튼 #디자인
YouTube에서 라디오 버튼 디자인 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 HTML 및 CSS를 사용하여 사용자 정의 라디오 버튼 디자인 | 라디오 버튼 디자인, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
