mix-blend-mode 속성을 사용하여 포토샵의 블렌딩 모드와 비슷한 효과를 낼 수 있습니다. div { mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; ..

색상 커스텀 input { accent-color: #fe4902; } See the Pen 체크박스 - 1 by FE4902 (@fe4902) on CodePen. 전체 커스텀 See the Pen 체크박스 - 2 by FE4902 (@fe4902) on CodePen. 토글 스위치 See the Pen 체크박스 - 3 by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다.

overscroll-behavior 을 사용해 스크롤 체이닝을 제어할 수 있습니다. div { /* 스크롤 체이닝이 발생합니다. */ overscroll-behavior: auto; /* 인접한 스크롤 영역에서 스크롤 체이닝이 발생하지 않습니다. */ overscroll-behavior: contain; /* 모든 영역에서 스크롤 체이닝이 발생하지 않습니다. */ overscroll-behavior: none; } See the Pen 스크롤 체이닝 by FE4902 (@fe4902) on CodePen.

scroll-behavior: smooth 속성을 사용해 스크롤을 부드럽게 이동시킬 수 있습니다. html { scroll-behavior: smooth; } See the Pen Untitled by FE4902 (@fe4902) on CodePen.

iOS에서 상단의 노치와 url바 혹은 하단의 툴바로 인해 화면의 크기를 실제 보여지는 innerHeight 보다 크게 잡습니다. 그래서 document 의 height 를 100vh 로 잡아 작성하더라도 실제 iOS에서는 스크롤바가 생깁니다. 해당 이슈는 아래의 방법들로 해결할 수 있습니다. dvh 사용 dvh 는 현재 viewport 높이를 나타내는 동적인 값으로, 만약 주소표시줄이 축소된 상태에서 스크롤을 통해 주소표시줄이 확장되면 dvh 의 값도 업데이트됩니다. body { height: 100dvh; } -webkit-fill-available 사용 -webkit-fill-available 이 속성은 지원하지 않는 브라우저가 있기 때문에 iOS 환경에서만 적용되도록 @supports (-web..

padding을 사용하는 방법 .container { /* height값을 지정해주지 않거나 0으로 지정해주어야한다. */ width: 200px; } .box { /* 부모height가 0인 상태에서 자식에서 padding-top을 선언하면, 바로 이 값이 높이가 되게 된다. */ padding-top: 50%; /* calc()를 사용할 수도 있다 */ padding-top: calc(100% * 0.5); /* 16:9 적용 */ padding-top: calc(100% / 16 * 9); } 부모의 width가 padding의 기준이 되기 때문에 부모인 container 엘리먼트 요소가 필요합니다. aspect-ratio를 사용하는 방법 .box { /* 16:9 적용 */ aspect-ratio..