CSS 한 줄로 업그레이드 — 지금 바로 적용할 수 있는 12가지 모던 CSS 속성

한 줄이면 충분하다

대규모 리팩토링 없이, CSS 한 줄만 추가해도 즉시 개선되는 속성이 12개나 있다.

이 글에서 다루는 12가지 속성은 세 그룹으로 나뉜다.

안정 속성 — 레거시 해킹을 버린다

1. aspect-ratio

예전에는 비율을 유지하려면 padding-top 해킹을 써야 했다. 16:9 비율을 만들려면 padding-top: 56.25%를 계산해야 했고, 직관적이지 않았다.

/* 과거: padding 해킹 */
.video-old {
  position: relative;
  padding-top: 56.25%;
  height: 0;
}
 
/* 현재: aspect-ratio */
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

한 줄로 끝이다. 16 / 9, 1 / 1, 4 / 3 등 원하는 비율을 직접 선언하면 된다. 이미지, 비디오, 카드 썸네일 등 비율이 중요한 모든 곳에서 쓸 수 있다.

2. object-fit

이미지를 고정 크기 컨테이너에 넣으면 찌그러지는 문제. object-fit으로 해결한다.

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
 
.product-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

비유하면 cover는 액자에 사진을 꽉 채우는 것, contain은 사진 전체가 보이도록 여백을 두는 것이다.

3. margin-inline

좌우 마진을 한꺼번에 설정하는 논리적 속성(logical property) 축약형이다.

/* 과거 */
.container-old {
  margin-left: auto;
  margin-right: auto;
}
 
/* 현재 */
.container {
  margin-inline: auto;
}

[💡 잠깐! 이 용어는?] 논리적 속성(Logical Properties): left/right 대신 inline-start/inline-end, top/bottom 대신 block-start/block-end를 사용하는 CSS 속성 체계. RTL(오른쪽에서 왼쪽) 언어를 지원할 때 특히 유용하다.

margin-inline은 글 방향에 따라 자동으로 적절한 방향에 적용되므로, RTL 언어 지원 시 별도 처리가 필요 없다.

향상 속성 — UX를 한 단계 끌어올린다

4. text-underline-offset

링크의 밑줄이 글자 하단부에 너무 붙어 있으면 가독성이 떨어진다. 밑줄 위치를 조절할 수 있다.

a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 60%);
}

0.25em만 띄워도 밑줄이 글자의 디센더(g, y, p 등의 아래로 내려가는 부분)와 겹치지 않아서 읽기가 훨씬 편해진다.

5. outline-offset

포커스 아웃라인이 요소에 바짝 붙어 있으면 답답해 보인다. 간격을 주면 시각적으로 깔끔해진다.

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

접근성과 디자인을 동시에 잡는 한 줄이다. outline-offset에 음수 값을 주면 아웃라인이 요소 안쪽으로 들어가는 것도 가능하다.

6. scroll-margin-top

