1. 컴포넌트별 스타일링

개발자들이 꿈꾸던 것처럼 들리는 이 아이디어가 이제 현실로 다가오고 있습니다.

CSS 컨테이너 쿼리를 통해 이제 컴포넌트가 존재하는 컨테이너의 너비와 스타일을 쿼리할 수 있습니다.

CSS 컨테이너 쿼리와 스타일 쿼리 스타일 쿼리는 CSS에서 스타일에 대한 더 논리적인 제어를 제공합니다.

Una Kravets는 스타일 쿼리에 대한 소개에서 현재 스타일 쿼리가 CSS 커스텀 속성 값에서만 작동한다고 지적하지만,

이미 실제 사용 사례에서 스타일 쿼리가 유용하게 사용될 수 있는 상황들이 존재합니다.

재사용 가능한 컴포넌트에 여러 가지 변형을 적용해야 할 때나, 모든 스타일을 제어할 수 없지만 특정 경우에 스타일을 변경해야 할 때 매우 유용합니다.

컨테이너 스타일 쿼리로 무엇을 할 수 있는지 더 깊이 알아보고 싶다면, Geoff Graham의 글을 확인해 보세요.

그는 스타일 쿼리의 더 미묘한 측면을 파고들며 그가 주목한 사항들을 요약했습니다.

글자 줄 바뀜현상 조정 (text-wrap:balance)

우리는 모두 마지막 단어가 새로운 줄에 떨어져서 홀로 서 있는 모습이 얼마나 보기 좋지 않은지 잘 알고 있습니다.

물론, <br>을 사용해 텍스트를 수동으로 줄을 바꾸거나 <span>을 사용하여 콘텐츠를 나누는 방법이 있습니다.

text-wrap: balance 속성은 들어보셨나요?

text-wrap: balance 속성 덕분에 글자 줌 바뀜현상을 조정할 수 있어요

text-wrap: balance 속성을 적용하면 브라우저가 단어 수를 자동으로 계산하고 두 줄에 단어를 균등하게 분배하여

페이지 제목, 카드 제목, 툴팁, 모달, FAQ 등에서 시각적으로 일관된 모양을 만들어냅니다.

Ahmad Shadeed는 text-wrap: balance에 대한 자세한 가이드를 작성했으며, 이 속성이 어떻게 헤드라인을 더 일관성 있게 만들 수 있는지에 대해 설명합니다.

긴 텍스트 블록을 처리할 때는 text-wrap: pretty 속성을 사용하여 마지막 줄에서 문자 분리현상을 방지할 수 있습니다.

폼을 위한 자동 필드 크기 조정 (field-sizing)

입력 필드의 적절한 크기를 찾는 일은 종종 많은 추측이나

JavaScript를 동원해 문자의 수를 세고 사용자가 입력한 텍스트에 따라 필드의 높이나 너비를 조정하는 작업을 포함합니다.

CSS 필드 크기 조정이 이를 바꾸어 놓을 것입니다. 이제 입력 필드와 텍스트 영역을 자동으로 크기 조정할 수 있으며,

짧은 select 메뉴는 자동으로 축소되어 콘텐츠 크기에 맞게 폼이 항상 적절히 조정됩니다. 이를 구현하려면 한 줄의 CSS만 추가하면 됩니다.

폼을 위한 자동 필드 크기 조정 자동 필드 크기 조정은 입력 필드와 텍스트 영역이 콘텐츠 크기에 따라 자동으로 커지거나 작아지게 합니다.

Adam Argyle은 필드 크기 조정에 대해 모든 필요한 정보를 요약했으며, "field-sizing"이 다양한 <form> 요소에 어떻게 영향을 미치는지에 대해 자세히 설명했습니다.

입력 필드가 너무 크거나 작아지지 않도록 추가 스타일을 넣어 형태를 유지하는 것이 좋습니다.

Adam은 즉시 사용할 수 있는 코드 스니펫도 공유했습니다.

숨겨진 콘텐츠를 검색 가능하게 만들기(hidden=until-found)

