기본 콘텐츠로 건너뛰기

방송대 방통대 HTML5웹프로그래밍 8강 - CSS 배경, 그라데이션, 변형 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 8강 - CSS 배경, 그라데이션, 변형

HTML5웹프로그래밍 8강 - CSS 배경, 그라데이션, 변형

CSS 배경의 색상·이미지·반복·위치·크기·스크롤·적용 영역을 제어하고 background 단축 속성으로 정리하는 방법을 학습한다. 이어서 선형·원형·원뿔형 및 반복 그라데이션을 만들고, transform과 perspective를 이용해 요소에 2차원·3차원 변형을 적용하는 원리를 살펴본다.

1. CSS 배경 속성의 구성

CSS의 배경은 단순한 색상 하나만 의미하지 않는다. 요소의 배경색, 한 개 이상의 배경 이미지, 이미지의 반복 방식과 위치·크기, 스크롤에 따른 고정 방식, 박스 모델에서 배경이 시작되고 잘리는 영역까지 여러 속성을 조합해 표현한다.

속성역할
background-color요소의 배경색 지정
background-image배경 이미지 또는 그라데이션 지정
background-repeat배경 이미지의 반복 방식 결정
background-position배경 이미지의 시작 위치 지정
background-size배경 이미지의 렌더링 크기 지정
background-attachment스크롤에 따른 배경 이미지의 움직임 결정
background-origin배경 이미지 배치의 기준 박스 지정
background-clip배경이 그려지는 범위를 제한

각 속성을 개별적으로 작성할 수도 있고 background 단축 속성 하나에 묶을 수도 있다. 처음에는 개별 속성으로 동작을 익힌 뒤 단축 표기 순서와 초기화 효과를 이해하는 것이 안전하다.

2. 배경색과 배경 이미지

background-color

background-color는 색 이름, 16진수, rgb(), rgba(), hsl() 등 CSS 색상 표현을 사용할 수 있다. 알파값이 있는 색상을 사용하면 요소 뒤쪽의 배경이 비쳐 보인다.

.box {
  background-color: #ff0000;
}
.panel {
  background-color: rgba(0, 0, 0, 0.5);
}

background-image

background-image에는 url()로 이미지 파일을 지정한다. 배경 이미지는 콘텐츠 자체를 전달하는 img 요소와 달리 장식이나 배경 표현에 사용한다. PNG·JPG뿐 아니라 압축 효율이 높은 WebP·AVIF 같은 형식도 고려할 수 있다.

.hero {
  background-image: url("flower.jpg");
}

쉼표로 여러 배경 이미지를 나열하면 다중 배경을 만들 수 있다. 먼저 작성한 이미지가 사용자에게 더 가까운 위쪽 레이어에 놓이고, 뒤의 이미지가 아래 레이어에 놓인다.

