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) { /* 하나 이상의 사용 가능한 입력 메..

input 태그 자동완성 기능을 사용하면, 기존에 적용한 스타일이 변경됩니다. 이유는 Chrome 내부 스타일시트에는 아래의 에이전트 스타일이 적용되어 있기 때문입니다. background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white) !important; !important 로 선언이 되어있어 위에서 사용된 코드로는 수정이 불가능하고, 아래의 방법을 이용해서 수정할 수 있습니다. 자동완성 기능 해제 자동완성 기능이 필요하지않다면, 이 방법이 가장 간단하고 좋습니다. !important 사용 !important 를 사용하기 때문에, 다른 문제를 야..

이미지를 원래의 사이즈 혹은 사이즈의 배수에 해당하지 않는 사이즈로 넣지 않을 경우 이미지가 흐려보이는 경우가 많은데, 아래 속성들을 적용함으로써 이미지가 흐리게 나오는 현상을 많이 해소할 수 있습니다. img { /* 이미지 렌더링 방식 변경 */ image-rendering: -webkit-optimize-contrast; /* z축을 0으로 초기화, 입체감 삭제 */ transform: translateZ(0); /* 뒷면 숨기기, 입체감 삭제 */ backface-visibility: hidden; } 해당 포스팅은 이 글을 참고하여 작성했습니다.

border-width 가 변경될 때 레이아웃이 틀어지는 이슈가 있는데, 이를 해결하기 위해서 box-shadow 를 사용해서 border-width 가 늘어나는 것 처럼 보이게 하는 방법이 있습니다. 다른 방법도 있지만, 아래와 같은 이슈가 있어 사용을 권장하지 않습니다. outline 은 Safari에서 border-radius 가 적용되지 않고, 애니메이션 성능이 좋지 못하다는 이슈가 있습니다. pseudo-element 는 input 과 img 에서 적용되지 않으며, 다른 방법들에 비해서 코드량이 많다는 이슈가 있습니다. See the Pen border-width Change Animation by FE4902 (@fe4902) on CodePen.

기존 미디어쿼리 범위 지정 방법은 min-width, max-width 를 사용했었는데, 주요 문제점으로는 직관성이 떨어지고 아래와 같이 '같거나 작다'로 통용되기 때문에 '무조건 작다'를 표현하려면 원하는 숫자보다 작은 수를 사용하는 수 밖에 없었습니다. /* width