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

writing-mode 를 이용해서 텍스트를 세로로 나열할 수 있습니다. div { /* 가로 방향, 기본 값 */ writing-mode: horizontal-tb; /* 세로 방향, 왼쪽에서 오른쪽으로 */ writing-mode: vertical-lr; /* 세로 방향, 오른쪽에서 왼쪽으로 */ writing-mode: vertical-rl; } .en { /* 영문일 경우, 해당 속성을 추가해주지 않으면 자동으로 각도가 조절됩니다. */ text-orientation: upright; } See the Pen writing-mode by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다.

:is() 와 :where() 는 요소를 그룹화하는 기능적인 의사 클래스 선택자입니다. 두 선택자의 사용법은 같지만 명시도에 차이가 있습니다. :where() 은 명시도가 없습니다. :where() 은 매개변수로 전달된 선택자 목록의 모든 명시도를 무시합니다. :is() 는 가장 구체적인 선택자의 명시도를 따라갑니다. :is(a, div, #id) 의 명시도는 ID의 명시도인 100점입니다. /* 선택자 처음 */ :where(h1, h2, h3, h4, h5, h6) > b { color: hotpink; } /* 선택자 중간 */ article :is(header, footer) > p { color: gray; } /* 선택자 끝 */ .dark-theme :where(button, a) { col..