방송대 방통대 HTML5웹프로그래밍 9강 - CSS: 전환, 애니메이션, 다단 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 9강 - CSS: 전환, 애니메이션, 다단

CSS 전환으로 상태 변화를 자연스럽게 표현하고, 키프레임 애니메이션으로 여러 단계와 반복 움직임을 설계하는 방법을 익힌다. 이어 성능에 유리한 속성과 will-change의 주의점을 살펴보고, 긴 텍스트를 반응형 다단으로 배치하고 흐름을 제어하는 속성을 학습한다.

제1장 CSS 전환의 원리

1. 전환이란 무엇인가

전환(transition)은 CSS 속성이 상태 A에서 상태 B로 바뀔 때 변화가 즉시 일어나지 않고 일정 시간에 걸쳐 부드럽게 진행되도록 중간값을 브라우저가 자동 생성하는 기능이다. 계속 움직이는 효과가 아니라 상태가 바뀌는 순간에만 발생한다.

전환의 목적은 단순한 장식보다 사용자의 행동에 대한 피드백을 짧고 명확하게 제공하는 데 있다. 버튼의 hover, 입력 요소의 focus, 클래스 변경처럼 시작 상태와 최종 상태가 분명한 상호작용에 적합하다.

전환 단축 속성
transition: property duration [timing-function] [delay];
시간값이 두 개이면 첫 번째가 재생 시간이고 두 번째가 지연 시간이다.

2. transition-property와 duration

transition-property는 어떤 CSS 속성의 변화를 전환할지 정한다. background-color, transform, opacity처럼 실제로 바뀔 속성을 구체적으로 나열하는 것이 권장된다. 여러 속성은 쉼표로 구분하고 none은 전환을 끈다.

all은 바뀌는 모든 속성을 대상으로 하지만 예상하지 못한 속성까지 전환되어 디버깅과 성능에 불리할 수 있다. 따라서 transition: all 0.3s;보다 transition: width 0.3s, opacity 0.3s;처럼 대상을 명시하는 편이 좋다.

transition-duration은 전환이 시작해 끝날 때까지 걸리는 시간이다. s 또는 ms 단위를 사용하며 기본값은 0s이다. duration이 0s이면 변화가 즉시 끝나므로 시각적인 전환 효과가 나타나지 않는다.

3. transition-timing-function

timing-function은 전환이 진행되는 동안의 가속과 감속 패턴, 즉 속도 곡선을 정한다.

값	속도 변화	적합한 상황
ease	천천히 시작하고 빨라졌다가 천천히 끝남	일반적인 UI의 기본 선택
linear	처음부터 끝까지 일정한 속도	로딩 스피너, 일정한 색상 변화
ease-in	천천히 시작해 점점 빨라짐	화면 밖으로 사라지는 요소
ease-out	빠르게 시작해 천천히 멈춤	화면 안으로 등장하는 UI
ease-in-out	천천히 시작하고 천천히 끝남	왕복·반복 움직임

cubic-bezier(a, b, c, d)는 네 숫자로 사용자 정의 속도 곡선을 만든다. steps(n)은 연속적인 중간값 대신 n단계로 끊어서 변화시키므로 초침이나 프레임식 로딩 표시처럼 일부러 뚝뚝 끊기는 효과에 알맞다.

4. transition-delay

delay는 상태 변화가 발생한 뒤 실제 전환을 시작하기까지 기다리는 시간이다. 기본값은 0s이며 메뉴를 일정 시간 뒤에 표시하거나 여러 속성을 순차적으로 움직일 때 사용한다. 과도한 지연은 인터페이스가 느리다고 느끼게 하므로 주의한다.

음수 delay도 가능하다. 예를 들어 -0.5s는 전환이 이미 0.5초 진행된 상태에서 시작한 것처럼 보이게 한다. 첫 구간을 건너뛰어 중간 시점부터 재생하는 효과이다.

제2장 전환의 적용과 성능

1. 전환할 수 있는 속성

전환은 브라우저가 시작값과 끝값 사이의 중간값을 계산할 수 있는 CSS 속성에 적용할 수 있다. width의 100px에서 200px, opacity의 0에서 1, color의 빨강에서 파랑, font-size의 수치 변화가 대표적이다.

