최신 CSS로 웹 디자인 업그레이드하는 9가지 방법

안정적인 업그레이드

1. 화면 비율 설정: `aspect-ratio`

동영상을 포함하거나 이미지의 비율을 맞추기 위해 padding hack을 사용한 적이 있나요? 이제는 그럴 필요가 없습니다. `aspect-ratio` 속성을 사용하면 손쉽게 비율을 설정할 수 있습니다.

.aspect-ratio-hd {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-square {
  aspect-ratio: 1;
}

화면 비율을 유지하며 콘텐츠가 조절되는 `aspect-ratio`를 사용하면, 더욱 안정적인 레이아웃을 유지할 수 있습니다.

2. 이미지 조정: `object-fit`

이미지나 비디오를 컨테이너에 맞추기 위해 여러 번 실패한 적이 있다면, `object-fit` 속성을 사용해보세요. 이 속성은 이미지가 컨테이너에 자연스럽게 맞도록 도와줍니다.

.image {
  object-fit: cover;
  aspect-ratio: 1;
  max-block-size: 250px;
}

이제 이미지가 왜곡되지 않고 원하는 비율로 표시됩니다.

3. 논리적 여백 설정: `margin-inline`

여백을 설정할 때, `margin-left`와 `margin-right`를 따로 설정하셨나요? 이제는 `margin-inline`으로 간단하게 해결할 수 있습니다.

/* 교체 전 */
margin-left: auto;
margin-right: auto;

/* 교체 후 */
margin-inline: auto;

4. 밑줄 오프셋 조정: `text-underline-offset`

밑줄의 위치를 조정하여 가독성을 높일 수 있습니다. 특히 링크가 많은 텍스트에서 유용합니다.

a:not([class]) {
    text-underline-offset: 0.25em;
}

이 속성으로 텍스트와 밑줄 사이의 거리를 조정하여 시각적으로 더 깔끔한 효과를 얻을 수 있습니다.

5. 윤곽선 오프셋 설정: `outline-offset`

윤곽선과 요소 사이의 거리를 설정하여 요소의 초점이 더 잘 보이도록 할 수 있습니다.

.outline-offset {
  outline: 2px dashed blue;
  outline-offset: .5em;
}

포커스 상태를 더 명확하게 보여주는 데 유용한 속성입니다.

6. 스크롤 여백 설정: `scroll-margin-top`

고정 내비게이션이 있는 페이지에서 앵커 링크를 사용할 때 스크롤 위치를 조정할 수 있습니다.

[id] {
    scroll-margin-top: 2rem;
}

이 속성으로 고정 내비게이션과 겹치지 않도록 스크롤 위치를 설정할 수 있습니다.

7. 오버스크롤 동작 제어: `overscroll-behavior`

포함된 스크롤 영역에서 스크롤이 상위 요소로 전달되지 않도록 할 수 있습니다.

.sidebar, .article {
  overscroll-behavior: contain;
}

이 속성으로 스크롤 영역을 격리하여 사용자의 혼란을 줄일 수 있습니다.

8. 텍스트 랩핑: `text-wrap`

불균형한 줄 나누기 문제를 해결할 수 있는 `text-wrap` 속성입니다.

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
}

이 속성으로 텍스트의 가독성을 높일 수 있습니다.

9. 스크롤바 공간 확보: `scrollbar-gutter`

스크롤바로 인한 레이아웃 변화를 방지할 수 있는 속성입니다.

:root {
  scrollbar-gutter: stable both-edges;
}

이 속성으로 스크롤바 공간을 미리 확보하여 레이아웃이 변경되지 않도록 할 수 있습니다.

결론

이 외에도 최신 CSS 속성들은 다양한 방법으로 웹 디자인을 개선할 수 있습니다. 여러분의 프로젝트에 이러한 속성들을 적용해보세요. 작은 변화가 큰 차이를 만들어낼 것입니다.