새로운 CSS 속성 만나보기(2019.02)

Published in

Jung-han

16 min readFeb 6, 2019

CSS 표준은 아직 아니지만 CSS의 표준이 될 가능성이 있는 속성들, 혹은 이미 브라우저에서 작동하고 있는 속성들을 미리 만나보려 한다.

각 Stage가 의미하는 것은?

각 스테이지(단계)들이 어떤 것을 의미하는지 간단하게 알아보려 한다. stage3 내용은 전부, 그 이하는 뭔가 쓸모 있어보이거나 흥미가 가는 내용+POST CSS와 사용할 수 있는 것 위주로 정리했다. 더 많은 내용을 보려면 다음 링크를 참조하라.

Stage3

Stage3 속성은 이미 작동되고 있는 브라우저가 존재하며 전부 POSTCSS Plugin와 사용할 수 있다.

all

엘리먼트의 속성을 reset 한다.

a {
  all: initial;
}

break

페이지나 영역, 열이 나눠지는 경우 요소가 어떻게 나눠질 지를 정해준다.

페이지 나누기는 주로 밑 예시처럼 문서가 된 페이지, PDF 등에서 볼 수 있다. break 속성을 주면 이 요소가 어떻게 동작할 지 정해줄 수 있다.

열 나누기는 밑 예시처럼 다중 열 레이아웃이 있는 곳에서 발생한다. 만약 내용이 끊어질 경우 텍스트 단락처럼 하나의 블록처럼 작동한다

간단한 예시로 page가 작동되는 모습을 준비했다.

예시 보기 >>

Custom value ✨

지정값을 만들어 사용할 수 있다.

img {
  --some-length: 32px;height: var(--some-length);
  width: var(--some-length);
}

font-variant

숫자나 영어 폰트에 영향을 주는 속성이다. 몇가지 예시들만 간단하게 살펴보자.

small-caps / no-common-ligatures

소문자로 적힌 알파벳을 대문자로 바꾼다. 그리고 그 바뀐 글자는 소문자 크기를 갖는다.

.test-class {
  font-variant: normal; // default
  font-variant: small-caps;
}

no-common-ligatures

위 그림처럼 주로 각 알파벳들이 다른 글자이지만 하나처럼 붙게 되는 증상을 방지해준다.

.test-class {
  font-variant: no-common-ligatures;
}

normal

small-caps + no-common-ligatures

slashed-zero

줄이 그어진 0을 만들어 준다.

.test-class {
  font-variant: slashed-zero;
}

normal

slashed-zero

proportional-nums

각 숫자가 갖는 영역의 비율을 유지하게 해준다.

.test-class {
  font-variant: proportional-nums;
}

등등 여러가지 옵션들을 잘 활용한다면 세세한 부분까지 컨트롤 할 수 있게 될 것이다.

Grid Layout 과 Gap✨

flex처럼 grid를 통해 쉽게 레이아웃을 만들 수 있다.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

html 파일을 위 처럼 만들고 각각 다른 색을 줘 어떻게 변하는지 간단하게 살펴볼 것이다.

.wrapper {
  display: grid;
}

먼저 적용하고 싶은 엘리먼트인 .wrapper에 display속성을 grid 지정한다.

grid-template-columns, grid-template-rows

레이아웃을 2차원으로 생성하기 위해 행과 열을 지정해줘야 한다.

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

grid-template-columns의 값을 3개로 준다는 것은 세개의 행을 생성한다는 것을 의미하게 된다. 따라서 grid-template-rows를 두개의 값을 줬다는 것은 2개의 열로 구분한다는 것을 의미하게 된다. 100px의 너비를 가진 행과 50px의 높이를 가진 열로 각 영역이 나뉜다.

.wrapper {
  display: grid;
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 100px 30px;
}

따라서 다음 처럼 작성한다면 아래의 모습을 나타내게 될 것이다.

grid-column-start, grid-column-end, grid-row-start, grid-row-end

grid-column-start는 행의 그리드 라인의 시작점, grid-column-end는 행의 그리드 라인 종료지점을 나타낸다.

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

행의 그리드라인 시작을 1번 끝 라인을 4로 하겠다는 뜻이다.

.item1 {
  grid-column: 1 / 4; // short cut
}

위 그림으로 그리드 라인의 개념을 간단하게 잡을 수 있다.
이 방식을 이용하면 화면의 레이아웃을 간단하게 잡을 수 있게 된다.

간단한 예시>>

각 그리드 엘리먼트 간 간격을 지정 할 수 있다. gap, row-gap, column-gap

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    gap: 10px;
}

Media Query Ranges✨

media query 범위를 좀 더 직관적으로 작성할 수 있게 된다.

@media (max-width: 30em) { ... }
->
@media (width <= 30em) { ... }

또한, 다음처럼 좀 더 편하게 범위를 지정할 수 있게 된다.

@media (min-width: 30em) and (max-width: 50em) { ... }
->
@media (30em <= width <= 50em ) { ... }

Stage2

:any-link

<area>, <link>, <a> 중 :link 혹은 :visited를 갖는 엘리먼트 모두에 매칭되는 선택자이다.

:any-link {
  background-color: yellow;
}

만약 이동하는 링크가 없다면 해당 선택자는 작동하지 않는다. 다음 예시를 살펴보면 알 수 있다.

