[TIL] CSS: 시각적 완성도를 높이는 배경(Backgrounds)과 그라데이션(Gradients)

• CSS Backgrounds property - 웹 페이지의 배경 색상, 이미지 배치, 반복, 고정 등 시각적 효과 제어
• CSS Gradients property - 이미지 파일 없이 CSS 코드로 구현하는 선형, 원형, 원뿔형 색상 혼합 기법

---

 

 

CSS Backgrounds property

 

 

1. 개별 배경 속성들

배경을 세밀하게 제어하기 위한 주요 속성들이다.

 

background-color: 요소의 배경 색상을 지정한다. 

background-image: 배경에 넣을 이미지 경로를 url() 함수로 지정한다.

background-repeat: 이미지의 반복 여부를 결정한다. (repeat, no-repeat, repeat-x, repeat-y)

background-position: 이미지의 시작 위치를 설정한다. (top, center, bottom, left, right 또는 px, %)

background-size: 이미지의 크기를 조절한다.

 

cover 비율을 유지하며 요소를 꽉 채우고(일부 잘림 가능), 특히 cover는 반응형 웹 디자인에서 가장 많이 쓰이는 속성

contain 비율을 유지하며 이미지가 전체가 다 보이게 맞춘다.

 

background-attachment: 스크롤 시 이미지의 고정 여부를 정한다. (scroll, fixed)

 

 

이미지가 로드되지 않을 상황을 대비해 항상 유사한 색상을 함께 지정하는 습관을 들이는 것이 좋다.

2. 배경 축약 속성 (Shorthand)

여러 속성을 한 줄로 줄여서 쓸 수 있으며, 가독성을 높이고 코드 길이를 줄이는 데 효과적이다.

순서는 보통 color, image, repeat, attachment, position / size 형태로 작성

사이즈는 반드시 위치 뒤에 슬래시(/)와 함께 써야 한다.

 

 

3. 다중 배경 (Multiple Backgrounds)

하나의 요소에 여러 개의 배경 이미지를 겹쳐서 사용할 수 있다.

먼저 쓴 이미지가 가장 위(사용자에게 가까운 쪽)에 배치되며, 투명도(rgba)가 들어간 색상이나 그라데이션 오버레이를 겹치면 이미지 위에 글자가 잘 보이게 만들 수 있다.

 

 

4. 배경 클립과 원점 (Clip & Origin)

배경이 어디까지 그려질지, 어디서부터 시작할지 결정한다.

 

background-clip: 배경이 테두리(border-box), 안쪽 여백(padding-box), 콘텐츠(content-box) 중 어디까지 채워질지 정한다.

background-origin: 배경 이미지가 시작되는 기준점을 정한다.

 

 

[표] 배경 주요 속성 요약표

속성	설명	주요 값 예시
background-color	배경색	red, #ffffff, rgba(0,0,0,0.5)
background-image	배경 이미지	url('image.jpg'), linear-gradient(...)
background-size	이미지 크기	cover, contain, 100% 50%
background-position	이미지 위치	center, bottom right, 50% 50%
background-clip	배경 적용 범위	border-box, padding-box, content-box

 

 

[예제 코드] 풀 스크린 배경 및 축약형, 다중 배경 만들기

CSS

 