반면 display의 none과 block, 서로 다른 font-family, text-decoration처럼 중간 상태를 수치로 보간하기 어려운 값은 일반적인 전환 대상이 아니다. 보이기와 숨기기는 display 대신 opacity와 필요에 따라 다른 상태 제어를 조합한다.

2. transform과 opacity 우선

width, height, top, left 등을 계속 바꾸면 브라우저가 문서 배치를 다시 계산하고 그려야 하므로 성능이 떨어질 수 있다. 위치 이동은 transform의 translate, 크기 변화는 scale, 표시 정도는 opacity를 우선 사용한다. transform은 주변 요소의 배치에 영향을 덜 주고 GPU 가속을 활용하기 유리하다.

우선순위	속성	특징
1순위	transform, opacity	이동·회전·크기·투명도 변화에 가장 권장
2순위	color, background-color, box-shadow	시각적 상태 피드백에 사용
주의	width, height, top, left	레이아웃 재계산으로 성능 저하 가능

3. transition의 위치

transition 선언은 hover 같은 변화 상태가 아니라 원본 요소의 기본 상태에 둔다. 그래야 마우스를 올릴 때뿐 아니라 떼어 원래 상태로 돌아올 때도 전환이 적용된다. 상태 선택자는 최종적으로 바꿀 속성값만 담당하게 분리한다.

.btn {
  transition: transform 200ms ease-out;
}
.btn:hover {
  transform: scale(1.1);
}

여러 속성에 서로 다른 시간을 주려면 쉼표로 각각 선언한다. 예를 들어 폭은 0.5초, 배경색은 2초로 전환할 수 있다. 단축 속성에서도 속성별 전환 묶음을 쉼표로 구분한다.

제3장 CSS 애니메이션과 키프레임

1. 전환과 애니메이션 비교

CSS 애니메이션은 시작과 끝만 연결하는 전환보다 복잡한 움직임을 만든다. A → B → C → A처럼 여러 중간 단계를 정의하고 페이지 로드와 함께 자동 시작하거나 반복할 수 있다.

기준	transition	animation
단계	시작과 끝 상태 중심	여러 중간 단계를 세밀하게 제어
트리거	hover, focus, 클래스 변경 등 상태 변화 필요	페이지 로드 시 자동 시작 가능
반복	일반적으로 한 번의 상태 전환	횟수 또는 무한 반복 가능
종료 상태	상태 해제 시 원본으로 전환	fill-mode로 종료 모습 유지 가능

2. @keyframes

@keyframes는 시간의 흐름에 따라 스타일이 어떻게 변할지 정의하는 애니메이션의 시나리오이다. 0%는 시작, 100%는 끝이며 그 사이에 50% 같은 중간 상태를 필요한 만큼 넣을 수 있다. from은 0%, to는 100%와 같다.

@keyframes move-box {
  0% { transform: translateX(0); opacity: 0; }
  50% { transform: translateX(100px); opacity: 1; }
  100% { transform: translateX(200px); opacity: 0; }
}

키프레임 이름은 animation-name과 정확히 일치해야 하며 대소문자를 구분한다. 유지보수를 위해 의미 있는 지점만 사용해 불필요하게 많은 키프레임을 만들지 않는 것이 좋다.

3. animation-name과 duration

animation-name은 실행할 키프레임 이름이고, animation-duration은 한 사이클을 재생하는 시간이다. 두 속성은 애니메이션 실행에 필수적이다. duration 기본값은 0s이므로 이름만 연결하고 재생 시간을 지정하지 않으면 보이는 애니메이션이 발생하지 않는다.

제4장 애니메이션 속성과 최적화

1. 주요 animation 속성

속성	역할	대표 값
animation-name	실행할 키프레임 이름	사용자 정의 이름
animation-duration	한 사이클의 재생 시간	2s, 500ms
animation-timing-function	속도 곡선	ease, linear, steps()
animation-delay	시작 전 대기 시간	1s, -0.5s
animation-iteration-count	반복 횟수	1, 3, 0.5, infinite
animation-direction	재생 방향	normal, reverse, alternate, alternate-reverse
animation-fill-mode	재생 전후 스타일 적용	none, forwards, backwards, both
animation-play-state	재생 또는 일시 정지	running, paused

