WIT – NTS UIT Blog

새로운 CSS Typed Object Model

Posted by in Research

이 글은 https://developers.google.com/web/updates/2018/03/cssom 문서 번역을 기초로, 필요한 설명을 일부 추가한 글입니다. 요약 최근 W3C Houdini WG에서 표준화 하고 있는 CSS Typed Object Model이 크롬 66에 추가되었습니다. CSS Typed Object Model은 아래와 같이 사용할 수 있습니다:

이제 CSS는 JavaScript에서 사용하기에 적절한 객체 기반 API를 갖게 되었으며, 기존의 CSSOM의 미묘한 버그들와 문자열로 인한 제약을 해결할 수 있습니다! 1. 소개 CSSOM 이전의 CSS에는 수년간 Object Model(CSSOM)이 존재했습니다. CSSOM은 JavaScript에서 CSS를 조작할 수 있게 해주는 API입니다. CSSOM은 웹 페이지에서 발견되는 CSS 스타일의 기본 ‘맵’으로, DOM과 결합된 CSSOM은 브라우저에서 웹 페이지를 표현하는데 사용됩니다. JavaScript에서 .style을 read 또는 set할 때…read more

CSS Custom Properties (커스텀속성) 소개

Posted by in Research

(https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였습니다.) 1. 전처리기 변수와 CSS 커스텀 속성 오늘날 CSS 전처리기는 웹개발에서 중요한 역할을 수행하고 있습니다. (Sass, Stylus, Less, PostCSS 등) 전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것인데요. 변수를 사용하면 복붙을 피할 수 있고, 개발과 리팩토링이 간단해집니다. 그러나, 전처리기 변수에는 다음과 같은 몇가지 한계가 있습니다. 동적으로 변경할 수 없다. DOM 구조를 알지 못한다. JavaScript에서 읽거나 변경할 수 없다. 이러한 문제를 해결하기 위해 CSS 커스텀 속성이 개발되었습니다. 전처리기와 CSS 커스텀 속성 두 가지가 어떤 점이 다른지는 아래에서 더 자세히 알아보도록 하겠습니다. 2. CSS…read more