배경 색상과 이미지
background-color와 background-image 속성을 사용해 배경 색상과 이미지를 적용합니다.
배경 색상과 이미지은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
background-color 속성
background-color 속성은 요소 뒤에 단색을 설정합니다. 모든 CSS 색상 값을 사용할 수 있으며, 배경 이미지의 투명한 영역을 통해 표시됩니다.
<div class="hero">Hero section</div>
background-image 속성
background-image는 하나 이상의 이미지를 요소의 배경으로 설정합니다. 이미지는 background-color 위에 레이어로 배치됩니다.
<div class="banner">Banner (image missing → fallback color shows)</div>
background-size 속성
background-size는 이미지 크기를 제어합니다. 주요 값은 다음과 같습니다:
cover— 영역을 채우며, 필요한 경우 이미지를 자릅니다contain— 영역 안에 전체가 들어맞으며, 빈 공간이 남을 수 있습니다100% 100%— 영역을 정확히 채우도록 늘립니다
<div class="hero"></div>
background-position 속성
background-position은 이미지가 배치될 위치를 설정합니다. 키워드나 백분율/길이 값을 사용합니다.
<div class="hero"></div>
background-repeat 속성
이미지는 기본적으로 바둑판식으로 반복됩니다. background-repeat로 반복 방식을 제어합니다:
<div class="hero"></div>
<div class="pattern"></div>
background-attachment 속성
background-attachment는 이미지가 페이지와 함께 스크롤되는지 결정합니다. fixed는 시차 효과와 비슷한 효과를 만들고, scroll이 기본값입니다.
<div class="spacer">Scroll down ↓</div>
<div class="parallax">Fixed background</div>
<div class="spacer">Scroll up ↑</div>
여러 배경
CSS는 쉼표로 구분된 여러 배경 레이어를 지원합니다. 먼저 나열된 레이어가 맨 위에 표시됩니다.
<div class="card">Overlay + photo layers</div>
background 단축 속성
background 단축 속성은 모든 배경 속성을 하나의 선언으로 결합합니다. 크기의 순서가 중요하므로 위치 뒤에 /로 구분해 작성합니다.
<div class="hero"></div>
배경 클립과 원점
background-clip은 상자 모델을 기준으로 배경을 어디에 칠할지 제어합니다. background-origin은 위치를 지정할 때 사용할 기준점을 설정합니다.
<div class="card">Clip & Origin</div>
텍스트 배경 클립
투명한 텍스트 색상과 함께 background-clip: text를 사용하면 배경 이미지나 그라디언트를 텍스트 모양에 맞춰 잘라낼 수 있습니다.
<h1>Gradient Text</h1>
<img>와 background-image 비교: object-fit
<img> 태그에는 background-image 대신 object-fit: cover와 object-position을 사용합니다. 이렇게 하면 접근성과 검색 엔진 최적화를 위해 이미지가 DOM에 유지됩니다.
<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />
빠른 확인
영역을 채우면서 빈 공간을 남기지 않고 이미지를 자르는 background-size 값은 무엇인가요?
복습
이미지 아래의 대체 색상으로 background-color를 사용합니다. background-size: cover는 화면을 가득 채우는 히어로 이미지에 가장 적합합니다. 여러 배경 레이어를 사용하면 강력한 합성 기능을 활용할 수 있습니다. 단축 속성을 사용하면 모든 배경 속성을 간결하게 결합할 수 있습니다.
자주 묻는 질문
“배경 색상과 이미지” 강의는 무료인가요?
네 — “배경 색상과 이미지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“배경 색상과 이미지”에서 뭘 배우나요?
background-color와 background-image 속성을 사용해 배경 색상과 이미지를 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“배경 색상과 이미지” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.