HTML/CSS - custom-properties

1️⃣ 배운 내용 정리

09-custom-properties

CSS Custom Properties는 스타일 값에 이름을 붙여 재사용할 수 있도록 도와주는 변수 개념

/* 전역 변수 정의 */

:root {
--primary-color: #3498db;  
--secondary-color: #2ecc71;* 
}

• :root → 전역 스코프에서 변수를 선언 (HTML의 최상위 요소)
• 변수 이름은 - - 로 시작
• 전역에서 접근 가능

플랜 B (대체 값 설정)

background-color: var(--secondary-color, #2ecc71);

스코프 우선순위

• 전역보다 지역 변수가 우선 적용 (가장 가까운 곳에서 먼저 찾음)
• 같은 변수를 덮어쓰면 나중에 선언된 값이 우선 적용됨

:root {
--text-color: black;
}

.section {
--text-color: blue;  /* 이 영역에서는 파란색으로 덮어쓰기 */
color: var(--text-color);
}

10-background

background-color: var(--primary-color);
background-image: url('image.jpg');
background-size: cover;  /* 이미지를 요소 크기에 맞게 조정 **/
background-position: center;  /* 가운데 정렬 */
background-repeat: no-repeat;  /* 반복 방지 */

HSL (Hue, Saturation, Lightness)

background-color: hsl(210, 100%, 50%);

• Hue (색상) → 0~360도 (빨강: 0°, 초록: 120°, 파랑: 240°)
• Saturation (채도) → 0% (회색) ~ 100% (완전한 색)
• Lightness (명도) → 0% (검정) ~ 100% (흰색)