CSS는 단순히 디자인 수준이라고만 생각했는데 점점 배워갈수록 기본 레이아웃을 설정할 수 있는 것 외에도 여러 기능을 할 수 있다는 걸 배워가는 것 같다. 그렇기 때문에 CSS 공부는 스스로 요구사항을 구현해나가면서 이것도 가능할까? 라는 생각을 계속 해나가야 하는 것 같다.
오늘도 HTML/CSS 과제를 하면서 알게 되었던 속성에 대해 정리하고자 한다.
과제에 대해서 자세하게 언급할 수는 없고, 간단하게 어떤 이유로 이 속성을 사용하게 되었는지만 말하자면!
select 태그에서 default로 포함된 dropdown 버튼을 없애고, 지정된 svg 파일이 dropdown 역할을 하도록 해야 했다.
여기서 사용한 방법은 select에서 dropdown 버튼을 CSS 속성을 이용해서 없애고, absolute 속성을 통해 svg를 select 위에 위치하도록 해주었다.
여기서 사용한 dropdown 버튼을 없애는 속성은 아래 값을 사용했다.
select {
-webkit-appearance:none; /* 크롬 화살표 없애기 */
-moz-appearance:none; /* 파이어폭스 화살표 없애기 */
appearance:none /* 화살표 없애기 */
}이렇게 되니 한 가지 문제가 있었다. 요구사항에서는 svg 버튼을 클릭했을 때 select가 정상적으로 작동을 해야한다고 적혀있었으나, svg 버튼 자체는 select 위에 존재하고 있고, select가 아니기 때문에 의도대로 클릭 이벤트가 발생할 수가 없었다. 따로 JS를 사용하는 것이 아닌 HTML/CSS만을 이용해 해결해야 하다보니 이게 가능한... 영역인가? 라는 생각이 들었는데 찾아보니 클릭 이벤트를 제어할 수 있는 속성 pointer-events라는 게 있었다. 즉, 이 속성을 사용해 z-index가 더 큰 요소가 클릭되는 현상을 해결해줄 수 있었다.
pointer-events
요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성. 즉, 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다.
여기서 포인터 이벤트란 마우스, 터치, 펜 등과 같은 포인팅 장치를 통해 발생하는 사용자의 상호작용을 말한다. (클릭, 호버, 드래그)
selector {
pointer-events: auto | none;
}auto : 초깃값. 요소는 일반적으로 동작하며 기존 속성에 따라 포인터 이벤트에 응답
none : 해당 요소는 포인터 이벤트의 대상이 되지 않는다. 그러나, 이 요소의 자식 요소 중 pointer-events 속성이 다른 값으로 설정된 요소가 있다면, 포인터 이벤트는 해당 자식 요소를 대상으로 할 수 있다.
pointer-events는 접근성 문제를 고려해서 사용되어야 한다. pointer-events: none;을 사용하면 해당 요소에 포인터 이벤트가 전달되지 않으므로, 마우스나 터치로 요소를 클릭하거나 클릭할 수 없다. 즉, 시각장애인이나 손이 불편한 사용자는 해당 요소를 사용할 수 없게 될 수 있다. 접근성 지침을 준수하고 포인터 이벤트 제어를 사용하는 것이 중요하다.
참고 자료