앵커 링크(#section-id)로 이동할 때, 고정 헤더에 콘텐츠가 가려지는 문제. 누구나 한 번쯤 겪어봤을 거다.

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

앵커 대상 요소 상단에 5rem의 여유 공간을 확보한다. 고정 헤더 높이만큼 설정하면 된다. JavaScript로 스크롤 위치를 계산할 필요가 없다.

7. color-scheme

브라우저의 기본 UI(스크롤바, 폼 요소, <hr> 등)를 라이트/다크 모드에 맞게 렌더링하도록 알려준다.

:root {
  color-scheme: light dark;
}

이 한 줄을 선언하면, 브라우저가 사용자의 시스템 설정에 따라 기본 UI를 적절한 색상으로 렌더링한다. 다크 모드에서 스크롤바가 눈부시게 하얀 문제가 이것 하나로 해결된다.

8. accent-color

체크박스, 라디오 버튼, 진행 바 같은 폼 요소의 테마 색상을 한 줄로 바꾼다.

:root {
  accent-color: var(--primary);
}

기본 체크박스의 파란색이 브랜드 컬러와 안 맞을 때, 커스텀 체크박스를 만들 필요 없이 이 한 줄로 해결된다. 접근성도 유지된다.

[💡 잠깐! 이 용어는?] accent-color: 브라우저 기본 폼 컨트롤(체크박스, 라디오, range, progress)의 강조 색상을 지정하는 속성. 커스텀 컴포넌트를 만들지 않아도 브랜드 컬러를 적용할 수 있다.

9. width: fit-content

블록 요소는 기본적으로 부모 너비를 꽉 채운다. fit-content를 쓰면 콘텐츠 크기에 맞게 줄어든다.

.tag {
  width: fit-content;
  padding: 0.25rem 0.75rem;
  background: var(--surface);
  border-radius: 999px;
}

inline-block으로도 비슷한 효과를 얻을 수 있지만, fit-content는 블록 레이아웃을 유지하면서 너비만 줄인다는 차이가 있다. margin: auto와 함께 쓰면 가운데 정렬도 된다.

점진적 적용 속성 — 미지원 브라우저에서도 안전하다

이 그룹의 속성들은 미지원 브라우저에서 무시되더라도 레이아웃이 깨지지 않는다. 점진적 향상(progressive enhancement) 접근법에 딱 맞는 속성들이다.

10. overscroll-behavior

모달이나 사이드바에서 스크롤이 끝까지 도달하면, 스크롤이 부모(body)로 전파되어 배경이 같이 스크롤되는 문제. overscroll-behavior로 막는다.

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

비유하면 엘리베이터 문이 열렸을 때, 안에서 버튼을 눌러도 바깥 엘리베이터가 움직이지 않게 하는 거다. contain은 스크롤을 해당 요소 안에 가둔다.

11. text-wrap: balance / pretty

긴 제목이 줄바꿈될 때, 마지막 줄에 단어 하나만 덩그러니 남는 현상(orphan). text-wrap으로 줄 길이를 균등하게 분배한다.

h1,
h2,
h3 {
  text-wrap: balance;
}
 
p {
  text-wrap: pretty;
}

balance는 모든 줄을 재배치하므로 긴 텍스트에는 성능 부담이 있다. 제목처럼 짧은 텍스트에만 사용하고, 본문에는 pretty를 쓰는 것이 권장된다.

12. scrollbar-gutter

콘텐츠 양에 따라 스크롤바가 나타나거나 사라질 때, 레이아웃이 좌우로 흔들리는 현상. scrollbar-gutter로 스크롤바 공간을 미리 확보한다.

html {
  scrollbar-gutter: stable;
}

stable은 스크롤바가 없어도 스크롤바 너비만큼 공간을 예약한다. 페이지 이동 시 콘텐츠가 좌우로 밀리는 현상이 사라진다.

[💡 잠깐! 이 용어는?] scrollbar-gutter: 스크롤바가 차지하는 공간을 미리 확보하는 속성. 오버레이 스크롤바(macOS 기본)에서는 효과가 없고, 고전적인 항상-보이는 스크롤바(Windows 기본)에서 레이아웃 안정성을 높인다.

전체 요약 테이블

정리

• 12개 속성 모두 한 줄 추가로 즉시 효과를 볼 수 있다.
• 안정 속성(1~3)은 레거시 해킹을 깔끔하게 대체하므로 지금 당장 적용할 수 있다.
• 향상 속성(4~9)은 UX 디테일을 높이는 속성이다. 특히 color-scheme과 accent-color는 다크모드 대응에서 잊기 쉬운 포인트다.
• 점진적 적용 속성(10~12)은 미지원 브라우저에서 무시되므로 리스크 없이 추가할 수 있다.

CSS는 매년 강력해지고 있다. 과거에는 JavaScript나 전처리기가 필요했던 많은 패턴이 네이티브 한 줄로 대체되고 있다. 기존 프로젝트에서도 위 12가지를 하나씩 추가해보면, 코드량은 줄고 결과는 좋아지는 경험을 할 수 있다.

참고:

• Stephanie Eckles — 12 Modern CSS One-Line Upgrades: https://moderncss.dev/12-modern-css-one-line-upgrades/
• MDN — CSS: https://developer.mozilla.org/en-US/docs/Web/CSS