CSS(Cascading Style Sheets)는 1996년에 처음 등장한 이후 지금까지 웹 개발 스택의 필수적인 부분으로 자리잡으며 계속 발전하고 있다. 다른 언어와 마찬가지로 CSS도 환경에 대응하여 끊임없이 새로운 기능을 내놓고 있다. 발전 속도가 빠른 만큼 부지런한 개발자라 해도 새로운 기능을 놓칠 수 있다. CSS에서 가장 유용한 새로운 기능과 앞으로 도입될 기능을 정리했다.

ⓒ Getty Images Bank

서브그리드

CSS가 처음 등장했을 때부터 개발자는 몇 가지 중대한 결점을 지적했다. CSS에서는 중앙 정렬과 같은 일반적인 작업에도 지나치게 복잡한 우회와 편법이 필요하다. 또 다른 큰 문제는 (적어도 CSS 그리드 레이아웃 모듈이 등장하기 전까지는) 적절한 그리드 레이아웃을 얻기가 어려웠다는 점이다. 

그리드 레이아웃은 display: grid 선언으로 나타낸다. 직사각형 레이아웃을 정의하지만 2차원으로 그리드를 제어한다는 면에서 플렉스박스(Flexbox)와 비슷한 면이 있다. 연구 결과를 보면 CSS를 다루는 대부분 개발자는 그리드 레이아웃을 알고 있으며 상당수가 사용하고 있다(아직 사용하지 않는다면 여기를 참조) 

서브그리드(subgrid)는 그리드 레이아웃 모듈을 위한 새롭고 매우 유용한 기능이다. 서브그리드를 사용하면 부모의 레이아웃을 상속하는 자식 그리드를 정의할 수 있다. 이 기능은 자식 그리드가 자체적인 차원과 간격을 정의하는 그리드 표시 중첩과는 구분된다. 서브그리드에서는 부모의 레이아웃이 서브그리드에 적용되지만 필요하다면 서브그리드가 레이아웃의 여러 부분을 오버라이드할 수 있다. 

2022년 6월을 기준으로 서브그리드는 파이어폭스 71 이상에만 쓸 수 있다. 그러나 사파리 웹킷, 구글 크롬, 마이크로소프트 엣지도 추후 지원할 예정이다. 서브그리드는 앞으로 매우 유용한 레이아웃 기능이 될 것이다. 

액센트-컬러

흔히 사용됨에도 스타일을 구성하기가 어려운 표시 요소가 몇 가지 있다. 예를 들어 확인란과 라디오 버튼은 브라우저의 구현을 숨기면서 이러한 요소의 동작을 모방하는 맞춤형 위젯으로 대체되는 경우가 많다. 새로운 CSS accent-color 옵션을 사용하면 이러한 요소를 지정한 작업을 할 수 있다. <예제 1>과 같이 페이지의 모든 라디오 버튼에 마젠타 색을 적용할 수 있다(이 라이브 예제도 참조). 

<예제 1> CSS에서 라디오 버튼 색 제어하기

<style>

input[type="radio"] {

    accent-color: magenta;

}

</style>

<form action="/foo.bar">

  <p>Select your favorite outdoor adventure type</p>

  <input type="radio" id="mountain" name="type" value="mountain">

  <label for="mountain">Mountain</label><br>

  <input type="radio" id="ocean" name="type" value="ocean">

  <label for="ocean">Ocean</label><br>

  <input type="radio" id="desert" name="type" value="desert">

  <label for="desert">Desert</label>

</form>

스크롤 스냅

CSS는 웹 브라우저의 스크롤 스냅 동작을 제어하기 위해 다양한 속성을 제공한다. 이 기능의 일부 요소는 몇 년 전부터 있었고 일부는 최신 브라우저 버전으로 아직 나오는 중이다. 

흥미로운 것은 CSS 사용자의 3분의 1 이상이 스크롤 스냅을 모른다는 것이다. scroll-snap-* properties 명령은 컨테이너에서 스크롤 위치의 작동을 세밀하게 조정할 수 있는 다양한 방법을 제공한다. 개발자는 훨씬 더 정밀하게 제어할 수 있고 최종 사용자는 더 부드럽고 정돈된 환경을 이용할 수 있다. <예시 2>는 div에서 스크롤 스냅을 제어하는 간단한 예제다(이 라이브 예제도 참조). 

<예제 2> 간단한 스크롤 스냅 예제 

<style>

  .scroll-container,

  .scroll-area {

    max-width: 850px;

    height: 300px;

    font-size: 60px;

  }

  .scroll-container {

    overflow: auto;

    scroll-snap-type: y mandatory;

    height: 500px;

  }

  .scroll-area {

    scroll-snap-align: start;

  }

  .scroll-container,

  .scroll-area {

    margin: 0 auto;

  }

  .scroll-area {

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

  }

  .scroll-area:nth-of-type(1) {  background: IndianRed; }

  .scroll-area:nth-of-type(2) {  background: Moccasin; }

  .scroll-area:nth-of-type(3) {  background: thistle; }

  .scroll-area:nth-of-type(4) {  background: seagreen; }

</style>

<div class="scroll-container">

    <div class="scroll-area">1</div>

    <div class="scroll-area">2</div>

    <div class="scroll-area">3</div>

    <div class="scroll-area">4</div>

</div>