아코디언은 인기 있는 UI 패턴이지만, 하나의 단점이 있습니다.

바로 축소된 섹션 안의 콘텐츠는 find-in-page 검색으로 찾을 수 없다는 점입니다.

hidden=until-found 속성과 beforematch 이벤트를 사용하면 이 문제를 해결할 수 있으며, 콘텐츠를 검색 엔진에도 접근 가능하게 만들 수 있습니다.

숨겨진 콘텐츠를 검색 가능하게 만들기 hidden=until-found 속성을 사용하면 아코디언의 숨겨진 콘텐츠도 검색 가능합니다.

Joey Arhar는 숨겨진 콘텐츠를 검색 가능하게 만드는 방법에 대해 설명하는 가이드를 작성했으며, hidden=until-found 속성으로 섹션을 숨기는 스타일을 대체할 수 있다고 말합니다.

페이지에 다른 상태가 있어 섹션이 표시될 때 이를 동기화해야 한다면, beforematch 이벤트 리스너를 추가하는 것이 좋습니다.

이 이벤트는 브라우저가 요소를 표시하기 직전에 hidden=until-found 요소에서 발생합니다.

선택 메뉴 내 그룹 스타일링 (Option List Styling)

<select> 요소에 대한 작은 업그레이드지만, 강력한 기능을 제공하는 변화입니다.

이제 선택 항목 목록에 <hr>을 추가하여 옵션들을 시각적으로 구분할 수 있습니다.

선택 메뉴 내 그룹 스타일링 많은 옵션이 있는 select 메뉴에서 유용합니다. 이제 콘텐츠를 그룹화할 수 있습니다.

더 세부적으로 조정하고 싶다면 <optgroup>도 살펴보세요.

이 HTML 요소는 <select> 요소 내에서 옵션을 그룹화하여 각 그룹에 하위 제목을 추가할 수 있게 해줍니다.

스크롤 가능한 컨테이너에서 간단한 조작만들기

때때로, 요소를 스크롤 가능한 컨테이너로 만드는 간단한 방법이 필요합니다.

CSS scroll snap은 이를 가능하게 합니다. 이 CSS 기능은 사용자가 콘텐츠를 좌우로 정확하게 스와이프하고 컨테이너 내 특정 항목에 스냅하도록 잘 제어된 스크롤 경험을 제공합니다.

JavaScript는 필요하지 않습니다.

스크롤 가능한 컨테이너의 간단한 스냅 스크롤 가능한 컨테이너를 쉽게 만드는 CSS 기능이 바로 CSS scroll snap입니다.

Ahmad Shadeed는 scroll snap을 설정하는 과정을 단계별로 안내하는 실용적인 가이드를 작성했습니다.

이 기능을 사용하여 이미지 갤러리, 아바타 목록, 또는 사용자가 콘텐츠를 스크롤하고 스냅하면서 탐색할 수 있는 다른 컴포넌트를 만들 수 있습니다.

툴팁과 팝오버를 위한 고정 위치 지정

푸터, 툴팁, 연결선, 시각적 교차 참조, 차트에서 동적 레이블을 사용하는 경우 등 다양한 용도로

CSS 앵커 위치 지정 API를 사용하여 요소를 다른 요소(앵커)와 상대적으로 위치시킬 수 있습니다.

툴팁과 팝오버를 위한 앵커 위치 지정 CSS 앵커 위치 지정 API는 레이어드 인터페이스를 쉽게 만들 수 있게 도와줍니다.

Una Kravets는 CSS 앵커 위치 지정 API에 대한 소개에서 이 기능이 어떻게 작동하는지,

하나 이상의 앵커에 고정하는 방법, 앵커의 크기에 따라 앵커 위치 지정 요소를 어떻게 크기와 위치를 조정하는지에 대해 자세히 설명했습니다.

브라우저 지원이 아직 제한적이므로, 일부 예방 조치를 취한 후에 이 API를 사용하는 것이 좋습니다. Una의 가이드는 무엇을 주의해야 하는지에 대한 세부 사항을 포함하고 있습니다.

OKLCH 및 OKLAB을 사용한 고해상도 색상

