순수한 CSS로 스타일 스위처 구축 : 확인

몇 년 전, 웹 개발자들은 CSS를 사용하여 JavaScript에 의존하지 않고 많은 것을 구현하고 구축 할 수 없었습니다. 그러나 오늘날 CSS는 한 줄의 JavaScript를 쓰지 않고 강력한 일을 할 수있을 정도로 성숙합니다. CSS의 힘을 보여주는 "CSS 전용 접근"에 관한 몇 가지 기사를 읽었을 수도 있습니다.

CSS 전용 접근 방식과 관련하여 우리는 다음을 무시할 수 없습니다. 물론, 나는이 기술에 대해 처음으로 쓰는 것이 아니며, 폼 요소를 JavaScript 대체물로 사용하는 것에 관한 다른 광범위한 토론이있었습니다. 예를 들어 Louis Lazaris 의이 Adobe 기사와 Ryan Seddon 의이 멋진 슬라이드 쇼. 키 테이크 아웃

The : CSS의 확인 된 의사 클래스 선택기를 사용하여 JavaScript 라인을 작성하지 않고도 스타일 스위처를 구축 할 수 있습니다. 확인 또는 선택한 라디오 또는 확인란 요소를 선택합니다. the : 확인 된 의사 클래스 선택기는 입력 및 레이블 요소와 함께 작동합니다. 클릭하면 레이블 요소의 'for'속성은 관련 입력 요소를 선택하거나 선택하여 다음을 사용하여 : 확인 된 선택기. . CSS '위치 : 고정'선언은 '상단'및 '오른쪽'속성과 함께 페이지에 요소를 배치하는 데 사용될 수 있습니다. ‘Z-INDEX’속성은 라벨이 페이지의 다른 요소 위에 유지되도록합니다. : 확인 된 의사 클래스 선택기는 관련 레이블 요소와의 사용자 상호 작용을 기반으로 요소의 배경을 변경하거나 컨텐츠를 숨기거나 표시하거나 다른 스타일을 적용하는 데 사용될 수 있습니다. the : 확인 된 의사 클래스 선택기는 인접한 형제 자매 선택기 () 및 일반 형제 자매 선택기 (~)와 작동하여 페이지의 다른 요소간에 상호 작용할 수 있습니다. 이 기술은 웹 페이지에서 다양한 대화식 기능을 만드는 데 사용될 수 있습니다.

사용 : 점검 간단히 말해서 : 점검 된 의사 클래스 선택기는 확인 또는 선택된 라디오 또는 확인란 요소를 나타냅니다. 사용자는 확인란을 확인하거나 라디오 버튼 세트에서 다른 값을 선택하여 이러한 요소의 상태를 변경할 수 있습니다. 더 깊이 다이빙하기 전에이 튜토리얼 전체에서 우리가 무엇을 만들 것인지 이해하기 위해 최종 데모를 살펴보십시오. Codepen에서 SitePoint (@SitePoint)에 의해 확인 된 순수한 CSS가있는 스타일 스위처 참조. 이제 시작합시다.

설정 상자 구축 데모에서는 기어 아이콘이 있고 클릭하면 일부 옵션이있는 상자가 어떻게 나타나는지 알았을 것입니다. 그 상자를 구성하는 HTML과 CSS를 설명하기 전에 다음 코드를 살펴보십시오. 라벨을 보여주는 데만 관심이 있으므로 위의 코드는 확인란과 라디오 버튼을 숨기는 데 사용됩니다. 또한 모든 레이블에는 레이블이 페이지의 다른 요소 위에 머무를 수 있도록 z-index 속성이있는 설정-박스 요소 클래스가 있습니다. 이제 설정 상자를 구성하는 코드를 분해 할 수 있습니다. 기어 버튼부터 시작하겠습니다. HTML은 다음과 같습니다

및 CSS :

형식 요소를 JavaScript 교체로 사용하는 것에 대한 기사를 읽은 경우, 입력 및 레이블 요소를 함께 사용해야한다는 것을 이미 알고 있어야하므로 둘 중 하나가 제거되면 아무것도 작동하지 않습니다. 따라서 AN과 ID 값과 일치하는 A 속성이있는 레이블이있는 확인란 입력이 있습니다. 또한 CSS 후크에 사용할 Settings-BTN 클래스를 추가했습니다.

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

