pinch to zoom & zoom-in action 설정 HTML head 안에 위 속성을 추가해서 줌을 이용한 축소, 확대 기능을 막아줍니다. user-scalable=0 : 확대 및 축소 작업 허용 여부를 설정합니다. 0 이 아닌 no 로 설정해도 동일한 효과를 불러옵니다. maximum-scale=1.0 : 페이지에서 허용되는 확대 정도를 1배로 설정합니다. minimum-scale=1.0 : 페이지에서 허용되는 축소 정도를 1배로 설정합니다. 터치 관련 설정 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 버튼 클릭시 생기는 highlight 를 제거합니다. */ -webkit-touch-callout: none; /* 길게 터치할 때 표시되는 ..

iOS에서 filter 속성이 적용된 경우 렉이 걸리는 이슈가 있습니다. 해당 이슈는 transform: translate3D(0, 0, 0) 를 사용하여 해결할 수 있습니다. div { filter: blur(4px); transform: translate3D(0, 0, 0); }

html 에 scroll-padding-top 적용시 고정된 header 의 input 에서 텍스트 입력시 스크롤이 이동하는 이슈 발생 /* 수정 전 */ html { scroll-padding-top: 100px; } html 에는 scroll-margin-top 이 적용되지 않아서, :target, #anchor-point 에 scroll-margin-top 속성을 주는것으로 해결 /* 수정 후 */ :target, #anchor-point { scroll-margin-top: 100px; }

:has() 선택자는 해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용하는 CSS의 if문입니다. 기존 CSS로는 구현할 수 없었던 것들을 구현할 수 있지만, 현재 파이어폭스에서 지원하고 있지 않아 사용 시 유의해서 사용해야합니다. 기본적인 사용법 /* div 요소가 h2를 가지고 있을 경우 */ div:has(h2) { border: 2px solid #fe4902; } /* div 요소가 h3 그리고 p를 가지고 있을 경우 (and 논리) */ div:has(h3, p) { background-color: #fe4902; } /* div 요소가 형제로 p를 가지고 있을 경우 */ div:has(+ p) { border: 2px solid #000; } See the Pen :has() -..

iOS에서 border-radius 와 overflow: hidden 속성이 같이 적용된 경우 제대로 동작하지 않는 이슈가 있습니다. 해당 이슈는 '쌓임 맥락(Stacking Context)' 과 관련된 이슈로 아래의 방법으로 해결할 수 있습니다. div { z-index: 0; /* OR */ isolation: isolate; /* OR */ -webkit-mask-image: -webkit-radial-gradient(white, black); ... } 해당 포스팅은 이 글을 참고하여 작성했습니다.

기본(Primary) 포인팅 장치를 고려한 방법 기본(Primary) 입력 메커니즘을 기준으로 기능을 지원합니다. @media (hover: none) and (pointer: coarse) { /* touch 가능 (스마트폰, 터치스크린) */ } @media (hover: hover) and (pointer: fine) { /* hover 가능 (마우스, 터치패드) */ } 보조 장치까지 고려하는 방법 다수의 입력 메커니즘을 가졌을때, '적어도 하나' 에서 해당 값을 만족하는 경우 기능을 지원합니다. @media (any-hover: none) { /* 호버링할 수 없거나 포인팅 입력 메커니즘이 없습니다 */ } @media (any-hover: hover) { /* 하나 이상의 사용 가능한 입력 메..