방송대 HTML5웹프로그래밍 8강: CSS 배경과 변형의 기준점
배경 이미지를 가운데 놓았는데 어긋나고, cover를 썼더니 사진이 잘리며, 같은 회전인데도 카드가 전혀 다른 궤적으로 움직이는 이유는 무엇일까요? 이 글은 CSS 배경·그라디언트·변형을 속성 목록이 아니라 “무엇을 기준으로 계산하는가”라는 질문으로 비교합니다. 기준 박스, 색의 진행 경로, 요소의 원점, 관찰자의 위치를 구분하면 복잡한 시각 효과도 계산 가능한 규칙으로 바뀝니다.
같은 center인데 왜 서로 다른 곳을 가리키는가
직접 구성한 온라인 전시 행사 카드를 생각해 봅시다. 카드에는 전시장 사진, 글자를 읽게 하는 어두운 막, 오른쪽 아래의 무늬, 원뿔형 그라디언트로 만든 관람 비율, 뒤집어서 상세 정보를 보여 주는 입장권이 있습니다. 여기에는 여러 종류의 중심과 경계가 동시에 등장합니다.
| CSS 표현 | 결정하는 것 | 먼저 물을 질문 |
|---|---|---|
background-origin | 배경 이미지 위치 계산을 시작할 박스 | 테두리·안쪽 여백·내용 중 어디가 좌표판인가? |
background-clip | 배경을 실제로 칠할 바깥 경계 | 색과 이미지를 어디까지 보이게 할 것인가? |
| 그라디언트의 방향·중심 | 색이 이동하는 경로와 출발 위치 | 직선·중심 바깥쪽·중심 주위 중 어떤 흐름인가? |
transform-origin | 회전·확대·기울이기의 축 | 요소의 어느 점을 붙잡고 변형할 것인가? |
perspective-origin | 3차원 장면을 바라보는 방향 | 관찰자는 장면의 어느 쪽에 있는가? |
이 다섯 표현은 모두 위치와 관련되지만 같은 일을 하지 않습니다. background-origin과 background-clip은 요소의 박스 경계를 나누고, 그라디언트는 색의 진행 경로를 만들며, transform-origin은 요소에 붙어 있는 회전축을, perspective-origin은 요소 밖에서 장면을 보는 관점을 정합니다.
공통 판단법: 화면 결과만 보고 값을 바꾸기 전에 ① 무엇이 움직이거나 칠해지는지, ② 좌표가 어느 박스에서 시작하는지, ③ 어느 방향으로 진행하는지를 먼저 적습니다.
배경은 쉼표로 나눈 위아래 레이어다
background-color는 요소의 배경색을, background-image는 배경 이미지를 정합니다. 여러 이미지는 쉼표로 나열할 수 있으며, 목록에서 먼저 쓴 이미지가 사용자에게 더 가까운 위쪽 레이어입니다. 마지막의 배경색은 이미지들 아래에 깔립니다.
.exhibition-card {
background-color: #24324a;
background-image:
linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.76)),
url("pattern-dot.svg"),
url("gallery-hall.jpg");
background-repeat: no-repeat, repeat, no-repeat;
}위 선언은 어두운 막, 반복 무늬, 전시장 사진, 배경색 순으로 쌓입니다. 사진을 첫 번째에 놓으면 그 아래의 막과 무늬를 가릴 수 있습니다. 레이어마다 repeat, position, size 값을 쉼표로 같은 순서에 맞춰 읽어야 합니다.
background-repeat의 repeat-x와 repeat-y는 한 축만 반복하고, no-repeat은 한 번만 그립니다. space는 이미지가 잘리지 않도록 들어갈 개수를 정한 뒤 남은 공간을 사이에 배분하고, round는 반복 횟수에 맞도록 이미지 크기를 조절합니다. 따라서 무늬 원본 크기를 반드시 지켜야 한다면 space, 틈 없이 영역을 채우는 것이 우선이면 round를 검토할 수 있습니다.
의미의 경계: CSS 배경은 장식과 분위기 표현에 알맞습니다. 이미지 자체가 문서의 핵심 정보라면 배경으로만 넣지 말고 의미 있는 img와 대체 텍스트를 사용해야 합니다.
position과 size는 위치보다 기준점을 먼저 읽는다
background-position은 배경 위치 영역 안에서 이미지가 놓일 지점을 정합니다. 키워드, 백분율, 길이를 쓸 수 있고 두 값은 가로와 세로 순서입니다. 한 값만 쓰면 나머지 축은 일반적으로 가운데가 됩니다. right 12px bottom 18px처럼 가장자리와 간격을 함께 지정하면 오른쪽 아래에서 안쪽으로 이동시킬 수 있습니다.
픽셀과 백분율은 계산 방식이 다릅니다. 20px 30px은 위치 영역의 왼쪽 위에서 이미지의 왼쪽 위를 20px, 30px 옮깁니다. 반면 50% 50%는 영역의 50% 지점과 이미지의 50% 지점을 맞춥니다. 그래서 이미지 크기가 달라져도 가운데 정렬이 유지됩니다.
가로 360px인 위치 영역에 가로 120px 이미지를 background-position-x: 75%로 놓으면 남는 거리 240px의 75%인 180px가 왼쪽 오프셋이 됩니다. 이를 “컨테이너 너비의 75% 지점에 이미지 왼쪽을 둔다”라고 해석하면 실제 결과와 달라집니다.
cover와 contain은 서로 다른 손실을 선택한다
background-size | 보장하는 것 | 감수하는 것 | 적합한 상황 |
|---|---|---|---|
auto | 원본 비율과 기본 크기 계산 | 영역을 덜 채우거나 넘을 수 있음 | 작은 무늬·아이콘 |
cover | 배경 영역 전체를 덮음 | 원본의 일부가 잘릴 수 있음 | 사진형 카드 배경 |
contain | 이미지 전체가 영역 안에 들어옴 | 빈 공간이 남을 수 있음 | 로고·전체 형태가 중요한 그림 |
100% 100% | 가로·세로를 영역과 일치시킴 | 원본 비율이 달라지면 왜곡됨 | 비율 변화가 허용되는 추상 무늬 |
행사 사진은 빈틈 없이 보여야 하므로 cover를 쓰되, 중요한 인물이 잘리지 않도록 background-position을 조절합니다. 반대로 후원사 로고처럼 전체 형태가 보존되어야 하는 이미지는 contain이 더 알맞습니다. 두 값의 차이는 좋은 값과 나쁜 값이 아니라 ‘잘림’과 ‘빈 공간’ 중 어느 손실을 허용할지의 차이입니다.
attachment는 어느 스크롤과 함께 움직이는지 정한다
background-attachment: scroll은 요소의 내용이 내부에서 스크롤되어도 배경은 요소 테두리 기준에 붙어 있고, local은 요소의 내용과 함께 움직입니다. fixed는 일반적으로 뷰포트에 대해 고정된 효과를 만듭니다. 실제 동작은 스크롤 컨테이너와 실행 환경의 영향을 받을 수 있으므로, 효과를 핵심 정보 전달 수단으로 삼지 말고 대상 환경에서 확인합니다.
origin은 위치 계산, clip은 칠하기의 끝을 맡는다
요소의 박스는 바깥에서 안쪽으로 테두리 박스, 안쪽 여백 박스, 내용 박스로 구성됩니다. background-origin은 배경 이미지가 position과 size를 계산할 영역을 고릅니다. 기본값은 padding-box이며 border-box, content-box로 바꿀 수 있습니다.
background-clip은 색과 이미지가 실제로 그려질 범위를 정합니다. border-box는 테두리 아래까지, padding-box는 테두리 안쪽까지, content-box는 내용 영역까지만 배경을 보입니다. text는 글자 모양으로 배경을 잘라 보이게 하는 표현에 쓰이며 글자색을 투명하게 하는 설정과 구현 환경 확인이 함께 필요합니다.
.ticket-code {
border: 8px solid rgba(255, 255, 255, 0.3);
padding: 24px;
background-image: url("corner-mark.svg");
background-repeat: no-repeat;
background-position: right 8px bottom 8px;
background-origin: content-box;
background-clip: padding-box;
}이 예에서 모서리 표식의 위치는 내용 박스를 좌표판으로 삼지만, 배경이 보이는 범위는 안쪽 여백 박스까지입니다. 즉 origin을 바꿨다고 배경색의 칠하기 경계가 자동으로 같아지는 것이 아니며, clip을 바꿨다고 이미지 위치의 좌표판이 바뀌는 것도 아닙니다.
구분 문장: background-origin은 “어디에서 재는가”, background-clip은 “어디까지 칠하는가”에 답합니다.
background 단축 속성은 레이어별 문장으로 해석한다
background 단축 속성은 색, 이미지, 반복, 고정 방식, 위치, 크기, 원점, 클리핑을 묶습니다. 위치와 크기를 함께 쓸 때는 반드시 position / size 순서로 슬래시를 둡니다. 박스 값이 하나면 origin과 clip에 함께 적용되고, 두 개면 앞이 origin, 뒤가 clip입니다. 배경색은 마지막 레이어에만 둘 수 있습니다.
.exhibition-card {
background:
linear-gradient(to bottom, transparent 25%, rgba(8, 16, 32, 0.82))
center / cover no-repeat,
url("gallery-hall.jpg")
center / cover no-repeat padding-box border-box #24324a;
}첫 레이어는 투명에서 어두운 색으로 바뀌는 막이고, 두 번째 레이어는 사진과 맨 아래의 배경색입니다. 여기서 padding-box border-box는 사진 위치는 안쪽 여백 박스에서 계산하고, 그림은 테두리 박스까지 보이게 한다는 뜻입니다.
단축 속성은 짧지만 생략된 하위 속성을 이전 값으로 보존하지 않고 초기값으로 되돌립니다. 앞에서 background-attachment: fixed를 쓴 뒤 뒤쪽 규칙에서 background: url(...) no-repeat만 선언하면 attachment도 초기값으로 바뀝니다. 따라서 디버깅할 때는 단축 선언을 이미지·위치/크기·반복·박스·색의 문장으로 펼쳐 확인해야 합니다.
그라디언트는 색이 아니라 경로를 가진 이미지다
CSS 그라디언트는 background-color의 값이 아니라 생성된 이미지이므로 background-image나 background에서 사용합니다. 기본 구성 요소는 진행 경로와 두 개 이상의 색상 정지점입니다. 정지점은 해당 위치의 색을 지정하고, 서로 다른 위치 사이에는 색 변화가 계산됩니다.
.caption-shade {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 20%,
rgba(0, 0, 0, 0.85) 78%
);
}linear-gradient()의 기본 방향은 아래쪽입니다. to right 같은 키워드나 각도를 쓸 수 있으며, 0deg는 위쪽, 90deg는 오른쪽, 180deg는 아래쪽으로 진행합니다. 예를 들어 red 30%, blue 70%이면 시작부터 30%까지는 빨강, 30~70%는 빨강에서 파랑으로 변하고, 70% 이후는 파랑입니다.
서로 다른 색을 같은 위치에 두면 전이 구간이 사라져 단단한 경계가 됩니다. linear-gradient(to right, #263b80 0 64%, #f4b942 64% 100%)는 부드러운 혼합이 아니라 64% 지점에서 색이 즉시 바뀌는 띠를 만듭니다.
오개념 교정: 정지점의 백분율은 색이 그 지점부터 갑자기 시작한다는 뜻만은 아닙니다. 앞뒤 정지점 사이가 전이 구간이며, 같은 위치에 정지점을 겹쳤을 때만 경계가 단단해집니다.
선형·방사형·원뿔형은 색이 이동하는 길이 다르다
| 함수 | 색의 진행 | 핵심 기준 | 대표 용도 |
|---|---|---|---|
linear-gradient() | 한 방향의 직선 | 방향 또는 각도 | 오버레이, 진행 막대, 띠 |
radial-gradient() | 중심에서 바깥쪽 | 모양·크기·중심 | 조명, 비네트, 동심원 |
conic-gradient() | 중심 주위를 회전 | 시작 각도·중심 | 원형 비율, 색상환 |
radial-gradient()의 기본 모양은 영역에 맞는 타원이며 circle로 원을 만들 수 있습니다. 중심은 at 뒤에 지정합니다. 크기 키워드 closest-side, farthest-side, closest-corner, farthest-corner는 끝 모양이 어느 변이나 모서리에 닿을 때까지 커질지를 정합니다. 기본은 가장 먼 모서리까지 닿는 farthest-corner입니다.
.spotlight {
background-image: radial-gradient(
circle closest-side at 68% 34%,
rgba(255, 247, 204, 0.92),
rgba(16, 24, 48, 0.08) 72%,
rgba(16, 24, 48, 0.72)
);
}conic-gradient()는 12시 방향의 0deg에서 시계 방향으로 진행합니다. 관람객 선호가 전시 A 45%, B 35%, C 20%라면 각도는 각각 360 × 0.45 = 162deg, 360 × 0.35 = 126deg, 360 × 0.20 = 72deg입니다. 누적 경계는 0%, 45%, 80%, 100%가 됩니다.
.visit-share {
background: conic-gradient(
#5067d9 0 45%,
#ffb347 45% 80%,
#47b881 80% 100%
);
border-radius: 50%;
}같은 색상 정지점을 repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()에 쓰면 마지막 정지점 뒤에서 패턴이 다시 시작됩니다. 예를 들어 첫 구간이 0~12px, 둘째가 12~24px이면 반복 주기는 24px입니다. 주기를 의도하지 않고 마지막 정지점을 바꾸면 무늬의 밀도도 함께 달라집니다.
transform은 자리보다 요소의 로컬 좌표계를 바꾼다
transform은 요소를 이동(translate), 회전(rotate), 확대·축소(scale), 기울임(skew)합니다. 일반 흐름에서 요소가 차지하던 자리를 다시 계산해 형제 요소를 밀어내는 방식이 아니라, 그려지는 좌표계를 바꾸는 시각적 변형입니다. 따라서 이동한 요소가 다른 내용과 겹치지 않는지도 별도로 확인해야 합니다.
.ticket-badge {
transform: translate(16px, -10px) rotate(8deg) scale(1.05);
}
.centered-ticket {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}translate()의 백분율은 부모가 아니라 변형되는 요소 자신의 크기를 기준으로 합니다. 그래서 두 번째 예의 left: 50%; top: 50%는 요소의 시작점을 컨테이너 가운데로 옮기고, translate(-50%, -50%)는 요소 자신의 절반만큼 되돌려 실제 중심을 맞춥니다.
rotate()는 deg나 turn을 사용하며 1turn은 한 바퀴입니다. scale(1)은 원래 크기, 1보다 크면 확대, 0과 1 사이는 축소이며 음수 값은 축을 뒤집는 반사를 만듭니다. skewX()와 skewY()는 각 축을 기울입니다. 최근 방식의 개별 속성 translate, rotate, scale을 쓰면 한 변형을 바꿀 때 전체 함수 목록을 다시 조합하지 않아도 됩니다.
함수 순서를 바꾸면 이동 축도 달라진다
여러 변형 함수는 하나의 합성 변환이 되므로 순서가 결과를 바꿉니다. 오른쪽에 적힌 함수부터 좌표에 적용된다고 추적하면 차이를 설명할 수 있습니다. 원점의 위치만 따라가 보겠습니다.
| 선언 | 좌표 추적 | 원점의 최종 위치 |
|---|---|---|
translateX(100px) rotate(90deg) | 원점을 회전해도 (0, 0), 이후 오른쪽 100px 이동 | (100px, 0) |
rotate(90deg) translateX(100px) | 오른쪽으로 이동한 (100px, 0)을 시계 방향 회전 | (0, 100px) |
화면 좌표에서 아래쪽 y가 양수이므로 시계 방향 90도 회전 결과가 (0, 100px)입니다. 애니메이션이나 상태별 스타일에서는 변형 함수의 순서를 일관되게 유지해야 중간 상태도 예측할 수 있습니다.
transform-origin은 회전축, matrix는 합성 결과를 나타낸다
transform-origin의 기본값은 요소의 가운데인 50% 50%입니다. 입장권이 왼쪽 경첩을 중심으로 열리게 하려면 left center, 오른쪽 아래를 축으로 회전시키려면 right bottom처럼 바꿉니다. 축이 바뀌면 회전·확대·기울임의 궤적이 달라지지만, 순수한 이동은 축을 중심으로 도는 연산이 아니므로 같은 방식으로 영향을 받지 않습니다.
.ticket-door {
transform-origin: left center;
transform: rotateY(-32deg);
}2차원 합성 변환은 matrix(a, b, c, d, tx, ty)로 나타낼 수 있습니다. 점 (x, y)는 다음처럼 계산됩니다.
/* x' = a·x + c·y + tx
y' = b·x + d·y + ty */
.identity { transform: matrix(1, 0, 0, 1, 0, 0); }
.move { transform: matrix(1, 0, 0, 1, 50, 30); }
.double { transform: matrix(2, 0, 0, 2, 0, 0); }matrix(1, 0, 0, 1, 50, 30)에 점 (10, 20)을 넣으면 x′ = 1×10 + 0×20 + 50 = 60, y′ = 0×10 + 1×20 + 30 = 50입니다. 직접 행렬을 쓰는 일은 많지 않지만 개발자 도구에서 계산된 변형을 읽거나 여러 변형이 하나로 합쳐진 이유를 이해하는 데 유용합니다.
perspective-origin은 관찰자, backface는 카드의 뒷면을 정한다
3차원 회전에는 요소의 축만으로 부족합니다. 부모의 perspective는 관찰자와 화면 사이의 거리를 나타내며 값이 작을수록 가까이서 보는 것처럼 왜곡이 강하고, 값이 클수록 원근 효과가 약합니다. 여러 자식이 같은 부모의 perspective를 공유하면 하나의 장면 안에 있는 것처럼 공통 소실점을 가집니다.
perspective-origin은 관찰 방향을 정합니다. 기본값 50% 50%는 정면 가운데에서 보는 장면이고, left top으로 옮기면 왼쪽 위에서 내려다보는 듯한 소실점이 만들어집니다. 이것은 카드 자체에 붙은 회전축인 transform-origin과 다릅니다.
.ticket-scene {
perspective: 800px;
perspective-origin: 50% 40%;
}
.ticket {
position: relative;
transform-style: preserve-3d;
}
.ticket-front,
.ticket-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
}
.ticket-back { transform: rotateY(180deg); }
.ticket.is-open { transform: rotateY(180deg); }backface-visibility: hidden은 평면이 뒤집혀 뒷면이 관찰자를 향할 때 그 면을 숨깁니다. 앞면은 0도, 뒷면은 미리 180도 돌려 같은 자리에 포갠 뒤 전체 카드를 180도 회전하면 앞면은 사라지고 뒷면의 정면이 나타납니다.
cursor는 이런 카드가 어떤 상호작용을 기대하게 하는지 알려 줍니다. pointer는 클릭 가능한 대상, text는 텍스트 선택, wait는 처리 대기, not-allowed는 허용되지 않는 동작을 암시합니다. 그러나 커서 모양은 클릭 기능이나 키보드 조작을 만들지 않습니다. 실제 상호작용 요소와 상태, 포커스 표현을 함께 설계해야 합니다.
기준점을 찾는 다섯 질문
배경이나 변형이 예상과 다를 때 속성값을 무작정 바꾸지 말고 다음 순서로 원인을 좁힙니다.
- 레이어를 분리한다. 쉼표로 나뉜 배경 중 어떤 이미지가 위에 있고, 각 레이어의 반복·위치·크기 값이 어느 순서에 대응하는지 적습니다.
- 보존할 것을 고른다.
cover의 잘림과contain의 빈 공간 중 무엇을 허용할지, 중요한 정보 이미지를 CSS 배경으로 처리해도 되는지 판단합니다. - 박스 기준을 정한다. 위치 계산이면
background-origin, 칠하기 경계면background-clip을 확인합니다. - 진행 경로와 순서를 계산한다. 그라디언트는 직선·중심 바깥·중심 주위 중 하나를 고르고, 변형은 함수 순서에 따라 한 단계씩 좌표를 추적합니다.
- 축과 관찰자를 나눈다. 요소에 붙은 축은
transform-origin, 장면을 보는 방향은perspective-origin, 뒤집힌 면의 표시는backface-visibility가 담당합니다.
마지막으로 단축 속성이 앞선 값을 초기화하지 않았는지, 변형된 요소가 형제 콘텐츠를 가리지 않는지, 커서가 실제 동작과 일치하는지 확인합니다. 이 절차는 배경과 변형을 ‘감각적인 꾸미기’에서 ‘기준과 좌표를 설명할 수 있는 설계’로 바꾸는 핵심입니다.
핵심 개념 정리
- 여러 배경은 먼저 선언한 이미지가 위에 오며, 레이어별 속성도 쉼표 순서에 대응합니다.
cover는 영역 채우기와 잘림,contain은 전체 보존과 빈 공간을 맞바꾸는 선택입니다.background-origin은 위치 계산의 기준 박스,background-clip은 배경이 보이는 경계입니다.- 선형·방사형·원뿔형 그라디언트는 각각 직선, 중심에서 바깥쪽, 중심 주위 회전 경로를 사용합니다.
- 변형은 함수 순서와
transform-origin에 따라 결과가 달라지며 일반 흐름의 자리를 다시 배치하지 않습니다. perspective-origin은 관찰 방향,backface-visibility는 뒤집힌 면의 표시 여부를 정합니다.
최종 사고 순서: 시각 효과가 어긋나면 먼저 레이어, 다음으로 기준 박스와 보존할 정보, 그다음 색 또는 좌표의 진행 방향, 마지막으로 요소의 축과 관찰자 위치를 확인합니다. 같은 center라도 어떤 좌표계의 중심인지 말할 수 있어야 결과를 예측할 수 있습니다.
예상문제 10선
1. 다음 다중 배경 선언에서 사용자에게 가장 가까운 위쪽 레이어는?
background-image: linear-gradient(transparent, #000),
url("dots.svg"),
url("hall.jpg");정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
- ① 정답: 다중 배경은 목록의 첫 이미지가 가장 위에 놓이므로 그라디언트가 두 이미지 위를 덮습니다.
- ② 오답: 무늬는 그라디언트 아래이면서 사진 위인 가운데 레이어입니다.
- ③ 오답: 사진은 세 이미지 중 마지막이므로 가장 아래쪽에 놓입니다.
- ④ 오답: 쉼표 목록은 같은 평면이 아니라 선언 순서에 따른 쌓임 순서를 만듭니다.
2. 비율이 다른 사진으로 카드 영역을 빈틈없이 채우고 일부 잘림은 허용할 때 가장 적절한 값은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
- ① 오답: 원본의 기본 크기 계산을 사용하므로 영역 전체를 덮는다는 보장이 없습니다.
- ② 오답: 이미지 전체를 보존하지만 비율 차이 때문에 빈 공간이 생길 수 있습니다.
- ③ 정답: 비율을 유지하며 영역을 완전히 덮도록 확대하므로 일부 잘림과 맞바꿉니다.
- ④ 오답: 반복 이미지 사이의 공간을 배분하는 값이지 한 사진의 맞춤 크기를 정하지 않습니다.
3. 배경 이미지의 위치 계산은 내용 박스에서 시작하고, 배경을 안쪽 여백 박스까지만 보이게 하는 조합은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
- ① 오답: 위치 기준과 칠하기 경계를 문제의 요구와 서로 반대로 지정했습니다.
- ② 정답: origin이 좌표판을 내용 박스로, clip이 보이는 끝을 안쪽 여백 박스로 정합니다.
- ③ 오답: 위치는 테두리 박스에서 재고 배경을 글자 모양으로 잘라 전혀 다른 결과를 냅니다.
- ④ 오답: 이미지 정렬과 맞춤 방식만 정하며 기준 박스와 칠하기 경계를 선택하지 않습니다.
4. 앞선 규칙의 background-attachment: fixed가 뒤의 background: url("hall.jpg") no-repeat 선언 후 사라진 이유는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
- ① 오답: attachment는 URL 이미지가 있는 배경에도 적용할 수 있습니다.
- ② 오답: repeat는 타일 반복을, attachment는 스크롤에 따른 배경의 움직임을 정합니다.
- ③ 오답: 이미지 종류가 기존 값을 없앤 것이 아니라 뒤쪽 단축 선언의 초기화가 원인입니다.
- ④ 정답:
background단축 선언은 적지 않은 하위 속성도 초기값으로 재설정합니다.
5. linear-gradient(to right, red 30%, blue 70%)의 색상 변화 설명으로 옳은 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
- ① 오답: 첫 정지점보다 앞인 0~30%는 첫 색인 빨강으로 유지됩니다.
- ② 정답: 서로 다른 두 색상 정지점 사이가 부드러운 전이 구간입니다.
- ③ 오답: 즉시 바뀌게 하려면 서로 다른 색 정지점을 같은 위치에 두어야 합니다.
- ④ 오답:
to right는 왼쪽에서 오른쪽으로 진행하는 방향입니다.
6. 원뿔형 그래프에서 전체의 35%를 차지하는 구간의 중심각은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
- ① 정답: 한 바퀴 360deg에 0.35를 곱하면 126deg입니다.
- ② 오답: 백분율 수치를 각도로 그대로 옮겨 전체 360deg 기준을 빠뜨렸습니다.
- ③ 오답: 108deg는 전체의 30%에 해당하는 각도입니다.
- ④ 오답: 234deg는 126deg 구간을 제외한 나머지 65%의 각도입니다.
7. repeating-linear-gradient()에서 첫 색이 0~12px, 둘째 색이 12~24px로 지정되었다. 한 반복 주기는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
- ① 오답: 어느 색상 구간의 길이도 아니며 주기 계산 근거가 없습니다.
- ② 오답: 한 색의 폭만 계산했고 두 구간이 끝나는 마지막 정지점을 빠뜨렸습니다.
- ③ 오답: 두 구간 길이 12px와 마지막 위치 24px를 다시 더한 값입니다.
- ④ 정답: 패턴은 첫 위치 0px부터 마지막 정지점 24px까지 진행한 뒤 다시 시작합니다.
8. 원점에 있는 요소에 다음 두 선언을 적용할 때 원점의 최종 위치를 바르게 연결한 것은?
A: translateX(100px) rotate(90deg)
B: rotate(90deg) translateX(100px)
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
- ① 오답: B는 이동한 좌표가 뒤의 90도 회전 합성에 영향을 받아 아래쪽으로 향합니다.
- ② 오답: 두 선언의 결과를 서로 뒤바꾸었습니다.
- ③ 정답: 오른쪽 함수부터 추적하면 A는 회전 뒤 이동, B는 이동 뒤 회전의 결과가 됩니다.
- ④ 오답: A에서 원점 회전은 위치를 바꾸지 않고 이후 X 이동이 (100px, 0)을 만듭니다.
9. 점 (10, 20)에 matrix(1, 0, 0, 1, 50, 30)을 적용한 결과는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
- ① 정답: 단위 행렬 부분은 좌표를 유지하고 tx 50, ty 30을 더해 (60, 50)이 됩니다.
- ② 오답: 이동량만 적고 원래 점의 x와 y를 더하지 않았습니다.
- ③ 오답: 좌표와 이동량을 서로 다른 축에 잘못 연결했습니다.
- ④ 오답: tx와 ty는 좌표에 곱하는 배율이 아니라 더하는 이동값입니다.
10. 앞뒤 면이 있는 입장권을 부모 장면의 공통 소실점으로 뒤집고, 회전 중 반대편 면의 거울상이 비치지 않게 하려면 가장 적절한 설계는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
- ① 오답: 커서는 상호작용 기대만 전달하며 3차원 장면이나 뒷면 표시를 만들지 않습니다.
- ② 오답: 배경의 스크롤 관계는 카드 회전의 소실점과 뒷면 표시를 제어하지 않습니다.
- ③ 오답: 회전축은 정하지만 공통 원근감과 뒤집힌 면 숨김이라는 두 요구를 충족하지 못합니다.
- ④ 정답: 부모 perspective가 공통 관점을 만들고 backface-visibility가 각 면의 뒤쪽을 숨깁니다.
참고 자료와 작성 기준
이 글은 해당 차시 강의자료 63쪽 전체를 확인한 뒤 표지·목차·단원 구분·정리·다음 강의 예고를 본문과 구분하고, 배경과 변형 속성을 기준 좌표의 비교 문제로 재구성한 비공식 학습자료입니다. 강의자료의 범위 안에서 온라인 전시 행사 카드, 다중 레이어 분해, 그라디언트 비율 계산, 변형 순서의 좌표 추적, 뒤집히는 입장권 사례와 선택지별 해설을 새로 구성했습니다.
- 작성·편집: 올에이클래스 학습연구팀
- 주요 근거: 한국방송통신대학교 HTML5웹프로그래밍 8강 「CSS: 배경, 그라데이션, 변형」 강의자료
- 보충 자료: 외부 자료를 사용하지 않았으며, 강의자료의 설명 범위 안에서 예제와 판단 절차를 재구성했습니다.
- 편집 원칙: 올에이클래스 편집 정책
- 최종 내용 검토: 2026-09-05
댓글
댓글 쓰기