2. 반복과 방향

iteration-count의 기본값은 1이고 infinite는 무한 반복이다. 0.5처럼 소수를 사용하면 애니메이션 일부만 재생할 수 있다. 무한 반복은 로딩이나 짧은 강조 효과에 제한적으로 사용하여 사용자를 방해하지 않게 한다.

direction의 normal은 매번 0%에서 100%, reverse는 100%에서 0%로 재생한다. alternate는 0% → 100% → 0%로 왕복하고, alternate-reverse는 100%에서 시작하여 반대로 왕복한다. infinite alternate는 끝에서 시작점으로 갑자기 튀지 않는 자연스러운 반복에 자주 사용한다.

3. fill-mode

fill-mode는 지연 시간과 종료 뒤에 어떤 키프레임 스타일을 적용할지 정한다. none은 재생 전후에 기본 스타일을 사용한다. forwards는 종료 뒤 마지막 키프레임 모습을 유지하고, backwards는 delay 동안 첫 키프레임 모습을 미리 적용한다. both는 forwards와 backwards를 모두 적용한다.

forwards: 마지막 모습 유지
backwards: 지연 시간 동안 시작 모습 적용
both: 시작 전과 종료 후 모두 키프레임 상태 적용

4. play-state와 단축 속성

play-state의 running은 재생, paused는 현재 위치에서 일시 정지한다. hover나 자바스크립트 제어와 연결할 수 있다. 단축 속성은 다음 순서로 작성할 수 있다.