CSS에서 라벨에 위치가 주어집니다. 적절한 방향 속성/값 (상단 및 오른쪽)이있는 고정 선언. 다음은

가상으로

버튼을 포함하는 흰색 상자입니다. html 먼저 :

및 CSS :

상자는 "Buttons-Wrapper"및 "Settings-Box-Element"클래스가있는 단일 DIV 요소입니다. 앞서 말했듯이 후자의 클래스는 주로 요소에게 z-index 값을 제공하는 데 사용됩니다. "버튼 래퍼"는 DIV 요소를 스타일링하는 데 사용됩니다. 보시다시피, DIV의 너비는 200px의 너비와 데모에 보이는 5 개의 버튼을 수용하기 위해 240px 높이가 주어졌습니다. 또한, DIV에는 고정 된 위치 값과 적절한 권리 및 상단 속성이 제공됩니다. 여기서 명심해야 할 유일한 것은 올바른 속성이 너비와 동일한 값을 가져야하지만 음수에 있어야한다는 것입니다. 이제 나머지 마크 업, 즉 5 개의 버튼에 대한 코드를 살펴 보겠습니다. 주석은 그들이 제어하는 ​​배경 스타일을 나타냅니다

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

그리고 여기에 CSS가 있습니다 :

첫 번째 확인란에 "확인 된"속성이 주어졌습니다. 그것은 우리가 기본적으로 강조된 것이되기를 원하기 때문입니다.

모든 입력 필드에는 ID가 있으며 모든 레이블에는 입력 필드 중 하나의 ID와 일치하는 특성이 있습니다. 그리고 알 수 있듯이 알 수 있듯이, 그러한 기술의 비밀은 Attribute의 용 속성입니다. for 속성이있는 레이블이 클릭되면 해당 레이블과 관련된 요소가 선택/확인되므로 우리를 허용하기 때문입니다. 사용하려면 : 확인 된 선택기. 위의 모든 레이블에는 "레이아웃 버튼"클래스가 있습니다. 이 클래스는 버튼에 기본값과 폭, 패딩, 테두리 등과 같은 일반적인 스타일을 제공하는 데 사용됩니다. 다른 클래스는 고유 한 스타일을 각각에 추가하는 데 사용됩니다. 기어 아이콘과 흰색 상자에서 보았 듯이 위치 속성은 고정 된 값과 적절한 상단 및 오른쪽 속성과 함께 사용됩니다. 모든 레이블의 최고 값은 이전 레이블의 최고 값보다 45px가 더 큽니다. 이것은 버튼을 서로 위로 쌓아 놓는 것입니다. 또한 올바른 속성 값은 버튼의 너비와 동일하지만 음수입니다. 이제 CSS 코드의 마지막 부분을 살펴보십시오 :

위의 CSS는 선택한 라디오 버튼과 관련된 레이블의 기본 스타일을 변경하는 데 사용됩니다 (4 개의 라디오 버튼이 있습니다). 인접한 형제 자매 선택기를 사용하여 "Radio"유형의 입력 필드가 선행되는 모든 레이블을 타겟팅했습니다. 보시다시피, 배경 및 테두리 속성에는 값 #e83737 (붉은 색)과 색상 속성 값 #fff가 주어졌습니다. 정말 화려하거나 복잡한 것은 없습니다.

html의 나머지 요소는 div : 내부에 감싸게됩니다.

위의 코드에서 설정 상자의 모든 요소를 ​​독립적으로 배치 한 곳에서 DIV 또는 섹션 요소 안에 모두 래핑 하고이 단일 요소를 배치 할 수 있으므로 물건을 더 간단하게 만듭니다. 이것은 단순히 부모 요소를 선택할 수없고 형제 만 선택할 수 없기 때문에 수행됩니다.

따라서이 경우 모든 주요 내용은 DIV 내부에 래핑됩니다. 그리고 나중에 볼 수 있듯이,이 div의 스타일을 바꿀 수 있으려면 다음과 비슷한 것을 작성하여 해당 DIV를 선택해야합니다.

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

