HTML과 CSS를 사용하여 토글을 만드는 방법은 무엇입니까?

HTML과 CSS에서 토글 스위치는 사용자가 두 가지 상태(보통 "켜기"와 "끄기") 사이를 전환할 수 있게 해주는 그래픽 사용자 인터페이스 요소입니다. 토글 스위치는 "체크박스" 유형의 HTML 입력 요소와 CSS 스타일이 포함된 해당 레이블 요소를 사용하여 생성됩니다. label 요소는 입력이 선택되면 "on" 상태를 표시하고 입력이 선택되지 않으면 "off" 상태를 표시하도록 스타일이 지정됩니다.

웹사이트에 멋진 대화형 기능을 추가하고 싶다면 토글이 좋은 선택입니다. 여기서는 HTML과 CSS를 사용하여 토글을 만드는 방법을 살펴보겠습니다.

토글 스위치를 만드는 첫 번째 단계는 HTML을 사용하여 스위치의 기본 구조를 만드는 것입니다. div 요소를 컨테이너로 사용하고 스위치의 켜짐/꺼짐 상태를 나타내는 두 개의 입력 요소를 추가하여 이를 달성할 수 있습니다.

HTML 코드

이것은 HTML 코드 조각입니다.

으아악

이제 CSS를 사용하여 토글 스위치의 스타일을 지정해야 합니다. 먼저 컨테이너 div의 표시 속성을 "inline-block"으로 설정하고 스위치의 너비와 높이를 웹 사이트나 애플리케이션에 적합한 크기로 설정하세요. 또한 border-radius 속성을 사용하여 스위치의 원형 모양을 만듭니다.

label 요소에 의사 요소를 추가하고 해당 내용을 빈 문자열로 설정합니다. 또한 배경색을 지정하고 컨테이너 내부에 완전히 배치할 것입니다. 확인란을 선택한 상태에서 의사 요소를 오른쪽으로 이동하여 토글 스위치의 켜짐 상태를 표시합니다.

CSS에서 :checked 선택기를 사용하면 스위치가 켜졌을 때 흰색 배경색의 위치를 ​​변경하여 부드럽고 시각적으로 매력적인 전환을 만들 수 있습니다. 배경색, 글꼴 크기, 텍스트 정렬과 같은 다른 CSS 속성을 사용하여 스위치 모양을 사용자 정의할 수도 있습니다.

CSS 코드

CSS 코드는 다음과 같습니다.

으아악

예 1

다음은 HTML과 CSS를 사용하여 토글 스위치를 만드는 예입니다.

으아악

예 2

다음은 HTML과 CSS를 사용하여 토글 스위치를 만드는 또 다른 예입니다.

으아악

결론

HTML과 CSS를 사용하여 토글을 만드는 것은 웹사이트나 앱에 많은 가치를 추가할 수 있는 간단한 프로세스입니다. 이러한 단계를 따르고 다양한 CSS 속성을 실험함으로써 독특하고 시각적으로 매력적이고 사용하기 쉬운 토글을 만들 수 있습니다.

위 내용은 HTML과 CSS를 사용하여 토글을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!