Editing: CSS property

react component를 사용해서 edit 할 수 있는 걸 만들기 위해 react-moveable과 react-selecto를 사용하면서 찾아보며 알게된 CSS property에 대해서 정리하고자 한다. 

 

Pointer events

• 클릭 이벤트 허용 여부이다. hover, click, drag등에 어떻게 반응할 지 지정할 수 있다. 
• 대부분의 속성값은 svg전용이다.
  • "stroke": element의 둘레에 있을 때만 pointer event의 타겟이 될 수 있다. 
    • 이 속성을 이용하면, 화살표 같은 경우 svg의 영역 자체는 넓지만, 안쪽 화살표, or 직선을 선택할 때만 pointer event가 적용될 수 있도록 할 수 있다. 
  • "fill": interior of the element 일때 pointer event의 타겟이 된다. 
• none으로 하게 되면 마우스의 타겟이 될 수 없게 설정 가능하다. 

pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

User select

element 안의 텍스트나 이미지가 드래그 할때 선택이 안되도록 방지하게 하기 위해서 찾다가 알게 되었다.  user-select 속성을 사용하면 element 내부에서 텍스트 선택이 일어날 때의 동작을 설정할 수 있다. 

• auto: 기본값은 auto로 더블클릭, 드래그 할 경우 선택된다. 부모 요소에 따라 달라지며, default값은 text이다. 
• text: text를 더블클릭, 드래그로 선택할 수 있다. 
• all: 클릭 한번만해도 텍스트 영역이 선택된다. 
• none: 클릭 및 드래그로 선택되지 않는다.  

 

Touch action

브라우저에게 맡길 터치 액션 지정을 하는데 사용한다. 터치 이벤트의 처리는 브라우저가 담당한다. 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있다. 그렇기 때문에 여러 동작을 허용하도록 여러 값이 적용 가능하다. 예를 들면 touch-action: pan-y pinch-zoom; 같이. 

 

Reference 

• https://ahnheejong.name/articles/less-famous-css-properties/