여기서 일반 형제 자매 선택기를 사용하여 메인 디브를 선택합니다. 이것이 유일한 방법입니다. 기어 아이콘을 클릭 기어 아이콘을 클릭하면 설정 상자가 나타납니다. 다음은이를 수행 할 코드입니다.

사용자가 기어 아이콘을 클릭하면 확인란이 선택되고 여기에 마법이 온다. 기어 아이콘이 클릭되면 다음이 발생합니다.

인접한 형제 자매 선택기 ()를 사용하여, 즉시 이후의 레이블이 선택된 후 뷰포트 오른쪽에서 200 픽셀을 이동시킨 후. General Sibling Selector를 사용하여 클래스 "Buttons-Wrapper"및 "Layout-Buttons"가있는 요소를 선택한 다음 각각 0 픽셀과 30 픽셀로 이동하여 오른쪽에서 각각 이동합니다. 뷰포트

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

인접한 형제 자매 선택기와 일반 형제 자매 선택기는이 기술이 없으면 작동하지 않기 때문에 필수 불가결합니다.

. 배경 변경 라디오 버튼에 대한 HTML 코드를 상기시켜 드리겠습니다.

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

우리가 바꿀 배경은 .main-wrapper 요소의 배경입니다. CSS는 다음과 같습니다.

HTML에는 4 개의 입력 요소가 유형 = "radio"와 4 개의 레이블이 있음을 알 수 있습니다. 라벨을 클릭하면 해당 레이블과 관련된 입력이 선택되어 다음과 일치합니다. 그런 다음 클릭 할 레이블에 따라 위의 네 가지 스타일 중 하나가 메인 래퍼에 적용됩니다.

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

내용 숨기기/표시 > Show/Hide 요소의 경우 를 사용하고 있습니다

그리고 여기에 CSS가 있습니다 :

이 경우 브라우저에 요소를 선택하고 표시하도록 설정하도록 지시합니다.

결론 이 선택기 기술을 사용하여 할 수있는 다른 많은 것들이 있으며 한계는 자신의 창의성입니다. 이 기술이 당신에게 새로운 것이라면,이 기사가 다른 가능성을 실험 할 수있는 출발점이되기를 바랍니다.

아래에는 완성 된 데모가 있습니다 : Codepen에서 SitePoint (@SitePoint)에 의해 확인 된 순수한 CSS가있는 스타일 스위처 참조. Checked를 사용하여 순수한 CSS로 스타일 스위처 구축에 대한 자주 묻는 질문 (FAQ) CSS에서 확인 된 의사 클래스의 목적은 무엇입니까?

: CSS의 확인 된 의사 클래스는 사용자 인터페이스 의사 클래스이며, 이는 선택 및 스타일, 라디오 버튼을 선택하는 데 사용됩니다. 사용자가 선택한 옵션 요소. 개발자가 JavaScript없이 대화식 및 동적 웹 페이지를 만들 수있는 강력한 도구입니다. 예를 들어, 다른 옵션을 선택하여 사용자가 웹 페이지의 모양을 변경할 수있는 스타일 스위처를 만드는 데 사용될 수 있습니다. : 현재 선택되거나 확인 된 HTML 요소를 선택하여 확인 된 의사 클래스 작업을 확인했습니다. 일반적으로 확인란이나 라디오 버튼과 같은 양식 요소와 함께 사용됩니다. 사용자가 이러한 요소 중 하나를 선택하거나 확인하면 : 확인 된 의사 클래스가 활성화되고 지정된 CSS 스타일을 해당 요소에 적용합니다. 이것은 선택한 옵션을 강조 표시하거나 콘텐츠를 표시하거나 숨기거나 웹 페이지의 전체 레이아웃을 변경하는 데 사용될 수 있습니다.

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

다른 HTML 요소와 함께 확인 된 의사 클래스를 사용할 수 있습니까?

