CSS에서 Onclick 이벤트 시뮬레이션

1. Checkbox Hack을 사용하여 CSS에서 Onclick 이벤트 시뮬레이션
2. :target 의사 클래스를 사용하여 CSS에서 Onclick 이벤트 시뮬레이션
3. :focus 의사 클래스 및 tabindex 속성을 사용하여 CSS에서 Onclick 이벤트 시뮬레이션

이 문서에서는 CSS에서 onclick 이벤트를 시뮬레이션하는 방법을 소개합니다.

Checkbox Hack을 사용하여 CSS에서 Onclick 이벤트 시뮬레이션

CSS에서 정확한 JavaScript onclick 이벤트를 달성할 수 없습니다. 그러나 CSS 트릭을 사용하여 onclick 이벤트를 시뮬레이션할 수 있습니다. 이 트릭의 핵심 개념은 체크박스와 label 태그를 사용하는 것입니다. 확인란의 id 속성과 label의 for 속성에 대해 동일한 값을 사용하여 첨부할 수 있습니다. 레이블을 클릭하면 확인란이 선택 및 선택 해제됩니다. 따라서 :checked 선택기를 사용하여 클릭할 때 확인란을 선택할 수 있습니다. 인접한 형제 선택기 +를 사용하여 label 내부의 img 태그를 확인란과 함께 선택합니다. 따라서 확인란을 선택하면 이미지를 선택하고 크기를 변경할 수 있습니다. 따라서 CSS를 사용하여 onclick 기능을 구현할 수 있습니다.

예를 들어 <input> 태그에서 확인란을 만듭니다. 확인란의 id를 btn으로 설정합니다. 그 아래에 <label> 태그를 작성하고 for 속성 값과 동일한 값 btn을 작성하십시오. 레이블 태그 안에 이미지를 삽입합니다. 그런 다음 CSS에서 CSS 선택기로 id btn을 선택하고 display를 none으로 설정합니다. 그런 다음 btn id에서 :checked 선택기를 #btn:checked로 사용합니다. + 연산자를 사용하여 label 태그 내부의 img 태그를 선택합니다. 선택 후 높이와 너비를 75px로 설정합니다.

여기에서 이미지를 클릭하면 이미지의 크기가 작아집니다. 처음에 이미지는 100px 크기입니다. 따라서 CSS를 사용하여 onclick 기능을 구현했습니다.

예제 코드:

<input type="checkbox" id="btn"/>
<label for="btn">
    <img src="/img/DelftStack/logo.png" />
</label>

#btn{
    display: none;
}
#btn:checked + label > img {
    width: 75px;
    height: 75px;
}

:target 의사 클래스를 사용하여 CSS에서 Onclick 이벤트 시뮬레이션

:target 의사 클래스를 사용하여 CSS만 사용하여 onlick 이벤트를 시뮬레이션할 수 있습니다. 의사 클래스는 CSS에서 활성 요소의 스타일을 지정하는 데 도움이 됩니다. 이 방법에서 핵심 개념은 요소의 display 속성을 변경하는 것입니다. 요소가 비활성화되면 표시를 none으로 설정하고 :target 의사 클래스로 요소를 선택하면 block으로 변경할 수 있습니다. id가 URL의 조각과 :target 의사 클래스와 일치하는 요소의 스타일을 지정할 수 있습니다.

예를 들어 URL이 #day인 anchor 태그를 작성합니다. 오늘이 무슨 요일입니까?라는 텍스트를 작성하십시오. 태그 내부. 그 아래에 아이디가 day인 div 요소를 만듭니다. div 안에 Sunday 텍스트를 씁니다. CSS에서 id 선택기로 id day를 선택하고 display 속성을 none으로 설정합니다. 다음으로 :target 의사 클래스와 동일한 id를 선택하고 display 속성을 block으로 설정합니다.

아래 예에서 오늘은 무슨 요일입니까? 텍스트를 클릭하면 일요일이 나타납니다. :target 클래스를 사용하여 숨겨진 요소의 표시를 표시로 변경했습니다. 이런 식으로 CSS에서 onclick 이벤트를 시뮬레이션할 수 있습니다.

예제 코드:

<a href="#day">What day is today?</a>
<div id="day">Sunday</div>

#day {
    display: none;
}
#day:target {
    display: block;
}

:focus 의사 클래스 및 tabindex 속성을 사용하여 CSS에서 Onclick 이벤트 시뮬레이션

img 태그의 tabindex 속성과 :focus 의사 클래스를 사용하여 CSS에서 onclick 이벤트를 시뮬레이션할 수 있습니다. 예를 들어, id가 pic이고 tabindex 값이 0인 img 태그가 있는 이미지를 삽입합니다. CSS에서 :focus 유사 클래스가 있는 pic id를 선택합니다. 그런 다음 이미지의 높이와 너비를 75px로 변경합니다. 이미지의 초기 크기는 100px였습니다. 여기에서 이미지를 클릭하면 이미지의 크기가 75px로 변경됩니다. 따라서 CSS만 사용하여 onclick 이벤트를 달성할 수 있습니다.

예제 코드:

 <img id="pic" tabindex="0" src="/img/DelftStack/logo.png" />

#pic:focus{
    width: 75px;
    height: 75px
 }