잘 알려지지 않은 유용한 CSS 속성들

출처: ahnheejong.name/articles/less-famous-css-properties/

잘 알려지지 않은 유용한 CSS 속성들

정리하면서 공부하려고 쓰는 글!

 

pointer-events: 클릭 이벤트 허용 여부

auto 인 경우 리스너 호출 가능

none 인 경우 이벤트 타겟이 될 수 없음

*부모가 none 속성을 갖고 있어도 자식 중 auto 를 가진 엘리먼트가 있다면, 해당 자식 엘리먼트에 트리거 된 이벤트가 버블링 또는 캡쳐링 되는 과정에서 부모 엘리먼트의 이벤트 리스너가 호출될 수 있다.

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com" style="pointer-events: none;">example.com</a></li>
</ul>

가능한 속성 값

pointer-events: auto;
pointer-events: none;

 

touch-action: 브라우저에게 맡길 터치 액션 지정

터치 이벤트 처리는 브라우저가 담당하는 영역인데, touch-action 속성을 이용해서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있다. 표준으로는 스크롤, 확대/축소 브라우저에 따라 더블탭으로 확대 등이 있다.

touch-action: auto; /* 기본 값 */
touch-action: none; /* 브라우저가 모든 터치 이벤트를 무시하도록 설정 */

touch-action: pan-x; /* 특정 축으로의 터치를 사용한 스크롤 허용 */
touch-action: pan-y;

touch-action: pan-left; /* 특정 방향으로의 터치를 사용한 스크롤 허용 */
touch-action: pan-right;
touch-action: pan-up;
touch-action: pan-down;

touch-action: pinch-zoom; /* 핀치 줌(여러 손가락을 사용한 확대/축소) 허용 */

touch-action: manipulation; /* 터치를 사용한 스크롤, 핀치 줌만 허용하고 그 외 비표준 동작 (더블 탭으로 확대 등) 불허용 */

touch-action: pan-y pinch-zoom; /* 동시에 여러 값 지정 가능 */

 

object-fit: 대체되는 엘리먼트의 내용물과 컨테이너 사이 관계 지정

img, video 등과 같이, 내용물이 HTML 문서의 바깥에 존재하는 엘리먼트를 대체되는 엘리먼트라 부른다. 이 때, 외부에 존재하는 내용물의 크기가 컨테이너와 차이날 때, 화면에는 어떻게 나타나야 할지 지정할 필요가 생긴다.

object-fit: fill

내용물의 비율을 무시하고 컨테이너의 크기에 맞춤

<div>
  <img style="width: 150px; height: 100px; border: 1px solid #000; object-fit: fill;" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"  />
  <img style="width: 100px; height: 150px; border: 1px solid #000; margin-top: 10px; object-fit: fill;" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"  />
</div>

object-fit: contain

내용물의 비율을 유지하는 채로, 내용물이 컨테이너에 포함되는 최대 크기가 되도록 함

object-fit: cover

내용물의 비율을 유지하는 채로, 내용물이 컨테이너를 전체를 덮는 최소 크기가 되도록 함

object-fit: none

내용물이 전혀 리사이징 되지 않음

 

object-fit: scale-down

none과 contain 중 내용물의 크기가 더 적은 쪽과 동일하게 동작

 

will-change: 값이 변경될 속성에 대한 힌트

브라우저에게 어떤 속성이 높은 확률로 변할 것인지 힌트를 줘서 앞으로 일어날 변화에 대비해 더 매끄러운 트랜지션을 구사할 수 있다.

will-change: auto; /* 기본값 */
will-change: scroll-position; /* 엘리먼트의 스크롤 위치가 바뀔 것 */
will-change: contents; /* 엘리먼트의 컨텐츠 중 일부가 바뀔 것 */

/* 혹은 특정 CSS 속성을 명시할 수 있다. */
/* transform, opacity, top, left, right, bottom 정도가 자주 사용된다. */
will-change: transform;
will-change: left, top; /* 여러 속성을 동시에 명시할 수도 있다. */