/* 화면 전체를 가득 채우면서 스크롤해도 고정되어 있는 풀 스크린 배경 */
.main-banner {
  width: 100%;
  height: 100vh; /* 화면 높이 전체 */
  
  /* 개별 속성으로 배경 설정 */
  background-color: #333;
  background-image: url('nature.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* 배경 축약 속성 (Shorthand) 예시 */
.hero-section {
  background: #000 url('bg.jpg') no-repeat fixed center / cover;
}

/* 다중 배경 (Multiple Backgrounds) 예시 */
.multi-bg {
  background-image: url('overlay.png'), url('base-photo.jpg');
  background-position: center, top left;
  background-repeat: no-repeat;
}

 

• background-size: cover; 는 반응형 웹 디자인에서 이미지를 찌그러뜨리지 않고 영역을 채울 때 가장 많이 쓰이는 속성
• 배경 이미지 위에 글자가 잘 보이게 하려면 rgba()를 이용한 반투명이나 그라데이션 오버레이를 사용하면 좋다
• 이미지가 로드되지 않을 상황을 대비해 항상 유사한 background-color를 함께 지정하는 습관을 들여야 한다

 

 

---

 

 

CSS Gradients property

 

 

1. 선형 그라데이션 (Linear Gradients)

색상이 일정한 방향(직선)으로 진행하며 변하는 방식이다.

 

구문 linear-gradient(방향/각도, 색상1, 색상2, ...) 형태로 작성한다.

방향 to right, to bottom left처럼 키워드를 쓰거나, 45deg처럼 각도를 직접 지정할 수 있다.

기본값은 위에서 아래로 떨어지는 형태이다.

 

 

2. 원형 그라데이션 (Radial Gradients)

중심점에서 시작하여 바깥쪽으로 원을 그리며 색상이 변하는 방식이다.

 

구문 radial-gradient(모양 크기 at 중심점, 색상1, 색상2, ...) 형태로 작성한다.

모양 circle(정원) 또는 ellipse(타원, 기본값)를 선택할 수 있다.

 

 

3. 원뿔형 그라데이션 (Conic Gradients)

중심점을 기준으로 시계 방향으로 회전하며 색상이 변하는 방식이다.

 

파이 차트나 색상표(Color Wheel)와 같은 디자인을 만들 때 매우 유용하다.

 

 

4. 색상 중단점 (Color Stops)

색상이 바뀌는 정확한 위치를 백분율(%)이나 픽셀(px)로 지정할 수 있다.

 

중단점 위치를 겹치게 설정하면 부드러운 변화가 아닌 날카로운 경계선을 만들어 이색 배경을 구현할 수도 있다.

 

 

5. 반복 그라데이션 (Repeating Gradients)

설정한 그라데이션 패턴을 요소 전체에 무한히 반복시킨다.

repeating-linear-gradient, repeating-radial-gradient 등의 함수를 사용하며, 스트라이프(줄무늬) 패턴이나 체크무늬를 만들 때 유용하다.

그라데이션은 color 속성이 아닌 background 또는 background-image 속성에서 사용해야 하며, 구버전 브라우저를 대비해 단일 색상의 배경색(Fallback color)을 미리 선언해 두는 것이 안전하다.

 

 

[표] 그라데이션 종류별 요약표

종류	함수	특징	주요 용도
선형	linear-gradient()	직선 방향으로 색 변화	일반적인 배경, 버튼 입체감
원형	radial-gradient()	원 모양으로 확산	조명 효과, 구 형태 묘사
원뿔	conic-gradient()	시계 방향 회전	차트, 로딩 애니메이션
반복	repeating-...	패턴의 무한 반복	줄무늬, 격자 배경

 

 

[예제 코드] 그라데이션 종류 및 색상 중단점 적용 예시

CSS

 

/* 1. 선형 그라데이션 */
.linear-box {
  background: #f00; /* Fallback color */
  background: linear-gradient(45deg, #f3bc2c, #e74c3c);
}

/* 2. 원형 그라데이션 */
.radial-box {
  background: radial-gradient(circle, yellow, red, black);
  /* 왼쪽 위에서 시작하는 형태: radial-gradient(at top left, white, blue); */
}

/* 3. 원뿔형 그라데이션 (원형 차트 느낌) */
.conic-box {
  background: conic-gradient(red, yellow, green, blue, red);
  border-radius: 50%; 
}

/* 4. 색상 중단점 (경계가 뚜렷한 배경) */
.stop-box {
  background: linear-gradient(to right, red 50%, yellow 50%);
}

/* 5. 반복 그라데이션 (스트라이프 패턴) */
.stripe-box {
  background: repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px);
}

 

• 그라데이션은 color 속성이 아닌 background 또는 background-image 속성에서 사용해야한다.
• 최신 브라우저는 대부분 지원하지만, 오래된 환경을 위해 단일 색상의 배경색을 미리 선언해 두는것이 안전
• 투명도와 결합하면 이미지 위에 겹쳐지는 세련된 오버레이 효과를 만들 수 있다.
• CSS gradient generator (그라데이션 코드 뽑아주는 사이트) https://cssgradient.io/

 

---