오늘 한 일
- Udemy의 20 Web Projects With Vanilla JavaScript 강의 결제!
독학러는 또 강의를 결제했습니다.. 14,400원인데 어떻게 안사요...
영어 강의라서 인프런 강의랑 많이 고민했는데 udemy 한글자막을 설정할 수 있다는 글을 보고 냉큼 질렀다.
적용한 모습 👍
생각보다 번역도 깔끔하게 잘 되고 좋다. 진작 알았으면 좋았을걸...
공부한 내용
사용자 지정 CSS 속성(변수) 사용하기
참고 문서
:root - CSS: Cascading Style Sheets | MDN - Mozilla
사용자 지정 CSS 속성 사용하기 (변수) | MDN - Mozilla
서로 다른 위치에서 같은 맥락의 속성값을 가질 때 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조할 수 있다.
변수 선언
:root {
--success-color: #2ecc71;
--error-color: #e74c3c;
}
-- 다음 변수의 이름을 정해주고 : 를 이용해 변수의 값을 넣어준다.
:root에서 선언하는 이유
:root는 HTML 문서에서 <html>과 동일하지만 가상 선택자이기 때문에 우선 순위가 더 높다. 그래서 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있다.
변수 불러오기
.form-control.success input {
border-color: var(--success-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}일반적인 값이 오는 자리에 var(변수명)를 사용하여 :root에서 선언한 변수를 불러온다.
분명 javascript 강의를 들었지만 css를 더 알아가는거 같다. CSS 너무 재밌어...
