실습을 진행하다가
강사님께서 대뜸 처음 보는 HTML코드를 쓰셨는데
효과가 나타나서 신기했다.
<marquee behavior = "alternate">
숫자만 3자리, 중복숫자 X
</marquee>
좌우로 움직이는 효과인데
GPT에게 CSS로 해당 코드를 짜려면 어떻게 하는지 물어봤다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Alternate Effect</title>
<style>
.marquee-alternate {
width: 300px; /* 컨테이너 너비 */
height: 50px; /* 컨테이너 높이 */
margin: 50px auto;
overflow: hidden;
position: relative;
background-color: #f0f0f0;
border: 2px solid #ddd;
}
먼저 Marque 문구가 들어갈 컨테이너를 만든다.
.marquee-content {
position: absolute;
width: fit-content;
animation: alternate-move 3s infinite alternate;
font-size: 20px;
color: #333;
}
animation이라는 속성을 사용하는데
alternate-move라는 이름을 가진 키프레임을 구현해서
애니메이션 효과를 적용한다.
3s는 3초를 의미하고
infinite는 무한으로 실행,
alternate는 한 방향으로 쭉 갔다가,
다시 돌아오는 효과를 말한다.
@keyframes alternate-move {
0% {
left: 0;
}
100% {
left: calc(100% - 100px); /* 컨테이너 너비 - 텍스트 너비 */
}
}
다음으로 키프레임 코드를 살펴보면
0%와 100%가 있는데
0%는 시작지점,
100%는 끝지점을 의미한다.
이때 끝지점은
calc(100% - 100px);
요소의 너비에서 텍스트 너비를
calc함수로 빼서
해당 애니메이션이
컨테이너 박스를 벗어나지 않게 한다.
추후에 알게되는 애니메이션을
정리해서 게시해보려고 한다.
'CSS' 카테고리의 다른 글
| [CSS] Antd CSS Framework (0) | 2024.02.21 |
|---|---|
| [CSS] flex-direction 속성을 게임으로 배우는 방법 (0) | 2023.09.07 |
| [CSS] align-items 속성을 게임으로 배워보자 (0) | 2023.09.07 |
| [CSS] justify-content 속성을 게임으로 배우기 (0) | 2023.09.07 |