고해상도 색상을 제공하는 OKLCH, OKLAB, LAB 색공간은 이제 RGB/HSL을 대체할 가능성이 있습니다.

Vitaly는 새로운 색 공간에 대해 알아야 할 사항을 간단히 소개했습니다.

OKLCH 및 OKLAB을 사용한 고해상도 색상 RGB/HSL의 시대는 끝날 수도 있습니다. 고해상도 색상을 만나보세요.

OKLAB은 풍부한 그라디언트에, OKLCH는 디자인 시스템의 색상 팔레트에 특히 적합합니다.

OKLCH/OKLAB 색상은 Chrome, Edge, Safari, Firefox, Opera에서 완전히 지원됩니다. Figma는 아직 지원하지 않습니다.

CSS에서 상대 색상 (color(), hsl(), oklch() )

배경색이 있고 그 밝기를 25% 줄이거나, 보색을 자동으로 계산하여 사용할 수 있다면?

상대 색상 구문(RCS)은 기존 색을 기반으로 새로운 색을 생성할 수 있게 해줍니다.

CSS에서 상대 색상 상대 색상은 기존 색을 기반으로 새로운 색을 자동으로 계산할 수 있게 해줍니다.

입력 색을 변경하여 새로운 색을 도출하고 계산하는 데 사용할 수 있는 'from' 키워드를 색상 함수(color(), hsl(), oklch() 등)와 함께 사용할 수 있습니다.

Adam Argyle는 이를 실제로 구현하는 방법을 코드 스니펫과 함께 공유했으며, 사양에서 더 많은 세부 사항을 확인할 수 있습니다.

View Transitions API를 이용한 부드러운 전환

썸네일 이미지가 제품 상세 페이지의 전체 이미지로 전환되거나 고정된 네비게이션 바가 페이지 간 탐색 시

그대로 유지되는 경우와 같이 부드러운 시각적 전환이 사용자 경험을 더 매력적으로 만드는 경우가 많습니다.

View Transitions API는 사이트 내에서 서로 다른 뷰 간의 원활한 시각적 전환을 구현할 수 있게 도와줍니다.

View Transitions API를 이용한 부드러운 전환 View Transitions API는 서로 다른 뷰 간의 원활한 시각적 전환을 만듭니다.

View 전환은 단일 문서뿐만 아니라 서로 다른 두 문서 간에도 트리거될 수 있습니다.

두 경우 모두 동일한 원칙을 따릅니다: 브라우저는 이전과 새 상태를 스냅샷으로 찍고, DOM은 업데이트되며 렌더링이 억제되고, 전환은 CSS 애니메이션으로 작동합니다.

두 경우의 차이점은 전환을 어떻게 트리거하는지에 있으며, Bramus Van Damme은 View Transitions API에 대해 자세히 설명합니다.

이것은 종종 무거운 JavaScript 프레임워크에 의존하는 단일 페이지 앱에 대한 좋은 대안이 될 수 있습니다.

독점 아코디언 <details:name>

‘독점 아코디언’은 아코디언 컴포넌트의 변형입니다.

사용자가 새로운 항목을 열 때, 이미 열려 있는 항목은 자동으로 닫히게 되어 공간을 절약할 수 있습니다. 이제 CSS만으로 이 효과를 구현할 수 있습니다.

독점 아코디언 새로운 항목을 열면 이미 열려 있는 항목이 자동으로 닫힙니다.

독점 아코디언을 만들려면 <details> 요소에 name 속성을 추가해야 합니다.

이 속성을 사용하면 동일한 name 값을 가진 모든 <details> 요소가 하나의 그룹을 형성하여 독점 아코디언처럼 동작합니다.

Bramus Van Damme은 이 작업이 어떻게 이루어지는지 자세히 설명했습니다.

바로 및 지연 검증(:user-valid , :user-invalid)

