다음은 블로그 회고록을 위한 정리입니다. 필요에 따라 수정하거나 추가할 내용을 알려주세요! 😊

---

CSS Custom Properties & Background

1. CSS Custom Properties (변수)

CSS에서 반복적으로 사용하는 값을 변수처럼 저장하고 사용할 수 있어 유지보수에 매우 유용하다

✔ 기본 문법

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

body {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

• --변수명: 값; 형태로 선언
• var(--변수명)으로 사용 가능
• :root에 선언하면 전체에서 사용 가능

✔ 활용 예시

:root {
  --primary: #ff5733;
  --secondary: #333;
}

button {
  background: var(--primary);
  color: white;
}

button:hover {
  background: var(--secondary);
}

🔹 장점
✅ 재사용성 증가: 한 곳에서 변경하면 전체에 적용됨
✅ 유지보수 편리: 반복되는 색상, 폰트 크기 등을 쉽게 변경 가능
✅ 다크 모드 구현 등 다양한 활용 가능

---

2. CSS Background

✔ 기본 속성

body {
  background-color: #f5f5f5; /* 단색 배경 */
  background-image: url('image.jpg'); /* 배경 이미지 */
  background-size: cover; /* 화면에 꽉 차게 조정 */
  background-position: center; /* 가운데 정렬 */
  background-repeat: no-repeat; /* 반복 없음 */
}

✔ 속성 정리

속성	설명
background-color	배경 색상 지정
background-image	배경 이미지 추가
background-size	이미지 크기 조정 (cover, contain, auto, px 등)
background-position	배경 위치 설정 (center, top left 등)
background-repeat	배경 이미지 반복 설정 (repeat, no-repeat)

✔ 배경 속성 한 줄로 쓰기

background: url('image.jpg') no-repeat center/cover;

• background-image, background-repeat, background-position, background-size를 한 줄로 작성 가능

---

3. 배운 점 & 느낀 점 💡

• CSS 변수(--custom-property)를 활용하면 유지보수성이 뛰어난 코드를 작성할 수 있다
• 배경 관련 속성들을 한 줄로 깔끔하게 정리할 수 있어 더 효율적으로 스타일링 가능
• 앞으로 다크 모드, 테마 변경 등에 적용해 보면 좋을 것 같다