대상이 없는 순수 CSS의 클릭 이벤트입니다. CSS의 대상. 어떻게 작동하나요? 의미론과 접근성은 어떻습니까?
CSS 없이 클릭 이벤트를 처리하는 방법이 있습니까? 자바스크립트를 사용하여. 이 방법을 다음과 함께 사용할 수 있습니다. :표적. 하지만 사용할 수 없다면 어떻게 될까요? 또 다른 방법이 있습니다.
데모를 시청하세요. JavaScript 코드 한 줄이 아닌 완전히 CSS로 만들어졌습니다. 이는:active 및:hover 선택기의 원래 사용을 기반으로 합니다.
설명
먼저 마우스를 눌렀을 때 표시되는 버튼과 블록을 포함할 컨테이너를 만들어야 합니다. 마크업 구조는 다음과 같습니다.
.wrapper 에서 마우스 버튼을 누를 때까지 .content 를 보이지 않게 만들어야 합니다. 문제를 해결하려면 .content 속성을 display: none 으로 설정하세요. 그런 다음 .wrapper에서 마우스 버튼을 누르면 .content에 대한 display: block 속성이 포함됩니다. .wrapper:active .content 속성을 설정하는 이유는 display: block 입니다. 이 상태에서는 마우스 버튼을 누를 때만 .content가 표시됩니다. 놓으면 .content가 다시 사라집니다. 이 문제를 해결하려면 마우스 커서가 .content 위에 있을 때 해당 요소에 display: block 속성이 할당되는지 확인하세요. 즉, .content:hover에 대한 display: block 속성을 설정합니다. CSS 코드는 다음과 같습니다:
콘텐츠( 디스플레이: 없음; ) .wrapper:active .content( 디스플레이: 블록; ) .content:hover( 디스플레이: 블록; )
남은 것은 "빗질"뿐이다 모습더 명확하게 만드십시오.
래퍼( 위치: 상대; ) .button( 배경: 노란색; 높이: 20px; 너비: 150px; ) .content( 위치: 절대; 패딩 상단: 20px; ) .content li( 배경: 빨간색; )
위 코드의 버튼 텍스트는 배경색이 노란색이고, 마우스 버튼을 눌렀을 때 표시되는 정보는 배경색이 빨간색입니다.
pseudo-class:target을 사용하면 인터넷에서 많은 튜토리얼을 쉽게 찾을 수 있습니다. 하지만, 남의 코드를 따라하지 말고, 그것을 이해하고 어떻게 작동하는지 이해하도록 노력해 볼까요? 물론 예 없이는 할 수 없습니다.
타겟이란 무엇인가요?
CSS:target에서 이는 일부 작업이 수행될 HTML 문서의 전체 "부분"을 선택할 수 있는 의사 클래스입니다. 예를 들어 텍스트 단락이나 제목이 될 수 있습니다.
의사 클래스는 첫 문자나 단락의 첫 번째 줄과 같은 요소의 특정 부분만 선택할 수 있는 의사 요소와 혼동되어서는 안 됩니다.
의사 클래스:
- a:링크(색상:#111)
- a:hover(색상:#222)
- div:첫 번째 자식(색상:#333)
의사 요소:
- p::첫 글자(색상:#444)
- p::첫 번째 줄(색상:#555)
나는 이 또는 저 가상 클래스 또는 가상 요소가 수행하는 작업이 구문을 통해 명확하다고 생각합니다. 가장 인기 있는 의사 클래스는 :hover이며 모든 웹마스터가 이 클래스를 접하게 되며 마우스를 올렸을 때 요소의 스타일을 설명합니다. target은 유사하게 작동하며 특정 상황이 발생할 때 요소의 스타일을 설명합니다.
조각 ID
간단히 말해서, 이것은 우리 의사 클래스가 묶여 있는 것입니다. 주소 끝에 단어나 문구를 삽입하는 해시태그입니다. 다음과 같습니다.
이 기술은 기사 내 전환에 사용할 수 있습니다. 예를 들어, 기사 시작 부분에서 작은 목차를 생성하고 요소를 클릭하면 링크가 연결되는 섹션으로 이동하며 섹션에 식별자를 추가해야 합니다.
이것은 작동합니다 순수 HTML, 트릭이 필요하지 않습니다. 작은 식별자.
다음을 사용하여 클릭 처리:target
이제 즉석 메뉴에서 원하는 섹션을 클릭하면 제목 스타일이 변경되어 현재 활성화된 단락이 표시되는지 확인해 보겠습니다.
H1( 글꼴: 30px Arial sans-serif; ) h1:target( 글꼴 크기: 50px; 텍스트 장식: 밑줄; 색상: #37aee4; )
코드는 매우 간단합니다. 클릭하면 제목의 크기와 색상이 변경되고 밑줄이 그어집니다. 생명을 추가하고(Ruslan, 안녕하세요) 제목 색상을 변경하는 애니메이션을 만들 수 있습니다.
H1 ( 글꼴: 30px Arial sans-serif; -webkit-transition: 색상 0.5초 용이성; -moz-transition: 색상 0.5초 용이성; -o-transition: 색상 0.5초 용이성; -ms-transition: 색상 0.5초 용이성; 전환: 색상 0.5초 용이함; )
활성 제목을 강조 표시하는 것은 좋지만 그 뒤에 나오는 텍스트의 디자인을 변경해야 하는 경우에는 어떻게 해야 할까요? CSS는 우리에게 이런 기회를 제공합니다. 다음과 같습니다.
H1:target + p (배경: #eaeaea; 패딩: 10px; )
이 경우 더하기 기호는 제목 뒤의 단락에 스타일을 적용해야 한다는 의미입니다. 따라서, 활성 헤더가 변경되면 섹션 디자인도 변경됩니다.그에게 "속한" 텍스트가 있습니다.
브라우저 지원
대상 의사 클래스는 CSS의 세 번째 버전에 속하며 버전 9 이전의 IE를 제외한 모든 브라우저에서 완벽하게 지원됩니다. 따라서 청중이 이 브라우저를 사용하는 경우 이를 구현해서는 안 됩니다. 하지만 탈출구가 있습니다. 이것은 IE가 CSS3와 작동하도록 할 수 있는 JS 라이브러리인 Selectvizr입니다. 스크립트를 추가하기만 하면 됩니다. 작동합니다.
유일한 것은 JQuery나 MooTools를 사용하지 않는 경우 이 스크립트가 작동하려면 이를 연결해야 한다는 것입니다. 공식 웹사이트에는 어떤 라이브러리가 무엇을 지원하는지 보여주는 표가 있습니다. 관심이 있으시면 읽어보십시오. 이것 .
결론
의사 클래스를 사용하는 것은 복잡해 보일 수 있지만 일단 작동 방식을 이해하고 나면 CSS만 사용하고 다른 것은 아무것도 사용하지 않고 놀라운 작업을 수행할 수 있습니다. 의사 클래스:대상- 이에 대한 훌륭한 확인입니다. 도움을 받으면 페이지와 방문자의 상호 작용을 근본적으로 변경할 수 있습니다. 위의 예는 가장 간단하지만 페이지에 약간의 상호작용성을 추가합니다. 하지만 이것은 단지 몇 줄의 코드일 뿐입니다.
아름다움과 브라우저 지원을 과도하게 사용하지 마십시오. 그러면 모든 것이 잘 될 것입니다.
좋은 하루 되세요
target="_blank는 태그를 만드는 데 사용됩니다. 새 창에서 링크를 열었습니다. 그런데 타겟 HTML이 뭔가요? 왜 비어 있어야 합니까? 그리고 가장 흥미로운 점은 왜 시작 부분에 밑줄이 있는 걸까요? 이 코드를 자세히 살펴보고 이것이 무엇을 하는지 이해해 봅시다.
대상 속성
목표값
대상 속성의 가장 일반적인 네 가지 값은 다음과 같습니다.
_본인
이런 일이 발생할 수 있는 유일한 상황은 태그가 HTML에서 사용되는 경우입니다.
_공백
새 탭이나 창에서 링크를 엽니다. 이는 사용자의 로컬 설정에 따라 결정되며 대부분의 브라우저에서는 새 탭 페이지입니다. 이 값을 사용하면 팝업 광고 단위를 구현할 수 있다고 생각할 수도 있습니다. 그러나 그것은 사실이 아닙니다. 대부분의 경우 HTML보다는 JavaScript가 사용됩니다.
이 대상 HTML 속성 값은 새 탭에서 외부 사이트 또는 PDF 파일에 대한 링크를 여는 데 가장 적합합니다. 덕분에 이 탭을 닫으면 사용자는 귀하의 사이트로 돌아갑니다. 그러나 각 링크가 새 탭에서 열리면 사용자가 탐색하기가 매우 어렵기 때문에 이를 남용해서는 안 됩니다.
_부모의
_parent 값은 현재 있는 프레임의 상위 프레임에 있는 링크를 엽니다. 프레임 생성을 위한 태그가 지정되므로 이는 널리 사용되는 값이 아닙니다.