:valid와 :invalid를 사용하여 사용자의 입력에 따라 스타일을 적용할 때, 하나의 단점이 있습니다. 바로 필수 입력 항목이 비어있으면 사용자와 상호작용을 시작하지 않았더라도 :invalid와 일치하게 된다는 점입니다. 이를 방지하려면 보통 입력이 변경되었는지 추적하는 상태 코드가 필요했습니다. 하지만 이제 더 이상 그렇지 않습니다.

라이브 및 늦은 검증 :user-valid와 :user-invalid는 입력 검증에 대한 사용자 경험을 개선합니다.

:user-valid와 :user-invalid는 이제 이러한 작업을 자동으로 처리할 수 있는 네이티브 CSS 솔루션을 제공합니다.

:valid와 :invalid와 달리 :user-valid와 :user-invalid는 사용자가 입력을 변경한 후에만 실수를 알리기 때문에 사용자에게 더 나은 피드백을 제공합니다.

:user-valid와 :user-invalid는 input, select, textarea 컨트롤과 함께 작동합니다.

부드러운 스크롤 동작 (scroll-behavior)

스크롤 상자와 일련의 링크가 있고 각 링크가 스크롤 상자 내에서 앵커 위치를 타겟팅한다고 상상해보세요.

사용자가 링크를 클릭하면 콘텐츠 섹션으로 바로 스크롤됩니다 — 그러나 그 동작은 상당히 갑작스럽습니다.

scroll-behavior 속성은 스크롤 전환을 더 부드럽게 만듭니다. CSS만으로 가능합니다.

부드러운 스크롤 동작 scroll-behavior는 탐색으로 트리거된 스크롤 상자의 스크롤 동작을 설정합니다.

scroll-behavior 값을 smooth로 설정하면, 스크롤 상자는 사용자 에이전트가 정의한 시간 동안 사용자 에이전트가 정의한 완화 함수로 부드럽게 스크롤됩니다.

물론, scroll-behavior: auto를 사용할 수도 있으며, 스크롤 상자는 즉시 스크롤됩니다.

포커스가 보이도록 만들기 (:focus-visible)

포커스 스타일은 키보드 사용자가 페이지를 탐색하는 데 필수적입니다.

그러나 마우스 사용자가 버튼이나 링크를 클릭할 때 포커스 링이 나타나면 불편할 수 있습니다.

:focus-visible을 사용하면 두 사용자 그룹 모두에게 최적의 경험을 제공할 수 있습니다: 키보드 사용자는 포커스 스타일을 보고, 마우스 사용자는 보지 않습니다.

포커스가 보이도록 만들기 :focus-visible은 필요한 경우에만 포커스 스타일을 표시합니다.

:focus-visible은 요소가 :focus 의사 클래스를 만족할 때와 사용자 에이전트가 포커스를 보이도록 해야 한다고 판단할 때 적용됩니다.

어떻게 작동하는지에 대해 더 궁금하다면, MDN Web Docs에서는 :focus와 :focus-visible의 차이점, 접근성 측면에서 고려해야 할 사항,

그리고 :focus-visible을 지원하지 않는 구형 브라우저에 대한 폴백 제공 방법을 다루고 있습니다.

자식에 따라 부모 스타일링(:has)

CSS 선택자는 기본적으로 위에서 아래로 작동하여 부모를 기준으로 자식을 스타일링합니다.

이제 새로운 CSS 의사 클래스 :has는 그 반대로 작동합니다: 자식에 따라 부모를 스타일링할 수 있습니다.

이 의사 클래스가 어떤 일을 할 수 있는지에 대해 Josh W. Comeau는 실용적인 예시와 함께 훌륭한 소개글을 작성했습니다.

자식에 따라 부모 스타일링 :has는 다른 요소의 속성이나 상태에 따라 하나의 요소를 스타일링할 수 있게 합니다.

:has는 부모-자식 관계나 형제 관계에 국한되지 않습니다. 대신, 서로 다른 컨테이너에 있는 다른 요소의 속성이나 상태에 따라 하나의 요소를 스타일링할 수 있습니다.

Josh는 이를 전역 이벤트 리스너처럼 활용하여 모달이 열릴 때 페이지의 스크롤을 비활성화하거나, JavaScript 없이 다크 모드 토글을 만드는 등 실제 예시를 보여줍니다.

