~오늘은 12일차~
- 목차
1. 사용자 지정 속성 (CSS Variable)
+ 복기일기
1. 사용자 지정 속성 (CSS Variable)
-
사용자 지정 속성(CSS 변수, 종속 변수)은 CSS를 작성하는 자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다.
-
전용 표기법을 사용해 정의, var() 함수를 사용해 접근 가능하다.
-
많은 값을 반복적으로 사용할 때 사용 시 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조 가능
-
의미를 가지는 식별자를 사용해서 이해하기 좋다 (ex/ #00ff00 보다는 --main-text-color)
(1) 사용자 지정 사용 방법
- CSS 변수 생성
--css-variable-name: css property value;
↓
:root {
--main-bg-color: #000080;
--main-text-color: #fff;
}(2) 사용자 지정 재정의하기(Overriding)
- CSS 변수가 페이지의 특정 섹션에서만 변경되기를 원하는 경우
:root {
--blue:#1e90FF;
}
body {
background-color: var(--blue);
}
button {
--blue:#0000ff;
/*local variable will override global*/
color: var(--blue);
border: 1px solid var(--blue);
}버튼 요소에만 다른 파란색을 원한다고 가정할 때,
selector 내부에 --blue 변수를 다시 선언할 수 있다.
(3) JavaScript로 변수 변경
- CSS 변수는 DOM에 엑세스할 수 있으므로 JavaScript로 변경할 수 있다.
① 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");
② 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");
③ 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var",jsVar + 4);
+복기일기
오늘의 복기를 시작해보자.
우선 velog로 복습하는 방법을 바꿔야 할 것 같다.
사실 오늘 강의에서는 다른 내용도 많이 있었지만 대부분 이해하는 부분이었고, 이렇게 줄글로 쓰는 것 보다 실제 적용해서 익히는 것이 훨씬 낫겠다는 판단이 들어서였다.
그래서 우선 새롭게 느끼는 부분들만 기록하는 걸로 하고, 실습하며 어려웠거나 서투른 부분을 올려 남기는 것부터 시작 해봐야겠다.
좀 더 효율적이면서 즐겁고 나에게 맞는 공부 방법을 어서 찾아 적응하고 싶다.
