새로운 웹 스타일링

---

  새로운 CSS 스펙에 대해 소개하는 영상이다. 최소 1년 전 영상임을 감안하자.

 

1. scroll-snap

  기존 스크롤은 정밀도가 부족해서 스크롤 휠을 내렸을 때 애매한 위치에 멈춰있는 경우가 있고, 스크롤 위치에 따라 애니메이션이 보이도록 구현한 경우 사용자가 애니메이션을 못 볼수도 있었다. scroll-snap은 사용자가 스크롤조작을 마쳤을 때 어느 위치에 스크롤이 위치할지 오프셋이 조절 가능하다. 이를 이용하면 JavaScript 없이 캐러셀 UI를 만들 수 있다.

 

2. focus:within

  기존 드랍다운메뉴는 마우스를 hover하면 하위메뉴가 펼쳐지지만 키보드(focus)로는 조작이 되지 않았다. 부모요소가 포커스를 잡고있을 때 하위메뉴를 보여주기 위해선 부모메뉴에서 이동하는 포커스 흐름을 잃고 하위메뉴로 이동되어야 하기 때문이다. 이 때 focus:within을 쓰면 부모 하위메뉴에 포커스를 전달할 수 있다.

 

3. @media(prefers-*)

  사용자가 선호하는 스타일에 맞추어 웹UI를 제공할 수 있는 기능이다. 사용자의 시스템이 다크모드인지 등을 판단할 수 있으며 이에 맞는 스타일링을 구현할 수 있다.

 

4. Logical properties

  과거 CSS는 물리적 축과 방향. 예를들어 margin-top, padding-left 등을 이용하여 위치를 조정하였으나 inline, block의 size, start, end라는 논리적 속성이 생겼다. 예를 들어 일본, 아랍 등의 나라는 언어의 흐름이 완전 달라 writing-mode로 이를 처리하는데 이 경우 들여쓰기가 반영이 안되거나 레이아웃이 완전히 틀어지기도 하였다. 이 때 논리적 속성을 이용하면 이러한 사이드 이펙트가 발생하지 않는다.

 

  width, height 속성은 각각 inline-size, block-size로 대체되며, margin, padding, border 속성은 inline/block - start/end 조합으로 대체된다. 예를들어 영어는 왼쪽에서 오른쪽으로 흐르므로 margin-left, margin-right는 각각 margin-inline-start, margin-inline-end로 대체된다.

 

5.  sticky

  sticky는 사용자가 스크롤을 내려도 함께 따라오는 UI이다. 나는 프로젝트할 때 헤더를 고정시키기 위해 사용한 경험이 있다. 

 

6. backdrop-filter

  원래 filter는 해당 요소만 blur 등의 필터 처리가 가능했는데 이제 요소의 배경도 필터 효과를 줄 수 있다.

 

7. :is()

/*기존*/
section > h1, section >h2, section > h3 { color: red }

/*is*/
section:is(h1, h2, h3) { color:red }

/*다른 예시*/
:is(header, main, footer) p:hover { color:red }

  CSS 선택자에서 하위 요소들을 한꺼번에 선택 가능한 기능이다. 딱 봐도 너무 좋은 기능이라 지금 지원하는지 MDN에 찾아보았는데 크롬은 88부터 지원한다.

 

  MDN을 찾아보면 is() 뿐만 아니라 where() 라는 키워드도 존재한다. 두 키워드의 차이는 특이성이다. 특이성은 CSS 속성 값이 요소와 관련이 깊은 지를 의미하는 것으로 where()로 전달된 요소는 특이성이 0이므로 where로 잡고 후에 해당 요소를 다시 잡아 CSS 스타일을 변경하면 변경된다. 그러나 is()로 전달된 요소는 변경되지 않는다.(MDN참고링크)

 

8. gap

  gap은 flexbox에서 space-between, space-around를 의미하는 것 같다. 이 속성 또한 프로젝트에서 사용해보았다.

 

9. CSS Houdini

  Houdini는 CSS 엔진 일부에 웹 개발자가 접근할 수 있는 것을 목표로 하는 프로젝트이다.

 

  9-1. Properties & Values API

    기존 CSS 변수와 달리 Values API는 처음에 속성명, 구문명, 상속명, 초기값을 설정하여 JS를 통해 브라우저에 전달한다. 즉, 사용자 정의 속성을 확장가능하도록 구조화한 것이다. 사실 어떤 이야기인지 와닿지는 않는데 아마 원래 변수는 재정의 되기도 하고, 부모로부터 무조건 상속되서 다른 팀원이 다른 곳에서 변수를 재정의 하거나 내가 쓰고 싶은 변수는 전역 수준의 colorA 변수인데 A요소의 colorA변수만 불러와진다거나 하는 불편함이 있었는데 이를 초기에 상속이 되지 않게 설정하는 등을 이용해서 제어할 수 있는 그런 개념이지 않을까...?

 

  9-2. TypeOM

    예를들어 JS에서 Div A의 height 값을 가져오면 '38px'과 같이 무조건 문자열이라서 값을 수정하거나 사용하려면 추가적인 처리를 해주어야 했다. Type OM은 CSS에 타입과 단위를 추가하여 '38px'를 이제 숫자 + 단위로 받을 수 있게 한다.

 

  9-3. Worklet

    CSS만으로는 애니메이션 구현이 복잡해서 JavaScript를 사용하기도 한다. Worklet을 이용하면 JavaScript로 만든 애니메이션 모듈을 CSS에서 사용가능하다. worklet은 독립적인 GlobalScope와 EventLoop를 가진다. 즉, 병렬처리가 되어 애니메이션 성능이 증대할 것이다. 또한 애니메이션을 위한 DOM 크기도 줄어드는 장점이 있다.(시각적 효과를 위해 비어있는 span 태그를 만들지 않아도됨) 그리고 JavaScript가 아닌 CSS로 애니메이션이 처리되므로 초당 60프레임의 가장 최적의 애니메이션이 제공될 것이라고 생각된다. 마지막으로 애니메이션을 만들기 위한 CSS 속성이 없어도 worklet으로 만들면 된다!

 

 읽어볼것: developers.google.com/web/updates/2016/05/houdini?hl=ko

              wit.nts-corp.com/2018/05/02/5214

              https://github.com/SeonHyungJo/FrontEnd-Note/blob/master/Javascript/worklet.md

---

 

CSS Logical Properties and Values (CSS 논리적 속성과 값) | WIT블로그

CSS와 자바스크립트 애니메이션  |  Web  |  Google Developers