타입간의 간격 (min() max() clamp())

CSS 비교 함수인 min(), max(), clamp()는 현재 주요 브라우저에서 모두 지원되며,

이는 동적인 레이아웃을 생성하는 데 효과적인 방법을 제공합니다. 플루이드 타입 스케일, 그리드 및 간격 시스템을 만드는 데 유용합니다.

타입과 간격을 위한 값 간 보간 디자인의 미래는 유동적입니다. (큰 미리보기) Ahmad Shadeed는 min(), max(), clamp() 함수에 대해 자세히 설명하는 종합적인 가이드를 작성했으며,

이 함수들을 실제로 프로젝트에서 어떻게 사용하는지에 대한 실용적인 예시를 공유했습니다. 또한 혼란스러울 수 있는 점들을 정리하여 제공합니다.

Utopia의 Fluid Type Scale Calculator는 플루이드 스케일을 간단히 생성할 수 있는 도구로, 최소 및 최대 뷰포트 너비와 단계 수를 정의하면

스케일의 반응형 미리보기와 CSS 코드 스니펫을 제공합니다.

신뢰할 수 있는 다이얼로그와 팝오버<dialog>

모달이나 팝업을 만들기 위한 빠른 방법을 찾고 있다면, 이제 <dialog> HTML 요소가 네이티브(접근 가능한!) 솔루션을 제공합니다.

이 요소는 모달 또는 비모달 다이얼로그 상자 또는 데이터를 입력하는 서브창 등을 나타냅니다.

신뢰할 수 있는 다이얼로그와 팝오버 우리는 이제 차단 팝업과 차단되지 않은 메뉴를 위한 접근 가능한 <dialog> 메뉴를 사용할 수 있습니다.

모달 다이얼로그 상자는 페이지와의 상호작용을 차단하는 반면, 비모달 다이얼로그 상자는 다이얼로그가 열려 있어도 페이지와 상호작용할 수 있도록 합니다.

Adam Argyle는 <dialog>가 차단 팝업과 비차단 메뉴를 어떻게 처리할 수 있는지에 대한 코드 스니펫을 공유했습니다.

반응형 HTML 비디오와 오디오

2014년에 HTML 비디오 소스에 대한 미디어 속성 지원이 HTML 표준에서 삭제되었으나, 작년에 다시 돌아왔습니다.

이제 HTML 비디오에 대해 미디어 쿼리를 사용하여 반응형으로 조정할 수 있습니다.

반응형 HTML 비디오와 오디오 브라우저의 뷰포트에 따라 HTML 비디오를 조정하면 페이지의 로드 부담을 줄일 수 있습니다.

Scott Jehl은 반응형 HTML 비디오와 오디오 작동 방식을 요약했으며, 마크업 작성 시 고려해야 할 사항과 HTML 비디오와 함께 사용할 수 있는 다양한 미디어 쿼리들을 설명했습니다.

모바일에서 올바른 가상 키보드

작은 디테일이지만 사용자 경험에 큰 영향을 미칩니다: 사용자가 정보 입력을 더 쉽게 할 수 있도록 가장 적합한 터치스크린 키보드를 표시하는 것입니다.

모바일에서 올바른 가상 키보드 올바른 가상 키보드가 모바일 사용자에게 더 나은 경험을 제공합니다.

적합한 키보드 레이아웃을 표시하려면 inputmode를 사용할 수 있습니다.

이 속성은 브라우저에게 어떤 키보드를 표시할지 알려주며, 숫자, 전화, 소수점, 이메일, URL, 검색 키보드 등의 값을 지원합니다.

사용자 경험을 더 개선하려면 enterkeyhint 속성을 추가할 수 있습니다. 이 속성은 Enter 키에 표시되는 텍스트를 조정합니다.

enterkeyhint를 사용하지 않으면 브라우저가 inputmode 속성의 컨텍스트 정보를 사용하여 키보드를 결정합니다.

해당 글은 아래 원문을 번역한 글입니다.

실제 내용은 아래에서 확인가능합니다.

https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/