"# JavaScript 30" 강의 - 03.Playing with CSS Variables and JS
학습일자
2020.9.28
학습내용
(CSS) 사용자 지정 속성
: 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) var() 함수를 사용해 접근할 수 있습니
다. (color: var(--main-color);)
: developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
사용자 지정 CSS 속성 사용하기 (변수)
사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;)
developer.mozilla.org
(CSS) ': root'
: 문서 트리의 루트 요소를 선택/ HTML의 루트 요소는 <html> 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 동일함
: 기본적으로 다른 선택자에서 인용하는 속성이 공통적일 경우 :root 안에 기본 값을 지정하고, 아닌 경우만 개별 선택자 속성으로 별도로 지정 (코드를 줄일 수 있음. 사용자 지정 속성과 함께 활용 가능)
developer.mozilla.org/ko/docs/Web/CSS/:root
:root
CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 html 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같습니다.
developer.mozilla.org
(CSS) documentObject.documentElement 는 the root node of the document를 반환함.
(CSS) 특정 조건 하에서만 변수에 값 할당하는 방법('||')
자바스크립트 변수선언시 팁 및 정보
자바스크립트 엘리먼트 앞 또는 뒤에 요소 이동하기, append(), appendChild(), prepend(), insertBefore()
webisfree.com
알게된 점
- document.documentElement으로 반환되는 값은 최상위(루트) element(=HTML) 즉, html 파일의 모든 내용 그대로 가져옴. 따라서 같은 html 문서에 css(style)이 기재되어 있고, 공통 속성이 :root에서 규정되어 있는 경우 :root의 사용자 지정 속성만 변경해서 변경사항 적용 함수 실행하면 OK
- 변수 할당 시, A || B 를 사용하면 간단한 if 문과 같이, A가 아닐 경우, B를 반환 가능
- html element 자체에 접근 시(특히 style이나 script가 직접 html 태그 안에 들어가 있는 경우), docuemnt.documentElement.~활용 가능
function update() {
//여기서 this는 <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> 형태로 반환함
// '||'를 통해 this.dataset.sizing이 true(값이 있는) 경우에는 해당 값을, 아닌(false) 경우에는 빈칸을 return
const suffix = this.dataset.sizing || "";
//변할 수 있는 element가 여럿이므로, getelementbyid, class 등으로 접근하는 것은 바람직 X,
//여기서 사용되는 방식은 document.documentElement로 루트 element(HTML)에 접근해서 같은 문서에 있는 style문 내의 :root에 있는 속성을 변경하는 방식
document.documentElement.style.setProperty(
`--${this.name}`,
this.value + suffix
);
}
const inputs = Array.from(document.querySelectorAll("input"));
inputs.forEach((input) => input.addEventListener("change", update));
inputs.forEach((input) => input.addEventListener("mousemove", update));