최신 css 속성들로 여러 문제를 해결하기 위해 사용했던 기존 속성들을, 간결한 한 줄로 대체할 수 있는 방법에 대해 간략히 정리했습니다.
원문 : https://moderncss.dev/12-modern-css-one-line-upgrades/
aspect-ratio
동영상 임베드에 16:9와 같은 화면 비율을 강제로 적용하기 위해 'padding hack'을 사용하는 대신 적용할 수 있는 속성으로, 다음과 같이 사용할 수 있습니다
// HD 영상
.aspect-ratio-hd {
aspect-ratio: 16/9;
}
// 정사각형 1:1 화면 비율의 영상
.aspect-ratio-square {
aspect-ratio: 1;
}object-fit
다른 속성에 비해 나온지는 시간이 지난 속성이긴 하지만, 다른 속성들과 마찬가지로 한 줄로 문제를 해결할 수 있는 속성이기도 합니다.
cover - 이미지가 요소를 덮도록 크기가 조정되고 콘텐츠가 왜곡되지 않도록 aspect-ratio 유지
scale-down - 이미지가 잘리지 않고 완전히 보이도록 요소 내에서 필요한 경우 이미지 크기를 조정하고, aspect-ratio를 유지 (비율에 따라 여백 표시됨)
.image {
object-fit: cover;
aspect-ratio: 1;
/* 선택 사항: 이미지 크기 제한 */
max-block-size: 250px;
}
margin-inline
다음과 같은 속성을 한 줄로 줄일 수 있는 속성입니다.
/* 교체 전 */
margin-left: auto;
margin-right: auto;
/* 교체 후 */
margin-inline: auto;text-underline-offset
text-underline-offset을 사용하면 텍스트 기준선과 밑줄 사이의 거리를 제어할 수 있습니다.
a:not([class]) {
text-underline-offset: 0.25em;
}scroll-margin-top/bottom
scroll-margin 속성 집합(및 해당 scroll-padding)을 사용하면 스크롤 위치의 컨텍스트에서 요소에 오프셋을 추가할 수 있습니다. 즉, scroll-padding-top을 추가하면 요소 위의 스크롤 오프셋이 증가하지만 문서 내 레이아웃 위치에는 영향을 주지 않습니다.
scroll-margin-top을 사용하면 내비게이션을 통해 스크롤할 때 요소 위의 공간을 늘려서 고정 내비게이션이 차지하는 공간을 고려할 수 있습니다.
[id] {
scroll-margin-top: 2rem;
}color-scheme
dark/light 모드 테마 적용에 사용할 수 있는 속성입니다.
전체 애플리케이션에 적용하는 경우, dark 테마를 기본 설정하거나 순서를 뒤집어 light 테마를 기본 설정하도록 :root에 다음을 설정합니다.
:root {
color-scheme: dark light;
}accent-color
이 속성을 사용하면 라디오 버튼과 체크박스의 :checked 모양과 진행률 요소 및 범위 입력 모두에 대해 채워진 상태를 수정할 수 있습니다.
:root {
accent-color: mediumvioletred;
}width:fit-content
display: inline-block과 같은 인라인 표시 값을 사용하여 요소의 너비를 콘텐츠 크기에 맞게 줄였다면, width: fit-content로 업그레이드하면 동일한 효과를 얻을 수 있습니다. width: fit-content의 장점은 display 값을 그대로 유지하므로 레이아웃에서 요소의 위치도 조정하지 않는 한 변경되지 않는다는 것입니다. 계산된 상자 크기는 fit-content로 생성된 치수에 맞게 조정됩니다.
.fit-content {
width: fit-content;
}fit-content 값은 내재적 크기 조정을 가능하게 하는 여러 키워드 중 하나입니다.
이 기술을 inline-size: fit-content와 같은 논리적 속성으로 2차 업그레이드하는 것을 고려해 보세요.
점진적인 개선
이 마지막 속성 집합은 지원되는 경우 업그레이드된 경험을 제공하며, 지원되지 않는 브라우저에서는 문제 없이 사용할 수 있습니다. 즉, 최신 CSS에 최근에 추가되었더라도 대체 방법이 필요하지 않습니다.
overscroll-behavior
overscroll-behavior: contain은 스크롤을 포함된 영역으로 격리하여 스크롤 경계에 도달하면 상위 페이지로 이동하여 스크롤을 계속하지 못하도록 합니다. 이 기능은 긴 글이나 문서 페이지 등 메인 페이지 콘텐츠와 독립적으로 스크롤할 수 있는 네비게이션 링크의 사이드바와 같은 상황에서 유용합니다.
.sidebar, .article {
overscroll-behavior: contain;
}text-wrap
2023년 기준 최신 속성 중 하나인 text-wrap은 불균형한 줄의 타입 설정 문제를 해결하는 두 가지 값을 가지고 있습니다.
balance
텍스트 한 줄당 글자 수를 균등하게 맞춥니다.
래핑된 텍스트는 6줄로 제한됩니다.
:is(h1, h2, h3, h4, .text-balance) {
text-wrap: balance;
/* 데모용 */
max-inline-size: 25ch;
}pretty
텍스트 블록의 마지막 네 줄을 평가하여 마지막 줄에 두 개 이상의 단어가 포함되도록 필요에 따라 조정합니다.
p {
text-wrap: pretty;
/* For demonstration */
max-inline-size: 35ch;
}주의
요소의 계산된 너비는 변경되지 않으므로 일부 레이아웃에서는 텍스트 옆에 원치 않는 공백이 늘어나는 부작용이 발생할 수 있으니 주의해야 합니다.
scrollbar-gutter
스크롤바가 나타나거나 사라져 원치 않는 레이아웃 이동이 발생하는 경우가 종종 있는데요, 다이얼로그 오버레이가 표시되었을 때 배경 페이지의 스크롤을 방지하기 위해 스크롤 막대에 overflow:hidden을 추가하는 경우를 예로 들 수 있습니다.
최신 CSS 속성인 scrollbar-gutter을 사용하면 레이아웃에서 스크롤바를 위한 공간을 예약할 수 있어 원치 않는 이동을 방지할 수 있습니다. 스크롤바가 표시되지 않을 때에도 브라우저는 스크롤 컨테이너의 패딩에 추가적으로 여백을 넣어 스크롤 막대가 사라짐에 따라 UI의 레이아웃 변경이 일어나지 않도록 해줍니다.
