CSS를 사용하여 로고 이미지를 회전 애니메이션으로 만드는 HTML 예제 프로그램을 만들어보겠습니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>회전하는 로고</title>
</head>
<body>
<img src="logo.png" alt="로고" class="rotating-logo">
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 로고 이미지에 회전 애니메이션을 정의합니다.
/* styles.css */
.rotating-logo {
animation: rotate 4s linear infinite; /* 회전 애니메이션 설정 */
width: 200px; /* 로고 이미지의 크기 조절 */
}
@keyframes rotate {
0% {
transform: rotate(0deg); /* 0도 회전 */
}
100% {
transform: rotate(360deg); /* 360도 회전 (한 바퀴) */
}
}
3. 회전하는 로고 스타일링
위의 코드를 작성하면 "로고.png" 이미지가 웹 페이지에 표시되며, rotating-logo 클래스를 가지고 있어서 회전 애니메이션이 적용됩니다. @keyframes를 사용하여 rotate 애니메이션을 정의하고, 로고 이미지를 회전시키는 효과를 만듭니다.
4. 결과
만든 이미지 로고가 아래처럼 회전 할겁니다.
'HTML 예제' 카테고리의 다른 글
| 모달 팝업: 모달 창을 HTML과 CSS로 만들어 팝업 레이어 생성 (0) | 2023.12.05 |
|---|---|
| 스크롤 이벤트: 스크롤 위치에 따라 요소가 나타나거나 사라지는 효과 (0) | 2023.12.05 |
| 레인보우 텍스트: CSS 그래디언트를 사용하여 텍스트에 레인보우 색상 적용 (0) | 2023.12.05 |
| 반짝이는 배경: CSS 애니메이션으로 배경 색상을 반짝이게 만들기 (0) | 2023.12.05 |
| 타자 효과: 글자 한 글자씩 나타나는 타자 효과 (0) | 2023.12.05 |