.card {
  background-image:
    url("icon.png"),
    linear-gradient(135deg, #6a11cb, #2575fc);
}
배경 이미지가 불러와지지 않거나 투명 영역이 있을 때를 대비해 콘텐츠와 충분한 대비를 이루는 background-color를 함께 지정하는 것이 좋다.

3. 배경 반복과 위치

background-repeat

배경 이미지가 요소보다 작으면 기본적으로 가로와 세로 방향에 반복된다. repeat는 양방향 반복, no-repeat는 반복하지 않음, repeat-x와 repeat-y는 각각 가로·세로 방향만 반복한다.

space는 이미지를 잘라내지 않고 가능한 개수만 배치한 뒤 남는 공간을 이미지 사이에 분배한다. round는 이미지가 잘리지 않도록 크기를 조절하여 정수 개수만큼 영역을 채운다.

background-position

background-position은 배경 이미지의 시작 위치를 정한다. 가로 위치는 left·center·right, 세로 위치는 top·center·bottom을 사용할 수 있고 길이값이나 백분율도 가능하다.

.box-a {
  background-position: center center;
}
.box-b {
  background-position: right 20px bottom 10px;
}
.box-c {
  background-position: 25% 75%;
}

값을 하나만 쓰면 다른 축은 일반적으로 center가 된다. 여러 배경을 사용한다면 쉼표로 각 레이어의 위치와 반복 값을 같은 순서로 나열해야 한다.

레이어 대응: background-image의 첫 번째 이미지에는 background-position과 background-repeat의 첫 번째 값이 적용된다. 쉼표로 나뉜 각 목록의 순서를 맞춰야 한다.

4. 배경 크기와 스크롤 고정

background-size

background-size는 배경 이미지가 요소 안에서 렌더링되는 크기를 지정한다. auto는 이미지의 원래 비율을 유지하며 자동 계산한다. 길이와 백분율을 한 개 또는 두 개 지정해 가로·세로 크기를 직접 정할 수도 있다.

값동작
auto원본 크기와 비율을 바탕으로 자동 계산
cover영역을 빈틈없이 덮도록 비율 유지 확대·축소, 일부 잘릴 수 있음
contain이미지 전체가 보이도록 비율 유지 확대·축소, 빈 공간이 생길 수 있음
100% 100%요소의 가로·세로에 맞춰 늘림, 원본 비율이 변할 수 있음

background-attachment

scroll은 배경이 요소에 고정된 채 페이지와 함께 스크롤되는 기본 방식이다. fixed는 배경을 뷰포트에 고정하여 페이지를 스크롤해도 같은 화면 위치에 남게 한다. local은 요소 자체에 스크롤 영역이 있을 때 그 요소의 콘텐츠와 함께 배경도 스크롤된다.

cover는 “이미지 전체 표시”가 아니라 “영역 전체 덮기”가 우선이다. contain은 “영역을 모두 덮기”보다 “이미지 전체 표시”가 우선이다.

5. background-clip과 background-origin

background-clip

background-clip은 배경색과 배경 이미지가 박스 모델의 어디까지 그려질지 정한다. border-box는 테두리 바깥 경계까지, padding-box는 패딩 바깥 경계까지, content-box는 콘텐츠 영역까지만 배경을 그린다.

text 값은 배경을 글자 모양으로 잘라 텍스트 안에 이미지나 그라데이션이 보이게 한다. 브라우저 호환성을 위해 접두사가 필요한 환경이 있을 수 있으며, 글자색을 투명하게 만들어 배경이 드러나도록 구성한다.

background-origin

background-origin은 배경 이미지의 배치 원점, 즉 background-position의 기준 영역을 정한다. padding-box가 기본값이며 border-box, content-box를 선택할 수 있다. origin은 이미지의 시작 기준을 바꾸고 clip은 실제로 보이는 범위를 자른다는 점에서 역할이 다르다.

속성질문기본값
background-origin이미지를 어디를 기준으로 배치할 것인가?padding-box
background-clip배경을 어디까지 보이게 할 것인가?border-box

6. background 단축 속성

background는 색상, 이미지, 반복, 고정, 위치와 크기, origin, clip을 한 선언에 묶는 단축 속성이다. position과 size를 함께 쓸 때는 position / size처럼 슬래시로 구분한다.

.hero {
  background:
    #222 url("flower.jpg") no-repeat fixed
    center / cover padding-box border-box;
}

박스 값이 하나이면 origin과 clip에 함께 적용되고, 두 개이면 첫 번째가 origin, 두 번째가 clip에 적용된다. 다중 배경은 쉼표로 레이어를 구분하며 background-color는 마지막 레이어에만 작성한다.

.panel {
  background:
    url("pattern.png") repeat-x top / 40px 40px,
    linear-gradient(#ffffff, #dbeafe) no-repeat center / cover;
}

단축 속성은 작성하지 않은 하위 속성까지 초기값으로 되돌릴 수 있다. 앞서 개별 속성으로 지정한 값을 유지하려면 background 선언이 무엇을 초기화하는지 확인해야 한다.

7. 그라데이션의 기본 원리

CSS 그라데이션은 색상이 연속적으로 변하는 이미지를 생성한다. 별도의 이미지 파일이 아니라 background-image에 사용하는 CSS 생성 이미지이다. 선형, 원형, 원뿔형 그라데이션과 각각의 반복형을 사용할 수 있다.

함수색상 변화 방식
linear-gradient()직선을 따라 색상이 변화
radial-gradient()중심에서 바깥으로 원·타원 형태로 변화
conic-gradient()중심 둘레를 회전하며 각도 방향으로 변화
repeating-*정의한 그라데이션 구간을 반복

그라데이션은 색상값이 아니므로 background-color가 아니라 background-image에 해당한다. background 단축 속성에서도 이미지 위치에 작성한다.

8. 선형 그라데이션

linear-gradient()는 진행 방향과 두 개 이상의 색상 정지점을 지정한다. 방향을 생략하면 위에서 아래로 진행한다. to right, to bottom right처럼 목적지 방향을 쓰거나 deg 각도를 사용할 수 있다.

.a {
  background-image: linear-gradient(red, blue);
}
.b {
  background-image: linear-gradient(to right, #ff7a18, #af002d);
}
.c {
  background-image: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

각도 기준에서 0deg는 위쪽, 90deg는 오른쪽, 180deg는 아래쪽, 270deg는 왼쪽을 향한다. 색상 정지점 뒤에 길이나 백분율을 지정하면 특정 위치에서 해당 색상이 나타나도록 제어할 수 있다.

같은 위치에 서로 다른 색상 정지점을 배치하면 경계가 선명한 띠나 분할 배경을 만들 수 있다. 반투명 색상을 사용하면 배경 이미지 위에 그림자 오버레이를 만드는 데도 활용된다.

방향 키워드는 “시작점”이 아니라 색상이 진행해 도착하는 방향을 쓴다. to right는 왼쪽에서 오른쪽으로 색이 변한다.

9. 원형·원뿔형 그라데이션

radial-gradient()

원형 그라데이션은 중심에서 바깥쪽으로 색이 퍼진다. 기본 모양은 요소 비율을 따르는 ellipse이며 circle을 지정할 수 있다. 크기는 closest-side, farthest-side, closest-corner, farthest-corner 등의 키워드로 정한다.

at 뒤에 중심 위치를 지정한다. 예를 들어 radial-gradient(circle at top right, white, yellow 40%, red 100%)는 오른쪽 위에서 시작하는 원형 변화가 된다.

conic-gradient()

원뿔형 그라데이션은 중심을 기준으로 색상이 각도 방향으로 회전하며 변한다. from으로 시작 각도, at으로 중심 위치를 정한다. 색상 정지점에는 deg 또는 turn을 사용할 수 있어 파이 차트나 색상환을 만들기 좋다.

.pie {
  background-image: conic-gradient(
    red 0 40%,
    green 40% 70%,
    blue 70% 100%
  );
}
구분: radial-gradient는 중심에서 거리 방향으로 퍼지고, conic-gradient는 중심 둘레를 각도 방향으로 회전한다.

10. 반복 그라데이션

repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()는 지정한 마지막 색상 정지점까지를 한 주기로 삼아 그라데이션을 반복한다. 줄무늬, 격자 느낌, 경고 테이프, 동심원, 방사형 무늬 등을 이미지 파일 없이 만들 수 있다.

.stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #111 0 10px,
    #facc15 10px 20px
  );
}
.rings {
  background-image: repeating-radial-gradient(
    circle,
    #ffffff 0 10px,
    #60a5fa 10px 20px
  );
}

마지막 정지점의 위치가 반복 주기를 결정한다. 위의 선형 예에서는 0~20px가 하나의 패턴이 되어 계속 반복된다. 경계가 분명한 패턴을 만들려면 인접한 색상 구간의 시작과 끝을 명확히 지정한다.

11. transform과 2D 변형

transform은 요소의 좌표 공간을 변형하여 이동, 회전, 크기 조절, 기울이기 효과를 준다. 변형은 요소가 그려지는 모습에 영향을 주지만 일반적인 문서 흐름에서 다른 요소가 차지하는 공간을 다시 계산하지는 않는다.

함수기능예
translate(x,y)X·Y축으로 이동translate(50px, -20px)
rotate(angle)평면에서 회전rotate(45deg)
scale(x,y)가로·세로 크기 배율 조절scale(1.2, 0.8)
skew(x,y)X·Y축 방향으로 기울임skew(20deg, 0deg)
 
.card:hover {
  transform: translateY(-10px) rotate(3deg) scale(1.05);
}

여러 변형 함수를 한 transform 선언에 공백으로 나열할 수 있다. 함수 순서가 달라지면 좌표계가 변하는 과정도 달라져 최종 결과가 달라질 수 있으므로 순서를 의도적으로 정해야 한다.

12. 변형 기준점과 행렬

transform-origin

transform-origin은 회전·크기 조절·기울이기의 기준점을 정한다. 기본값은 요소의 가운데인 50% 50%이다. left, right, top, bottom, center 같은 키워드와 길이·백분율을 사용할 수 있다.

기준점을 왼쪽 위로 바꾸면 문이 경첩을 중심으로 움직이는 것처럼 회전시킬 수 있다. 이동 변형은 기준점의 시각적 영향을 거의 받지 않지만 rotate, scale, skew에서는 결과가 크게 달라진다.

개별 변형 속성과 다중 변형

translate, rotate, scale은 각각 독립적인 CSS 속성으로도 작성할 수 있다. 여러 transform 함수를 하나의 선언에 나열하는 방법과 개별 속성 방식은 합성 순서를 이해하여 사용해야 한다.

matrix()

matrix(a,b,c,d,tx,ty)는 2D 이동·회전·크기 조절·기울이기를 하나의 행렬로 표현한다. a와 d는 기본적으로 X·Y축 크기, b와 c는 기울임·회전 성분, tx와 ty는 이동 성분에 관련된다. 사람이 직접 계산하기에는 복잡하므로 개발자 도구나 변환 계산 결과에서 자주 접한다.

matrix() 하나로 여러 변형을 표현할 수 있지만 코드의 의도를 읽기는 어렵다. 직접 작성할 때는 translate·rotate·scale·skew 함수를 사용하고, 합성 결과를 분석할 때 matrix를 이해하는 방식이 유용하다.

13. 3D 원근감과 뒷면 표시

perspective

2D 화면에서 3D 공간처럼 깊이를 느끼게 하려면 원근감을 지정해야 한다. perspective 길이는 관찰자와 Z=0 평면 사이의 거리를 나타낸다. 일반적으로 값이 작을수록 관찰자가 가까워 원근 왜곡이 강하고, 값이 클수록 멀어져 변화가 완만하다.

여러 자식 요소가 같은 3D 공간을 공유하게 하려면 부모에 perspective 속성을 두고 자식에 rotateY(), rotateX() 같은 transform을 적용한다. transform 안의 perspective() 함수는 해당 요소의 변형 목록에서 원근감을 적용하는 방식이다.

perspective-origin

perspective-origin은 관찰자의 시선이 향하는 소실점 위치를 조정한다. 기본값은 50% 50%이며 left·right·top·bottom·center, 길이, 백분율을 사용할 수 있다. 부모에 perspective를 지정한 경우 perspective-origin도 부모에 설정한다.

backface-visibility

3D 회전으로 요소의 뒷면이 사용자 쪽을 향할 때 그 뒷면을 표시할지 정한다. visible은 뒷면을 거울처럼 뒤집힌 형태로 보이는 기본값이고, hidden은 뒷면을 숨긴다. 앞면과 뒷면을 따로 만든 카드 뒤집기 효과에서는 보통 두 면에 hidden을 사용한다.

3D 구성: 부모에 perspective → 자식에 3D transform → 필요하면 perspective-origin으로 소실점 조절 → backface-visibility로 뒷면 표시 여부 결정의 흐름을 기억한다.

14. cursor 속성

cursor 속성은 마우스 포인터가 요소 위에 있을 때 표시할 커서 모양을 지정한다. 사용자에게 요소의 상호작용 가능성과 상태를 알려 주는 보조 신호이다.

값일반적 의미
default기본 화살표
pointer링크·버튼처럼 클릭 가능한 대상
text텍스트 선택 가능
wait작업 처리 중, 기다려야 함
not-allowed현재 동작이 허용되지 않음

커서 모양만으로 기능을 제공해서는 안 된다. pointer를 지정했다고 요소가 자동으로 버튼이 되는 것은 아니며, 실제 HTML 의미·키보드 조작·이벤트 동작과 함께 설계해야 한다.

핵심 개념 정리

CSS 배경은 color, image, repeat, position, size, attachment, origin, clip 속성으로 구성된다. cover는 영역을 모두 덮고, contain은 이미지 전체를 보인다. origin은 배치 기준, clip은 표시 범위를 결정하며 position과 size는 단축 속성에서 슬래시로 구분한다.

그라데이션은 background-image에 사용하는 생성 이미지이다. linear-gradient는 직선, radial-gradient는 중심에서 바깥 방향, conic-gradient는 중심 둘레의 각도 방향으로 색이 변한다. repeating 계열은 마지막 색상 정지점까지의 구간을 반복한다.

transform은 translate, rotate, scale, skew로 요소를 이동·회전·확대·기울이며 함수 순서와 transform-origin이 결과에 영향을 준다. 3D 표현에서는 부모의 perspective와 perspective-origin, 자식의 3D transform, backface-visibility를 함께 이해해야 한다.

최종 정리: 배경과 그라데이션은 요소의 표면을 구성하고 transform은 그 요소의 좌표 공간을 변화시킨다. 각 속성의 기준 영역, 레이어 순서, 크기·방향·원점의 의미를 구분해야 예측 가능한 시각 효과를 만들 수 있다.

예상문제 20선

1. 요소의 배경색을 지정하는 CSS 속성은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
background-color는 요소의 배경색을 지정한다. 이미지와 그라데이션은 background-image에 해당한다.

2. 다중 배경 이미지의 레이어 순서에 대한 설명으로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
쉼표로 여러 배경을 지정하면 먼저 나열한 배경 이미지가 사용자에게 더 가까운 위쪽 레이어에 배치된다.

3. background-repeat: no-repeat의 의미는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
no-repeat는 배경 이미지가 한 번만 그려지고 반복되지 않도록 한다.

4. background-position: right 20px bottom 10px의 의미는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
네 방향 기준 문법을 사용하면 오른쪽·아래쪽 경계로부터의 간격을 직접 지정할 수 있다.

5. background-size: cover의 동작은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
cover는 요소 영역을 빈틈없이 덮는 것이 우선이므로 이미지 비율은 유지하지만 일부가 영역 밖으로 잘릴 수 있다.

6. 이미지 전체가 보이도록 비율을 유지해 맞추는 background-size 값은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
contain은 이미지 전체를 요소 안에 넣는 것이 우선이므로 남는 공간이 생길 수 있다.

7. 배경을 뷰포트에 고정하여 페이지 스크롤에도 같은 화면 위치에 남게 하는 값은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
background-attachment: fixed는 배경을 뷰포트에 고정한다.

8. 배경 이미지의 배치 기준 박스를 정하는 속성은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
background-origin은 background-position을 계산할 배치 원점을 border-box, padding-box, content-box 중에서 정한다.

9. 배경이 실제로 그려져 보이는 범위를 제한하는 속성은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
background-clip은 배경이 border-box, padding-box, content-box 중 어디까지 보일지 결정한다.

10. background 단축 속성에서 position과 size를 구분하는 기호는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
background 단축 표기에서는 position / size 순서로 슬래시를 사용해 두 값을 구분한다.

11. CSS 그라데이션이 속하는 값의 성격은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
그라데이션 함수는 CSS가 생성하는 이미지이므로 background-image 또는 background 단축 속성의 이미지 위치에 사용한다.

12. linear-gradient()에서 방향을 생략했을 때 기본 진행 방향은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
선형 그라데이션의 기본 방향은 위에서 아래이며 각도로는 180deg 방향과 대응한다.

13. 0deg 선형 그라데이션이 진행하는 방향은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
CSS 그라데이션 각도에서 0deg는 위쪽, 90deg는 오른쪽을 향한다.

14. 중심에서 바깥쪽으로 원이나 타원 형태로 색이 퍼지는 함수는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
radial-gradient()는 중심에서 거리 방향으로 색상이 퍼지는 원형·타원형 그라데이션을 만든다.

15. 파이 차트와 색상환을 만들기에 가장 적합한 그라데이션은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
conic-gradient()는 중심 둘레를 각도 방향으로 색이 변하므로 파이 차트와 색상환 표현에 적합하다.

16. 반복 그라데이션에서 반복 주기를 주로 결정하는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
repeating 계열은 처음부터 마지막 색상 정지점까지의 구간을 한 주기로 반복한다.

17. 요소를 X축과 Y축 방향으로 이동시키는 변형 함수는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
translate(x,y)는 요소를 X축과 Y축 방향으로 이동시킨다.

18. 여러 transform 함수를 한 선언에 적용할 때 주의할 점은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
앞선 변형이 좌표계에 영향을 주므로 translate, rotate, scale 등의 나열 순서가 달라지면 결과도 달라질 수 있다.

19. transform-origin의 기본값은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
transform-origin은 기본적으로 요소의 중심인 50% 50%이다.

20. 3D 회전 시 요소의 뒷면을 숨기는 선언은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
backface-visibility: hidden은 요소의 뒷면이 관찰자를 향할 때 그 면을 표시하지 않는다.

댓글

댓글 쓰기