사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN
사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;)
developer.mozilla.org
css 전역화 시키기 1️⃣ (ver. ThemeProvider)
[styled-components] ThemeProvider로 공통 스타일 속성 관리하기. 지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라
eundol1113.tistory.com
이 글이 왜 2️⃣인지는 1️⃣보면 이해 가능 (너무 피곤해서 친절하지 않음..)
그냥. css랑 props라도 전역화 시키자 싶어서 :root를 찾게 되었는 데 이게 styled-component에도 적용이 됨 (아주 개꿀)
따로 Provider를 설정해주지 않아도 되고 styled-component를 안 쓰면 라이브러리 설치 없이 css만으로 할 수 있어서 아주 좋았음 (+ 다른. css 파일에서도 사용 가능)
1) :root를 설정한 style.css
2) :root를 설정하지 않은 다른 .css
3-1처럼 오류 발생함
JSX 방식으로 사용하면 오류 안 발생함
결론은 :root 사용하면 어디서든 var(#) 형식으로 css 전역화 가능하다.
'더 알아보기 > 기능' 카테고리의 다른 글
| 반응형 footer 하단 고정하기 (0) | 2023.01.17 |
|---|---|
| [Next.js] 주소 입력 → 위/경도 출력 → 지도 출력 (카카오 geocoder/지도 api) (0) | 2023.01.10 |
| css 전역화 시키기 1️⃣ (ver. ThemeProvider) (2) | 2023.01.06 |
| 크롬 비밀번호 자동완성 비활성화 (0) | 2022.12.13 |
| Pagination 만들기 (라이브러리 X) (0) | 2022.11.09 |
댓글