<a href="https://example.com">External link</a>
<a href="#">Internal target link</a>
<a>Placeholder link (won't get styled)</a>

👆html 코드

a:any-link {
  border: 1px solid blue;
  color: orange;
}

Case-Insensitive

attribute selector를 이용할 때 대소문자를 구분할 지 아닐지를 지정할 수 있다. i 혹은 I를 입력한다면 대소문자 구문을 선택자를 찾을 때 하지 않는다는 것을 의미한다. s 혹은 S를 입력한다면 정확하게 판단하여 찾는다.

/* 링크 URL에 대소문자 구문이 안된 "insensitive"가 포함된 요소를 찾는다. */
a[href*="insensitive" i] {
  color: cyan;
}/* 링크 URL에 대소문자가 "cAsE"와 정확하게 일치하는 요소를 찾는다. */ 
a[href*="cAsE" s] { 
  color: pink; 
}

gray()

회색을 쉽게 얻을 수 있다…………………(?)

body {
  background-color: gray(100);
  color: gray(0 / 90%);
}/* 위 함수는 밑과 같은 의미를 갖는다. */body {
  background-color: rgb(255, 255, 255);
  color: rgba(0, 0, 0, .9);
}

지원 브라우저 없음

:has()✨

해당되는 조건을 가진 요소를 찾는 Pseudo-Class이다.

a:has(> img) {
  /* 이미지를 가진 링크에 스타일이 적용된다. */
}section:not(:has(h1, h2, h3, h4, h5, h6)) {
  /* heading 엘리먼트를 갖지 않는 요소에 스타일이 적용된다. */
}body:has(:focus) {
  /* body에 포함된 focus가되는 요소에 스타일이 적용된다. */
}

지원 브라우저 없음

Hexadecimal Alpha Notation

body {
  background: #9d9c;
}/* 위와 같은 의미를 갖는다. */body {
  background: rgba(153, 221, 153, 0.8);
}

hwb() Function

색상 표현 방법인 hwb(Hue-Whiteness-Blackness)를 지원한다.

body {
  color: hwb(90, 0%, 0%, 0.5);
}/* 위와 같은 의미를 갖는다. */body {
  color: rgba(128, 255, 0, 0.5);
}

지원 브라우저 없음

image-set() Function

유저 해상도에 따라 이미지 소스를 변화시킨다.

.example {
  background-image: image-set(
    url(img.png) 1x,
    url(img@2x.png) 2x,
    url(img@print.png) 600dpi
  );
}/* 위와 같은 의미를 갖는다. */.example {
  background-image: url(img.png);
}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    background-image: url(img@2x.png);
  }
}@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
  .example {
    background-image: url(my@print.png);
  }
}

-webkit-min-device-pixel-ratio: 단말기의 화소와 실제 화면의 pixel간의 비율

:in-range and :out-of-range Pseudo-Classes

min값 max값이 존재하는 input에서 값을 초과했을 때, 혹은 범위 내에 있을 때를 각각 나타낼 수 있는 Pseudo-Classes이다.

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

lab(), lch()

CIE Lab color space를 나타내는 함수가 재공된다.

:root {
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
  --gray-40: gray(40);
  --gray-40a50: gray(40 / .5);
}/* 위와 같은 의미이다. */:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick-a50: rgba(178, 34, 34, .5);
  --gray-40: rgb(94,94,94);
  --gray-40a50: rgba(94,94,94, .5);
}

지원 브라우저 없음

리스트로 :matches, :not 선택자 사용✨

:matches, :not 선택자를 리스트 처럼 괄호 안에 나열해 여러 조건을 쉽게 사용할 수 있다.

/* p 엘리먼트 중 첫번째 자식 엘리먼트 or .special 클래스를 갖는 요소를 제외한 요소에 스타일이 적용된다.  */
p:not(:first-child, .special) {
  margin-top: 1em;
}/* 위와 같은 의미를 갖는다. */
p :not(:first-child):not(.special) {
    margin-top: 1em;
}

overflow shorthand✨

overflow-x, overflow-y 의 속성을 단축하여 사용할 수 있게 된다.

html {
  overflow: hidden auto;
}

:read-only 와 :read-write 선택자

read-only는 읽기만 가능한 엘리먼트들에 적용되는 Pseudo-classes이다. read-write는 쓰기가 가능한 엘리먼트들에 적용되는 Pseudo-classes이다.

<input type="text" value="read-write">
<input type="text" value="read-only." readonly>

html👆

input:read-only {
    background: cyan;
}
input:read-write {
    background: blue;
}

예시 결과

rebeccapurple 색 추가

html {
  color: rebeccapurple;
}

system-ui 폰트

sans-serif, serif 와 같이 generic 폰트로 새로 들어오게 된 폰트이다.

font-family: system-ui;

Stage1

custom Media Queries

미디어 쿼리의 범위를 변수처럼 지정하여 사용할 수 있다

@custom-media --small-viewport (max-width: 30em);@media (--small-viewport) {
  /* styles for small viewport */
}/* 위와 같은 코드이다. */@media (max-width: 30em) {
  /* styles for small viewport */
}

지원 브라우저 없음

custom selector✨

선택자를 지정해서 편하게 쓸 수 있다.

@custom-selector :--heading h1, h2, h3;article :--heading + p {
  margin-top: 0;
}/* 위와 같은 의미이다. */article h1 + p, article h2 + p, article h3 + p {
    margin-top: 0;
}

지원 브라우저 없음

Stage0

Nesting rules✨

중첩이 가능해진다.

a, b {
  color: red;& c, & d {
    color: white;
  }
}/* 위와 같은 의미이다. */a, b {
  color: red;
}a c, a d, b c, b d {
  color: white;
}

지원 브라우저 없음