animation: name duration [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
시간이 두 번 나오면 첫 번째가 duration, 두 번째가 delay이다.

예를 들어 animation: slide 3s ease-in-out 1s infinite alternate;는 slide 키프레임을 3초 동안 재생하고 1초 기다린 뒤 무한히 왕복한다.

5. 애니메이션 성능

애니메이션에서도 transform과 opacity를 우선하면 브라우저의 레이아웃 재계산 부담을 줄일 수 있다. width, height, margin, padding, top, left, box-shadow는 상황에 따라 배치와 그리기를 다시 수행하게 하므로 반복 움직임에서는 특히 주의한다.

will-change는 곧 바뀔 속성을 브라우저에 알려 별도 레이어와 GPU 준비를 유도한다. 그러나 모든 요소에 미리 지정하면 메모리를 과도하게 사용하여 오히려 느려질 수 있다. 먼저 애니메이션을 구현한 뒤 실제 버벅임이 있을 때만 변화 직전에 켜고 완료 후 제거하는 방식이 권장된다.

6. 키프레임 재사용

키프레임 안에서 CSS 사용자 정의 속성을 사용하면 하나의 시나리오를 여러 방향과 거리로 재사용할 수 있다. 예를 들어 최종 위치를 translate: var(--x, 0) var(--y, 0);로 두고 요소별로 --x와 --y를 다르게 지정한다. fadeIn처럼 의미 있는 이름의 키프레임을 함수처럼 여러 요소에서 공유하면 중복을 줄인다.

제5장 CSS 다단 레이아웃

1. 다단의 목적

CSS 다단은 신문이나 잡지처럼 긴 텍스트를 여러 열로 나누어 읽게 하는 기능이다. 기사와 긴 읽기 콘텐츠에 적합하며 페이지 전체의 주요 레이아웃을 만드는 도구라기보다 텍스트 읽기 흐름을 구성하는 도구이다.

2. column-count, column-width, columns

column-count는 화면 너비와 관계없이 지정한 개수의 단을 만든다. 화면이 좁아져도 단 수가 유지되어 각 단이 지나치게 좁아질 수 있다. column-width는 단의 최소 너비를 기준으로 브라우저가 가능한 단 수를 자동 계산한다. 넓은 화면에서는 단이 늘고 좁은 화면에서는 줄어 반응형에 더 자연스럽다.

columns는 너비와 개수를 함께 지정하는 단축 속성이다. columns: 200px 3;은 단의 최소 너비를 200px 정도로 유지하면서 최대 3단까지만 허용한다. 너비와 개수의 순서는 바꾸어 쓸 수 있다.

속성	기준	특징
column-count	단 개수	개수를 고정하며 좁은 화면에서 가독성이 떨어질 수 있음
column-width	최소 단 너비	화면에 따라 단 수가 자동 변경되어 반응형에 적합
columns	너비와 최대 개수	두 기준을 한 번에 지정하는 단축 속성

3. 단 사이 간격과 구분선

column-gap은 단 사이의 여백이며 기본값 normal은 보통 1em 정도이다. 읽기 편한 간격을 확보하도록 화면과 글자 크기에 맞춰 조정한다. column-rule은 단 사이에 구분선을 그리며 border와 같은 width, style, color 문법을 사용한다.

column-rule은 별도 공간을 차지하지 않고 gap 영역 위에 그려진다. 따라서 선 두께보다 충분히 넓은 gap을 확보하고, 가독성을 방해하지 않도록 얇고 중립적인 색을 사용한다.

4. column-span과 column-fill

column-span: all은 제목이나 큰 이미지가 모든 단을 가로질러 배치되게 한다. 기본값 none은 요소를 현재 단 흐름 안에 둔다.

column-fill: balance는 각 단의 높이를 최대한 비슷하게 맞추며 기본값이다. auto는 첫 단을 지정된 높이까지 채운 뒤 다음 단으로 내용을 넘긴다. auto가 기대한 방식으로 동작하려면 부모 컨테이너의 height가 정해져 있어야 한다.

다단 컨테이너의 높이를 고정하면 내용이 많을 때 오른쪽으로 단이 계속 생겨 가로 스크롤이 발생할 수 있다. 특별한 이유가 없다면 높이는 auto로 두는 편이 안전하다.

5. break-inside: avoid

break-inside: avoid는 이미지, 카드, 인용문, 표 같은 요소가 단 끝에서 둘로 잘리지 않도록 통째로 다음 단으로 넘긴다. 브라우저가 요소를 하나의 덩어리로 인식하도록 display: inline-block과 width: 100%를 조합할 수 있다.

다단의 핵심은 지정: column-count·column-width·columns, 꾸미기: column-gap·column-rule, 흐름: column-span·column-fill·break-inside로 나누어 기억한다.

핵심 개념 정리

• transition은 상태가 바뀔 때 시작값과 끝값 사이를 보간하며 property, duration, timing-function, delay로 구성된다.
• duration 기본값은 0s이고 단축 속성에서 시간값 두 개는 duration, delay 순서이다.
• ease-out은 등장, ease-in은 퇴장, linear는 일정 속도 회전에 적합하며 steps()는 끊긴 단계 표현에 사용한다.
• transition은 원본 요소에 선언하고 hover나 focus에는 바뀔 속성값만 둔다.
• 전환과 애니메이션 성능에는 transform과 opacity가 유리하고 배치 재계산이 필요한 속성은 주의한다.
• @keyframes는 0%부터 100%까지 여러 중간 상태를 정의하고 animation-name으로 요소와 연결한다.
• animation은 반복 횟수, 방향, 종료 상태 유지, 재생·정지를 제어할 수 있으며 transition보다 복잡한 시나리오에 적합하다.
• forwards는 마지막 모습, backwards는 지연 중 시작 모습, both는 두 효과를 함께 적용한다.
• will-change는 실제 성능 문제가 있을 때 제한적으로 사용하고 필요가 끝나면 제거한다.
• column-width는 최소 단 너비에 따라 단 수를 자동 조절하므로 반응형 읽기 흐름에 적합하다.
• column-gap과 column-rule은 단 사이를 꾸미고, column-span·column-fill·break-inside는 콘텐츠 흐름을 제어한다.

상태 A와 B 사이의 짧은 피드백에는 transition, 여러 단계·자동 시작·반복이 필요한 움직임에는 animation을 사용한다. 두 기능 모두 transform과 opacity를 중심으로 설계하고 과도한 반복과 지연을 피해야 한다. 다단은 페이지 전체 배치가 아니라 긴 글의 읽기 흐름을 위한 도구이므로 최소 단 너비, 충분한 간격, 요소 잘림 방지를 함께 고려한다.

예상문제 20선

1. CSS transition의 특징으로 옳은 것은?

① 상태가 변할 때 시작값과 끝값 사이의 중간 과정을 자동 생성한다. ② 페이지가 열리면 반드시 무한 반복한다. ③ 모든 CSS 속성을 항상 전환할 수 있다. ④ 여러 단의 텍스트 레이아웃을 만든다.

정답입니다.

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

정답 및 해설 보기

정답: ①
transition은 hover나 focus 같은 상태 변화가 일어날 때 두 상태 사이를 일정 시간 동안 부드럽게 보간한다.

2. transition: opacity 0.4s ease-out 0.2s;에서 0.2s의 의미는?

① 반복 횟수 ② 재생 시간 ③ 시작 전 지연 시간 ④ 단 사이 간격

정답입니다.

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

정답 및 해설 보기

정답: ③
전환 단축 속성에 시간값이 두 개이면 첫 번째 0.4s가 duration, 두 번째 0.2s가 delay이다.

3. 처음부터 끝까지 일정한 속도로 진행하는 timing-function은?

① ease-in ② linear ③ ease-out ④ ease-in-out

정답입니다.

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

정답 및 해설 보기

정답: ②
linear는 가속과 감속 없이 일정한 속도를 유지하므로 로딩 스피너 같은 회전에 알맞다.

4. 여러 단계로 끊겨 보이는 전환을 만드는 함수는?

① scale() ② translate() ③ columns() ④ steps()

정답입니다.

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

정답 및 해설 보기

정답: ④
steps(n)은 연속적으로 보간하지 않고 지정한 단계 수만큼 끊어서 변화시킨다.

5. 일반적인 전환 대상으로 적합하지 않은 속성 변화는?

① display: none에서 display: block ② opacity: 0에서 opacity: 1 ③ width: 100px에서 width: 200px ④ color의 빨강에서 파랑

정답입니다.

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

정답 및 해설 보기

정답: ①
display의 none과 block 사이에는 브라우저가 계산할 연속 중간값이 없어 일반적인 transition 보간이 되지 않는다.

6. 크기 확대 전환의 성능을 높이기 위해 width 대신 권장되는 방식은?

① display: block ② font-family 변경 ③ column-width 변경 ④ transform: scale()

정답입니다.

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

정답 및 해설 보기

정답: ④
scale()은 주변 레이아웃을 다시 계산하는 부담이 적고 GPU를 활용하기 유리해 크기 애니메이션에 권장된다.

7. transition 속성을 두어야 하는 위치는?

① 반드시 @keyframes의 100% 안 ② 요소의 기본 상태 규칙 ③ column-rule 안 ④ hover 상태에만 선언

정답입니다.

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

정답 및 해설 보기

정답: ②
기본 상태에 transition을 두면 hover 진입과 해제 양쪽 모두에 부드러운 전환이 적용된다.

8. transition과 비교한 CSS animation의 특징은?

① 중간 단계를 정의할 수 없다. ② 반드시 hover가 있어야 시작한다. ③ 여러 단계와 반복을 제어하고 자동 시작할 수 있다. ④ 텍스트 다단만 만들 수 있다.

정답입니다.

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

정답 및 해설 보기

정답: ③
animation은 키프레임으로 중간 상태를 정의하고 페이지 로드 시 시작하거나 지정 횟수만큼 반복할 수 있다.

9. @keyframes에서 100%와 같은 의미를 가진 키워드는?

① from ② start ③ forwards ④ to

정답입니다.

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

정답 및 해설 보기

정답: ④
from은 0%, to는 100%와 같은 뜻으로 애니메이션의 시작과 끝을 나타낸다.

10. 애니메이션을 눈에 보이게 실행하기 위해 필수적인 조합은?

① column-count와 column-gap ② animation-name과 0이 아닌 animation-duration ③ animation-delay만 지정 ④ will-change만 지정

정답입니다.

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

정답 및 해설 보기

정답: ②
실행할 키프레임 이름과 재생 시간이 필요하다. duration 기본값은 0s이므로 이름만 지정하면 움직임이 보이지 않는다.

11. 애니메이션을 무한히 반복하도록 하는 값은?

① animation-iteration-count: infinite ② animation-direction: forwards ③ animation-fill-mode: linear ④ animation-play-state: alternate

정답입니다.

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

정답 및 해설 보기

정답: ①
animation-iteration-count는 반복 횟수를 정하며 infinite를 사용하면 무한 반복한다.

12. 0% → 100% → 0% 순서로 왕복 재생하는 direction 값은?

① normal ② reverse ③ alternate ④ paused

정답입니다.

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

정답 및 해설 보기

정답: ③
alternate는 정방향으로 끝까지 간 뒤 역방향으로 되돌아오는 왕복 재생이다.

13. 애니메이션 종료 후 마지막 키프레임 모습을 유지하는 값은?

① animation-fill-mode: none ② animation-fill-mode: forwards ③ animation-direction: reverse ④ animation-play-state: paused만 가능

정답입니다.

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

정답 및 해설 보기

정답: ②
forwards는 애니메이션이 끝난 뒤 마지막 실행 방향의 최종 키프레임 스타일을 유지한다.

14. delay 동안 첫 키프레임 스타일을 미리 적용하고 종료 후 마지막 모습도 유지하는 값은?

① none ② forwards ③ backwards ④ both

정답입니다.

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

정답 및 해설 보기

정답: ④
both는 backwards와 forwards를 결합해 재생 전 지연과 종료 후 양쪽의 키프레임 스타일을 적용한다.

15. 애니메이션을 현재 위치에서 일시 정지하는 선언은?

① animation-direction: paused ② animation-fill-mode: paused ③ animation-play-state: paused ④ animation-delay: paused

정답입니다.

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

정답 및 해설 보기

정답: ③
animation-play-state는 running과 paused로 애니메이션의 재생 상태를 제어한다.

16. will-change 사용 원칙으로 옳은 것은?

① 실제 성능 문제가 있을 때 필요한 요소에 제한적으로 사용하고 완료 후 제거한다. ② 모든 요소에 항상 지정하면 가장 빠르다. ③ column-fill을 대신하는 다단 속성이다. ④ 키프레임 이름을 정의하는 필수 속성이다.

정답입니다.

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

정답 및 해설 보기

정답: ①
will-change는 레이어와 메모리를 사용하므로 남발하면 오히려 느려질 수 있다. 필요한 순간에만 적용한다.

17. 화면 너비에 따라 단 수가 자동으로 줄고 늘어나는 반응형 다단에 적합한 기준은?

① column-count만 고정 ② column-rule-width ③ column-span ④ column-width

정답입니다.

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

정답 및 해설 보기

정답: ④
column-width는 최소 단 너비를 기준으로 가용 공간에 맞게 브라우저가 단 수를 자동 조절한다.

18. columns: 200px 3;의 의미는?

① 최소 단 너비를 약 200px로 유지하면서 최대 3단을 허용한다. ② 단 사이 간격을 200px로 하고 선 두께를 3px로 한다. ③ 높이를 200px로 고정하고 3번 반복한다. ④ 200개의 단을 3px 너비로 만든다.

정답입니다.

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

정답 및 해설 보기

정답: ①
columns 단축 속성은 단의 너비와 개수를 함께 지정하며 이 선언은 최소 너비와 최대 단 수의 조합이다.

19. 다단 레이아웃의 제목이 모든 단을 가로지르게 하는 선언은?

① column-fill: auto ② column-gap: all ③ column-span: all ④ break-inside: all

정답입니다.

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

정답 및 해설 보기

정답: ③
column-span: all은 다단 흐름을 잠시 끊고 요소를 다단 컨테이너 전체 너비에 걸쳐 배치한다.

20. 카드나 이미지가 단 사이에서 둘로 잘리지 않게 하는 선언은?

① column-rule: none ② break-inside: avoid ③ column-count: avoid ④ animation-fill-mode: avoid

정답입니다.

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

정답 및 해설 보기

정답: ②
break-inside: avoid는 요소를 분할하지 않고 공간이 부족하면 통째로 다음 단으로 넘긴다.