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..

한 줄 말줄임표 div { /* 텍스트를 한 줄로 표시 */ white-space: nowrap; /* 박스의 크기를 넘어가는 컨텐츠 숨기기 */ overflow: hidden; /* 텍스트가 넘어간다면 말줄임표 표시 */ text-overflow: ellipsis; } 해당 방법은 block 요소에서만 사용 가능합니다. 여러 줄 말줄임표 div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } webkit 엔진을 사용하지 않는 브라우저에서는 원하는 동작이 나오지 않을 수 있습니다. 말줄임표 뒤에 컨텐츠 두기 See the Pen 말줄임표..