<예제 3>의 y 스크롤 위치는 스크롤 움직임을 어느 지점에서 놓든 자동으로 자식 요소로 이동한다. 스크롤 컨테이너의 scroll-snap-type 속성이 y mandatory로 설정돼 있고 자식 요소에 scroll-snap-align: start 선언이 있기 때문이다. 이 동작을 수정할 수도 있다. 예를 들어 scroll-snap-type 속성을 y proximity로 설정할 수 있다. 예상하겠지만 이렇게 하면 스크롤이 요소와 가까워졌을 때만 스냅을 실행한다. 참고로 이와 관련된 overscroll-behavior 속성을 사용하면 중첩된 스크롤 컨테이너의 동작을 정의할 수 있다. 

CSS 논리적 속성 

왼쪽이나 오른쪽, 또는 위나 아래에 컨테이너 테두리를 설정하는 작업을 해봤다면 얼마나 번거로운지 잘 알고 있을 것이다. 문자 그대로 border-left와  border-right, 또는 border-top, border-bottom 속성을 써야 한다. 문제는 수정할 생각이 없는 다른 테두리에까지 영향을 미치지 않으면서 이와 같은 지름길 속성을 활용할 방법이 없다는 것이다. 이 불편함은 패딩, 마진과 같은 요소도 마찬가지다.

이때 CSS 논리적 속성(CSS Logical Properties) 모듈을 사용하면 inline 및 block 키워드를 사용해 추상적인 방법으로 요소를 참조할 수 있다. 왼쪽, 오른쪽에는 inline을 사용하고, 위와 아래에는 block을 사용한다. 예를 들어 div의 왼쪽과 오른쪽에 테두리를 설정하려면 <예제 3>의 코드를 사용하면 된다(여기의 라이브 예제도 참조). 

<예제 3> 논리적 inline을 사용한 좌우 패딩 

div {

  border-inline: 10px dashed seagreen;

}

테두리 용도로 유용한 지름길이지만 다른 여러 속성에서도 inline 및 block 논리적 키워드를 찾을 수 있다. 대부분 개발자는 텍스트 방향 및 쓰기 모드와 관련해서 이와 같은 지름길을 사용한다. 이 경우 padding-inline-end와 같은 속성을 사용하면 활성인 텍스트 방향과 관계없이 후행 패딩을 지정할 수 있다. 기본적으로 인라인과 블록에 대한 추상화는 다양한 설정에 적용되는 일반화된 스타일을 쓸 수 있게 해준다. 더 자세한 내용은 CSS 논리적 속성과 값을 참고하면 된다.

컨테이너 쿼리 

컨테이너 쿼리는 CSS에서 완전히 안정화되지 않았지만 곧 구현될 기능이다. 컨테이너 쿼리는 응답성 높은 디자인에 대한 보편적 생각에 큰 영향을 미친다. 기본 개념은 뷰포트와 미디어뿐만 아니라 부모 컨테이너의 크기를 기반으로도 중단점을 설정할 수 있다는 것이다. 구문은 아직 완성되지 않았지만 아마 <예제 4>와 같은 형태가 될 것이다. 

<예제 4> @container 

@container (max-width: 650px){ … }

UI의 중첩된 레이어 전반에서 나타나는 다양한 컨테이너의 크기에 따라 레이아웃을 세밀하게 조정할 수 있는 기능이 얼마나 강력할지 생각해 보자. 인터페이스 혁신을 촉발할 수 있는 큰 변화다. 

@when과 @else 

새로운 @container 쿼리에 대한 이야기가 나온 김에 말하자면 조건부 @when과 @else 쿼리 지원도 예정돼 있다. 아직 주요 브라우저에서 지원되지는 않지만 멀지 않은 미래에 구현될 예정이다. @when과 @else 쿼리는 미디어 및 지원 쿼리를 다룰 때 조건부 if/then 스타일의 논리 흐름을 가능하게 해준다. 많은 복잡한 CSS 상황과 레이아웃에서 작업을 한결 편하게 해줄 기능이다. 

3가지 새로운 색 팔레트 

오래전부터 CSS 사용자는 RGB와 HEX, 그리고 명명된 색을 사용해 디바이스 디스플레이를 보기 좋게 꾸미고 생동감을 불어넣었다. 최근에는 HSL 스타일의 색 선언도 도입됐다. 이제 새로운 색 지정 방식인 hwb, lab, lch도 CSS 사양에 채택된다. 

HWB는 색상(hue), 백도(whiteness), 흑도(blackness)를 나타낸다. 가독성 측면에서 주목할 만한 기능이다. 색을 고른 다음 흰색과 검정색을 더하는 방식이다. 최근 버전의 크롬, 파이어폭스, 사파리를 지원한다(무슨 이유인지 마이크로소프트 엣지는 이 부분에 대해 소식이 없다). HWB에 대한 더 자세한 내용은 hwb() – 인간을 위한 색 표기법?에서 볼 수 있다. RGB 및 HWL과 마찬가지로 투명한 알파 채널을 지원한다. 

LCH는 밝기(lightness), 채도(chroma), 색상(hue)을 나타내며, 사용 가능한 색의 범위를 늘려준다. CSS의 LCH색: 무엇이고 왜, 어떻게 사용하나?를 참고하면 된다. 지금은 사파리만 LCH를 지원한다. CIE LAB 색 이론에서 파생된 LAB는 새로운 색 공간에 대한 가장 참신한 이론이다. lab 색 설명자는 사람이 인지할 수 있는 전체 색 범위를 포괄한다고 주장한다. 대담한 시도다. LCH와 마찬가지로 현재 사파리에서만 지원된다. CSS의 LAB에 대한 더 자세한 내용은 모질라 CSS 문서에서 볼 수 있다. 

editor@itworld.co.kr

출처 : IT WORLD(https://www.itworld.co.kr/topnews/242174)