pointer-events (포인터 이벤트 제어)
https://www.w3schools.com/cssref/css3_pr_pointer-events.asp
CSS pointer-events property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
pointer-events 속성은 말 그대로 pointer의 events를 제어한다.
예전에는 a
태그의 이벤트 속성을 제어할때 자바스크립트를 가지고 제어했지만,
이제는 css
에서 지원해주는 속성으로 컨트롤이 가능해졌다.
크게 2가지 auto
와 none
이 가장 많이 쓰이며 나머지 속성도 많지만 svg
를 위한것이라 크게 쓰이지 않는다.
<a href="#"> 링크 </a> <style> a { pointer-events: none; } </style>
위와 같이하게 되면 a
태그의 클릭 이벤트를 막을 수 있다.
'HTML > css' 카테고리의 다른 글
:focus-within (하위 요소에 focus된 객체가 있을 시) (0) | 2022.10.22 |
---|---|
:root -- var (변수선언) (0) | 2021.04.03 |
figure, figcaption (0) | 2020.04.05 |
text-indent (0) | 2020.03.30 |
댓글
이 글 공유하기
다른 글
-
:focus-within (하위 요소에 focus된 객체가 있을 시)
:focus-within (하위 요소에 focus된 객체가 있을 시)
2022.10.22https://developer.mozilla.org/ko/docs/Web/CSS/:focus-within :focus-within - CSS: Cascading Style Sheets | MDN CSS :focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나 developer.mozilla.org :focus-within는 부모요소에게 적용시에 하위 요소중에 focus 상태가 있을시에 부모요소에게 적용되는 css이다. 위와 같은 상황 일경우 상단 div요소에 :focus-within를 적용시에 하단의 input에 focus 된 경우 div에 back… -
:root -- var (변수선언)
:root -- var (변수선언)
2021.04.03css에서도 scss처럼 변수선언이 가능하다. 하지만 브라우저에 따라서 지원 여부 차이가 크다. caniuse.com/?search=var() Can I use…. Support tables for HTML5, CSS3, etc CSS Variables (Custom Properties) Permits the declaration and usage of cascading variables in stylesheets. caniuse.com 변수 선언은 다음과 같다. :root { --danger_text: red; --info_text: blue; --normal_text: green; --bg_color: #ccc; } 여기서 :root는 를 선택한다고 보면 된다. 사용부터은 다음과 같이 사용하며 추가… -
figure, figcaption
figure, figcaption
2020.04.05이번 HTML5에 새롭게 추가된 태그이다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure HTML figure 요소는 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있습니다. developer.mozilla.org 이미지나 도표등을 넣을때 아래쪽에 간단하게 설명문구 (캡션)을 달수있게 해주는 CSS다. 기존에는 이미지를 넣을곳을 DIV로 감싸고 작업을 하였는데 접근성을 위해 추가된거 같다. 어렵진 않지만 생소한 태그라서 정리해둔다. 아래는 사용방법이다. 접근성부분은 최대한 활용하는게 좋으니 다음작업때 사용해야겠다. // html 샘플이미지 캡션입니다. // css figure { display: inline… -
text-indent
text-indent
2020.03.30평소에 사용을 잘안해서 포스팅 해두려고 한다. 들여쓰기와 내어쓰기를 할때 사용한다. 값이 양수면 들여쓰기, 값이 음수면 내어쓰기이다. 디폴트는 0입니다. 내어쓰기를 할 때는 왼쪽패딩을 조절해주면 좋다. html sample1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only f…
댓글을 사용할 수 없습니다.