: 확인 된 의사 클래스는 주로 확인란, 라디오 버튼 및 옵션 요소와 같은 폼 요소와 함께 사용됩니다. 그러나 HTML5 속성 'Contentestable'과 함께 다른 요소와 함께 사용할 수도 있습니다. 이를 통해 사용자가 편집 할 수있는 대화식 컨텐츠를 작성하고 '확인'또는 '선택된'상태에있을 때는 다르게 스타일을 지정할 수 있습니다. : 확인 된 의사 클래스를 어떻게 사용할 수 있습니까? 스타일 스위처를 만들 수 있습니까?

: 확인 된 의사 클래스를 사용하여 스타일 스위처를 만들려면 먼저 라디오 버튼으로 양식을 만들어야합니다. 각 스타일 옵션에 대한 확인란. 그런 다음 CSS에서 선택한 옵션에 따라 다음 스타일을 적용하기 위해 다음을 확인했습니다. 여기에는 웹 페이지 모양의 색 구성표, 글꼴, 레이아웃 또는 기타 다른 측면이 변경 될 수 있습니다.

다음을 사용할 수 있습니까? : 확인 된 의사 클래스를 사용하여 동적 컨텐츠를 생성 할 수 있습니다. 다른 CSS 선택기 및 속성과 결합하면 컨텐츠를 표시하거나 숨기거나 레이아웃을 변경하거나 사용자의 선택에 따라 대화식 기능을 만들 수 있습니다. 이것은 사용자 경험을 크게 향상시키고 웹 페이지를보다 매력적이고 대화식으로 만들 수 있습니다.

: JavaScript없이 확인 된 의사 클래스를 사용할 수 있습니까? 중 하나 : 확인 된 의사 클래스는 JavaScript없이 대화식 기능을 만들 수 있다는 것입니다. JavaScript는 웹 개발을위한 강력한 도구이지만 복잡하고 사용하기 어려울 수도 있습니다. : Checked Pseudo-Class는 대화식 내용을 만들기위한 간단한 대안을 제공합니다.

다른 브라우저에서 지원되는 확인 된 의사 클래스는 어떻게됩니까?

: 점검 된 의사 클래스는 널리 지원됩니다. Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 브라우저. 그러나 Internet Explorer 8 또는 이전 버전에서는 지원되지 않습니다. 따라서 이러한 이전 브라우저를 지원 해야하는 경우 대신 JavaScript 기반 솔루션을 사용해야 할 수도 있습니다.

다음을 사용할 수 있습니까? > 예, : 확인 된 의사 클래스를 사용하여 확인란과 라디오 버튼을 스타일링 할 수 있습니다. 기본적으로 이러한 양식 요소는 매우 기본적인 외관을 가지고 있지만 : 확인 된 의사 클래스를 사용하면 나머지 웹 사이트와 일치하도록 외관을 사용자 정의 할 수 있습니다. 이 요소가 선택할 때 색상, 크기, 모양 및 심지어 애니메이션을 변경할 수 있습니다.

: 확인 된 의사 클래스? 에 대한 일반적인 사용 사례는 무엇입니까? 확인 된 의사 클래스는 일반적으로 스타일 스위처, 아코디언, 탭 및 모달과 같은 대화식 기능을 만드는 데 사용됩니다. 또한 확인란 및 라디오 버튼과 같은 요소를 형성하거나 'Contentestable'속성으로 편집 가능한 컨텐츠를 작성하는 데 사용될 수 있습니다. 사용자 입력에 반응하는 기능은 사용자 경험을 향상시키는 강력한 도구입니다. 확인에 대한 제한이나 단점이 있습니까? 확인 된 의사 클래스?

: 점검 된 의사 클래스는 강력한 도구이지만 몇 가지 제한 사항이 있습니다. 현재 선택하거나 확인 된 요소 만 선택할 수 있으므로 다른 상태 나 조건을 기반으로 요소를 스타일링하는 데 사용할 수 없습니다. 또한 Internet Explorer 8 또는 이전 버전에서는 지원되지 않습니다. 이러한 한계에도 불구하고, 그것은 대화식 및 동적 웹 컨텐츠를 만들기위한 귀중한 도구입니다.

.

위 내용은 순수한 CSS로 스타일 스위처 구축 : 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!