코드스피츠 76-3 (CSSOM & Vendor Prefix)-2

Keyframes

Keyframes에 대한 문법을 간략히 짚고 넘어가겠습니다.

출처 : codingFactory

이렇게 정의한 keyframes는 다음과 같이 사용할 수 있습니다.

출처: codingFactory

animation-name에 keyframes로 선언한 이름을 설정하면 사용할 수 있습니다. 다시 강의로 돌아가보겠습니다.

 

from, to 는 keyframe-animation 셀렉터로 일반 DOM 셀럭터와 다릅니다. 문법에서 봤듯이 from, to, %만 사용할 수 있습니다. 그래서 DOM 셀렉터와 다른 방법으로 parsing을 합니다. 어떻게 이걸 객체화 시킬지 살펴보겠습니다.

 

일단 keyframes 속성은 기존에 우리가 CSS 속성을 담기위해 만들었던 Sheet 객체에 그대로 담긴 어려우므로 기존 Sheet 클래스에서 분기를 시켜줘야 합니다. selector를 insertRule에 넣거나, 진짜 Sheet 객체로 부터 cssRule을 얻어오는 과정에 관여할 순 없습니다. 우리가 selector에 '@keyframes size' 라는 형태로 문자를 줬을 때 type을 결정하는 것은 Sheet 입니다. 그래서 sheet가 해당 keyframes를 지원하면 type이 나올 것이고 그렇지않으면 나오지 않을 것입니다. 그래서 Sheet가 주는 대로 받는 부분까진 건드리지 않습니다 (cssRule을 선언하는 부분) 대신 기존 코드는 cssRule을 style의 rule 로 가정하고 있기때문에 이를 keyframes rule이 들어왔을 때에 대한 처리를 따로 해줄 필요가 있습니다 ( rule 선언하는 부분).

객체지향 개념 중 관심있는 것만 하고 잘 못하는 것은 위임한다 는 개념을 명심합니다. 그래서 KeyframeRule 이라는 class를 만들어서 알아서 처리하도록 위임 합니다. Sheet가 할 일은 KeyframeRule에게 위임하는 것 뿐입니다.

 

Keyframes 객체는 Sheet 객체와 매우 유사합니다. Keyframes 객체에는 cssRules 또한 존재합니다. 하지만 Sheet 객체에선 insertRule을 사용했을 때 Keyframes 객체는 appendRule을 사용합니다. 그러나 deletreRule은 이름이 비슷합니다.

CSS의 스펙은 시간에 따라 추가되었고 keyframes-animation은 옛날에 없다가 CSS animation 분과가 나중에 발표를 한 스펙입니다. 그래서 CSS animation 분과의 취향이 담긴 선택에 따라 insertRule 을 사용하는 대신 appendRule로 사용이 되지 않았을 까 예상해봅니다.

 

이제 실제 예제를 통해 살펴보겠습니다. '@keyframes size' 을 대입한 뒤 size에 add 메소드를 쓰고 아까 전 Sheet에서 rule 인스턴스에 set을 한 것처럼 똑같은 방식으로 keyframes 인스턴스에 속성을 지정할 수 있습니다. 그리고 스타일 태그내 .test 속성에 animation:size 로 선언한 뒤 브라우저를 실행시키면 실제 애니메이션이 동작하는 것을 확인할 수 있습니다. 우리가 만든 framework의 이점은 다음과 같습니다. animation의 형태가 다변화 할 때 모든 경우의 수에 대응하는 keyframes-animation을 사전에 정의할 수가 없으니 변화의 폭이 큰 animation을 쓸 때는 전부 javasciprt를 사용해서 처리를 했습니다. 지금은 그거에 맞는 keyframe-selector를 정의해서 박아놓고 바로 class 때리면 됩니다. animation의 동적 정의가 가능해졌습니다. 심지어 무한히 keyframe-animation 셀렉터를 늘리는게 아니라 deleteRule로 rule을 지운 뒤 appendRule로 새로 추가하는 식으로 똑같은 class 를 가진 태그( class에 적용된 그 태그 )조차도 animation이 계속 바뀌면서 재활용이 가능합니다.

