본문 바로가기

CSS6

자바스크립트에서 CSS와 SASS의 변수 사용하기 뷰와 리액트 등 프레임워크 및 라이브러리 자바스크립트에서 css와 sass를 사용하는 일이 자주 있습니다. 그럴 때 마주하고 싶은 것이 바로 css Custom variable과 Sass variable로 어떻게 하면 비용절감을할 수 있을까 고민하게 됩니다. 이러한 상황에서 자바스크립트에서 css 및 sass의 변수를 다루는 법을 공유하고자 합니다. CSS 커스텀 변수와 Javascript 간단명료한 속성을 사용해서 가능한 부분입니다. // setProperty 사용하기 document.documentElement.style.setProperty("--margin", 10 + "rem"); // 10rem 그리고 자바스크립트에서 getComputedStyle 속성을 사용하여 CSS 변수를 검색할 수도 있.. 2020. 4. 5.
Css 선택자. 어떤 걸 써야 더 성능이 좋을까? 많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 수 있습니다. 이 규칙은 실제로 속도가 특징 인 고성능 웹 사이트에만 적용되며 특정 페이지에 1000 개의 DOM 요소가 나타날 수 있습니다. 그러나 모범 사례는 모범 사례이며, 다음 Facebook 또는 로컬 데코레이터를위한 사이트를 구축하든 상관없이 항상 알아 두는 것이 좋습니다. Steve Souders 의 책 Even Faster Websites에서 인용하는 css 선택자 스피드의 순위는 다음과 같습니다. ID, e.g. #header Class, e.g. .promo Type, e.g. div Adja.. 2020. 2. 15.