jonbeo 님의 블로그

안녕하세요 😊CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.📍 1. CSS 변수란?CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능--변수명 형식으로 선언, var(--변수명)으로 사용변수의 스코프(범위) 설정 가능📍 2. 기본 문법:root { --main-color: #4CAF50; --font-size-lg: 20px;}h1 { color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에 변수를 적용하는 전역 범위변수명은 ..

CSS를 쓰다 보면 이런 생각이 들죠.“어? 이 색상 여러 군데에서 계속 반복되는데, 수정하려면 다 찾아서 바꿔야 하나?” 그럴 때 쓰는 게 바로 **CSS 변수(Custom Properties)**입니다.한 번만 선언해두면 어디서든 재사용할 수 있고, 유지보수도 엄청 쉬워져요!✅ 기본 문법:root { --main-color: #FF4200; --font-large: 24px;}h1 { color: var(--main-color); font-size: var(--font-large);} --변수이름으로 선언하고, var(--변수이름)으로 사용할 수 있어요.✅ :root는 어떤 역할?:root는 모든 요소에 적용되는 CSS의 가장 바깥 범위예요.여기서 선언하면 어디서든 접근 가능하다는 뜻이죠!✅ ..