• 특수한 animation은 사전에 정의하지 않으면 javascript로 정의해야 되는줄 알았지만, 그와 반대로 keyframes-animation을 동적으로 정의해서 사용할 수 있다

 

TYPED CSSOM

우리는 지금까지 CSSOM을 배웠습니다. 그러나 차기에는 TYPED CSSOM이라는 것을 사용하게 됩니다. TYPED CSSOM에 대한 설명은 다음 링크를 참고하면 확인할 수 있습니다.

 

https://drafts.css-houdini.org/css-typed-om/ 

 

houdini.org 라고 적힌 위 링크는 W3C 와 관련없는 링크로 보이지만 실제로 접속하면 W3C 마크가 버젓이 찍혀있습니다. 어떤 단체일까요? 이 단체는 Mozilia, Apple, Opera, Microsoft, HP, Intel, Google 같이 W3C 에 주축이 되는 회사들이 만든 협회로 본인들이 CSS에 요구하는 바를 draft 로 만들어서 제출하기 위한 일종의 TF 팀입니다. 이것을 왜 만느냐하면 본인들이 CSS 에 요구하는 API 엔진과 같은 여러가지 기능들이 있는데 이 기능들을 어떻게든 빨리 표준화 시킨다는 목표를 가지고 있기 때문입니다. 사실 표준이 되든 안되든, 크게 상관이 없이 Google은 표준으로 지정되지 않은 사항을 바로 Chrome에 도입시킵니다. 그리고 사실상 houdini 에서 가장 영향력 있게 주도하는 것은 Google 입니다.

 

각 브라우저별로 지원하는 houdini에서 지정된 스펙. Google이 만든 도표

위 사진을 보면 Google이 가장 많이 houdini에서 만든 스펙을 지원하는 것을 볼 수 있습니다.

왼쪽에 보면 여러가지 스펙들이 있는데 이 중 Propertiees & Values API 은 Typed OM 에 의존되는 스펙이고, 그 외 다른 스펙들은 Properties & Values API와 Typed OM에 의존되어 있는 형식입니다. 모든 스펙들은 기존 CSSOM보다 더 확장해서 정적이면서도 더욱 프로그래밍이 가능하고 background에서 더 조종하고 javascript가 더 많이 개입할 수 있도록 뭔가를 만들어주기 위한 것입니다. 이 중 Typed OM은 CSSOM보다 더 정적이고 hard한 확장판 입니다. Typed OM에 대해서 더 본격적으로 살펴보겠습니다.

 

예를 들어 어떤 태그의 style에 height 를 주고 싶습니다. 여기에 들어갈 값은 그저 숫자만 주면 안되고 반드시 'px' 라는 문자를 더 붙여야 됩니다. 텍스트로 조립해주는 작업은 javascript animation framework 에서 속도를 지체시키는 원인이 되므로 깔끔하게 붙일 방법이 없을까 Google이 고민하게 됩니다. Chrome OS에선 HTML5를 Base로 하고 OS에 대응되는 형(C)을 쓰고 싶은데 문자열을 지저분하게 붙임으로 해서 C parser가 또 다시 동작해야 되는 문제를 해결하고 싶었습니다. 그래서 특수한 attributeStyleMap이라는 것을 만들었습니다. 이 attributeStyleMap를 사용할 때 직접 속성을 쓸 순 없고 아까 우리가 class를 만들어서 사용한 것처럼 get, set을 쓰게 됩니다.

 

맨 처음 'px' 를 뒤에 붙여서 값을 준 방법과 달리 attributeStyleMap 은 문자열이 아닌 값을 h에 넣어 줍니다. set은 h를 그대로 사용하고 이렇게 보면 문자열이 관여하지 않는다고 볼 수 있습니다.