CSS에서 column-rule 속성은 다단(multi-column) 레이아웃에서 열과 열 사이의 구분선 스타일을 지정하는 속성입니다. 이 속성에 애니메이션 효과를 적용하면 구분선의 두께와 스타일이 부드럽게 변화하는 시각적 효과를 만들 수 있습니다.
column-rule 속성이란?
column-rule 속성은 column-rule-width, column-rule-style, column-rule-color 세 가지 하위 속성을 한 번에 설정할 수 있는 축약형(shorthand) 속성입니다. 예를 들어 column-rule: 10px inset red;처럼 작성하면 너비 10px, inset 스타일, 빨간색 구분선이 적용됩니다.
애니메이션 적용 예제
아래 예제는 @keyframes 규칙을 사용하여 column-rule 속성에 애니메이션을 적용하는 방법을 보여줍니다. 요소가 위아래로 움직이면서 열 구분선의 스타일도 함께 변합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-count: 4;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule: 10px inset red;
}
}
</style>
</head>
<body>
<h2>column-rule 속성에 애니메이션 적용하기</h2>
<div>This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text!
</div>
</body>
</html>코드 설명
1. 기본 스타일 설정
div 요소에는 너비 600px, 높이 300px가 지정되어 있고, column-count: 4;를 통해 텍스트가 4개의 단으로 나뉩니다. 또한 position: absolute;와 bottom 값을 사용해 요소의 위치를 제어합니다.
2. @keyframes로 애니메이션 정의
@keyframes myanim 내부의 20% 지점에서 세 가지 변화가 일어납니다.
- bottom: 100px — 요소가 아래에서 위로 이동합니다.
- box-shadow — 주황색 그림자 효과가 나타납니다.
- column-rule: 10px inset red — 열 사이 구분선이 빨간색 inset 스타일로 표시됩니다.
3. 무한 반복 재생
animation: myanim 3s infinite; 설정 덕분에 애니메이션이 3초 주기로 무한히 반복됩니다.
주요 포인트 정리
| 속성 | 설명 |
|---|---|
| column-count | 텍스트를 나눌 단(column)의 개수를 지정 |
| column-rule | 열 구분선의 너비, 스타일, 색상을 한 번에 지정 |
| @keyframes | 애니메이션의 중간 상태(키프레임)를 정의 |
| animation | 애니메이션 이름, 지속 시간, 반복 횟수 등을 설정 |
이처럼 CSS 애니메이션과 다단 레이아웃 속성을 조합하면 정적인 텍스트 블록에도 역동적인 시각 효과를 손쉽게 추가할 수 있습니다.