CSS에서 border-spacing(테두리 간격) 속성은 테이블의 셀과 셀 사이의 간격을 조절하는 데 사용됩니다. 이 속성에 @keyframes를 활용한 애니메이션을 적용하면, 테이블 셀 사이의 간격이 부드럽게 변화하는 시각적 효과를 만들 수 있습니다.
border-spacing 애니메이션 예제
아래 코드는 border-spacing 속성에 애니메이션을 적용하는 완전한 HTML 예제입니다. 3초 주기로 무한 반복되며, 애니메이션 진행률 30% 지점에서 배경색, 오른쪽 테두리 색상과 두께, 그리고 셀 간격이 함께 변합니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid green;
}
#newTable {
width: 500px;
height: 300px;
background: yellow;
border: 15px solid yellow;
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
30% {
background-color: orange;
border-right-color: red;
border-right-width: 25px;
border-spacing: 50px;
}
}
</style>
</head>
<body>
<h2>border-spacing 애니메이션 실행</h2>
<table id="newTable">
<tr>
<th>과목</th>
<th>학생</th>
<th>점수</th>
</tr>
<tr>
<td>수학</td>
<td>Amit</td>
<td>98</td>
</tr>
<tr>
<td>과학</td>
<td>Sachin</td>
<td>99</td>
</tr>
</table>
</body>
</html>코드 핵심 요소 살펴보기
1. 기본 스타일 설정
table, th, td 선택자에 초록색 1px 실선 테두리를 지정하여 테이블 전체와 각 셀에 테두리가 표시되도록 했습니다.
2. 애니메이션 대상 테이블
#newTable 선택자에는 크기(500px × 300px), 노란색 배경, 15px 두께의 테두리를 설정하고, animation: myanim 3s infinite; 구문으로 'myanim'이라는 이름의 애니메이션이 3초마다 무한히 반복되도록 정의했습니다.
3. @keyframes로 중간 상태 정의
@keyframes myanim 블록 안의 30% 지점에서 다음 속성들이 변화합니다.
- background-color: orange — 배경색이 노란색에서 주황색으로 변경
- border-right-color: red — 오른쪽 테두리 색상이 빨간색으로 변경
- border-right-width: 25px — 오른쪽 테두리 두께가 15px에서 25px로 증가
- border-spacing: 50px — 셀 사이 간격이 50px까지 확장
참고 사항
border-spacing 속성은 테이블의 border-collapse 값이 기본값인 separate(분리 모드)일 때만 동작합니다. 만약 border-collapse: collapse;가 적용되어 있다면 셀 간격 애니메이션이 작동하지 않으므로 주의하세요. 또한 이 속성은 음수 값을 가질 수 없으며, 가로·세로 간격을 각각 지정하려면 border-spacing: 10px 20px;처럼 두 개의 값을 사용할 수 있습니다.