2017년에 배울 새로운 CSS기능 3가지


원글: https://bitsofco.de/3-new-css-features-to-learn-in-2017/

새해가 되면서 새로 배워야 할 것들이 많이 늘었다. 올해 CSS에 채택된 새로운 기능들이 많지만, 필자는 다음 3가지 기능이 가장 흥미롭다.

1. 기능 질의

얼마 전, 필자는 실제로 필자가 원했던 CSS 기능 중 하나인 기능 질의에 대해 썼다. 하지만 지금은 기본적으로 지원된다! 이제는 Internet Explorer 이외의 모든 주요 브라우저(Opera Mini 포함)에서 지원된다.

기능 질의는 @supports조건부 블록으로 CSS를 감싸는데, 이 내부 코드는 현재 사용자 에이전트가 특정 CSS 속성-값 쌍을 지원하는 경우에만 적용된다. 아래의 예제는 display: flex을 지원하는 브라우저에만 Flexbox 스타일을 적용한다.

@supports ( display: flex ) {
  .foo { display: flex; }
}

또한 andnot 같은 연산자를 사용하면 보다 복잡한 기능 질의 작성할 수 있다. 아래의 예제는 브라우저가 이전의 Flexbox 구문만 지원하는지 탐지한다.

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

브라우저 지원 범위

css-featurequeries css-featurequeries

2. 그리드 레이아웃

CSS 그리드 레이아웃 모듈은 그리드 기반 레이아웃을 생성하기 위한 시스템을 정의한다. 이 레이아웃은 유연한 상자 레이아웃 모듈과 유사하지만 페이지 레이아웃 용으로 특별히 설계되어 있으므로 다양한 기능을 제공한다.

명시적 항목 배치

그리드는 그리드 컨테이너(display: grid로 생성된 요소)와 그리드 아이템(그 자식 요소들)으로 구성된다. 다음 CSS를 통해 마크업 배치와 독립적으로 그리드 항목의 배치와 순서를 쉽고 명확하게 결정할 수 있다.

한가지 예로, 필자의 글 CSS Grid를 사용한 성배 레이아웃에서 이 모듈을 사용하여 악명 높은 "성배 레이아웃"을 만드는 방법을 보여주었다.

Holy_Grail_CSS_Grid

아래의 CSS는 31줄 밖에 되지 않는다.

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

유연한 길이

CSS 그리드 모듈은 새로운 길이 단위로 fr을 도입했는데, 이 단위는 그리드 컨테이너에 남아있는 여유 공간의 비율을 나타낸다.

이를 통해 그리드 컨테이너의 사용 가능한 공간에 따라 그리드 항목의 높이와 너비를 배분할 수 있다. 예를 들어, 필자는 성배 레이아웃에서 두 main섹션이 양옆의 나머지 공간을 모두 차지 하길 원했고, 다음과 같이 간단히 작성했다.

.hg {
    grid-template-columns: 150px 1fr 150px;
}

거터

이제 grid-row-gap, grid-column-gap, grid-gap 속성들을 사용하여 그리드 레이아웃에 대한 거터를 구체적으로 정의할 수 있다. 이 속성들은 값으로 데이터 유형을 받고 콘텐츠 영역의 너비에 해당 비율을 사용한다.

예를 들어 5%의 거터를 가지려면 다음과 같이 작성하면 된다.

.hg {
    display: grid;
    grid-column-gap: 5%;
}

브라우저 지원

CSS 그리드 모듈은 이르면 올해 3월에 사용할 수 있을 것이다.

css-gridlayout css-grid

3. 네이티브 변수들

마지막으로 소개할 기능은 내장 CSS 변수들이다(캐스케이딩 변수 모듈의 사용자 정의 속성). 이 모듈은 CSS 속성에 값으로 할당할 수 있는 작성자 정의 변수를 만드는 방법을 도입했다.

예를 들어, 우리가 스타일 시트의 곳곳에서 동일한 테마 색상을 사용한다면 실제 변수의 값을 여러 번 적기보다는 한 개의 변수를 참조하도록 추상화할 수 있다.

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }  

이것은 SASS와 같은 CSS 전처리기의 도움을 통해 이미 가능했지만 내장 CSS 변수는 브라우저안에 존재한다는 장점이 있다. 즉, 해당 값을 실시간으로 업데이트할 수 있다. 다음과 같이 --theme-colour 값을 변경할 수 있다.

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');  

브라우저 지원범위

css-variables-custom-properties

css-variables

지원은 되고있는가?

여러분도 보시다시피 위의 기능들은 모든 브라우저에서 지원되지 않는데 제품을 개발하면서 어떻게 맘 편히 사용할 수 있을까? 점진적 향상(원문: Progressive Enhancement)이 있지 않은가! 필자는 작년 Fronteers Conference에서 CSS에 점진적 향상을 적용하는 방법에 대해 이야기했다. 아래의 주소에서 내용을 확인 할 수 있다.

[영상] Ire Aderinokun — Progressive Enhancement and CSS

올해 여러분이 가장 배우고싶은 CSS 기능은 무엇인가?


박정환, FE Development Lab2017.01.23Back to list