반응형
CSS와 JavaScript를 결합하면 정적인 웹 페이지에 동적인 상호작용을 추가할 수 있습니다. 이 글에서는 CSS와 JavaScript를 함께 사용해 버튼 애니메이션, 모달 창, 드롭다운 메뉴 등 다양한 상호작용 요소를 구현하는 방법을 배워봅니다.
1. CSS와 JavaScript를 결합하는 이유
CSS는 스타일링과 애니메이션, JavaScript는 로직과 동작을 담당합니다. 두 기술을 함께 사용하면 사용자가 클릭, 스크롤, 호버와 같은 동작에 따라 페이지가 반응하도록 만들 수 있습니다.
예시:
• 클릭 시 버튼 색상 변경
• 스크롤 시 특정 요소가 나타나는 효과
• 메뉴 클릭 시 드롭다운 표시
2. 실전 예제 1: 버튼 클릭 애니메이션
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 애니메이션</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="animated-button">클릭하세요</button>
<script src="script.js"></script>
</body>
</html>
CSS
/* styles.css */
#animated-button {
background-color: #007bff;
color: white;
border: none;
padding: 15px 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease;
}
#animated-button.clicked {
transform: scale(1.2);
background-color: #0056b3;
}
JavaScript
// script.js
document.getElementById('animated-button').addEventListener('click', function () {
this.classList.add('clicked');
setTimeout(() => {
this.classList.remove('clicked');
}, 200);
});
결과: 버튼을 클릭하면 크기가 확대되고 색상이 변경됩니다.
3. 실전 예제 2: 모달 창 구현
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모달 창</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="open-modal">모달 열기</button>
<div id="modal" class="hidden">
<div class="modal-content">
<span id="close-modal">×</span>
<p>모달 창 내용</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.hidden {
display: none;
}
#modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
#close-modal {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
JavaScript
// script.js
const modal = document.getElementById('modal');
const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
openModalButton.addEventListener('click', () => {
modal.classList.remove('hidden');
});
closeModalButton.addEventListener('click', () => {
modal.classList.add('hidden');
});
결과: 버튼을 클릭하면 화면 중앙에 모달 창이 표시되고, 닫기 버튼을 클릭하면 사라집니다.
4. 실전 예제 3: 드롭다운 메뉴
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드롭다운 메뉴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dropdown">
<button id="dropdown-button">메뉴 열기</button>
<ul id="dropdown-menu" class="hidden">
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.dropdown {
position: relative;
display: inline-block;
}
#dropdown-menu {
position: absolute;
top: 100%;
left: 0;
list-style: none;
background: white;
border: 1px solid #ccc;
padding: 0;
margin: 0;
width: 150px;
display: none;
}
#dropdown-menu li {
padding: 10px;
cursor: pointer;
}
#dropdown-menu li:hover {
background-color: #f0f0f0;
}
JavaScript
// script.js
const dropdownButton = document.getElementById('dropdown-button');
const dropdownMenu = document.getElementById('dropdown-menu');
dropdownButton.addEventListener('click', () => {
if (dropdownMenu.classList.contains('hidden')) {
dropdownMenu.classList.remove('hidden');
dropdownMenu.style.display = 'block';
} else {
dropdownMenu.classList.add('hidden');
dropdownMenu.style.display = 'none';
}
});
결과: 버튼을 클릭하면 드롭다운 메뉴가 나타나고, 다시 클릭하면 사라집니다.
5. CSS와 JavaScript 결합 시 주의사항
1. 접근성 고려: 키보드와 스크린 리더 사용자를 위해 aria-* 속성을 추가하세요.
<button aria-expanded="false" aria-controls="dropdown-menu">메뉴 열기</button>
2. 최적화: JavaScript 이벤트 리스너를 필요 최소한으로 사용하고, CSS 애니메이션을 활용해 성능을 최적화하세요.
3. 코드 분리: CSS는 스타일, JavaScript는 동작을 담당하도록 명확히 역할을 분리하세요.
CSS와 JavaScript를 결합하면 정적인 디자인에 생동감을 더할 수 있습니다. 이 글의 예제를 바탕으로 다양한 상호작용 요소를 구현하고, 사용자가 즐길 수 있는 웹 경험을 만들어 보세요.
다음 글에서는 CSS 애니메이션과 JavaScript의 고급 활용법을 다룰 예정입니다.
반응형
'CSS' 카테고리의 다른 글
| CSS 성능 최적화 및 디버깅 가이드: 효율적인 스타일 관리법 (0) | 2024.12.10 |
|---|---|
| CSS 모듈화 완벽 가이드: BEM과 컴포넌트 기반 설계 (0) | 2024.12.10 |
| CSS로 다크 모드 구현하기: 사용자 친화적인 디자인 가이드 (0) | 2024.12.09 |
| CSS로 3D 트랜스폼 효과 구현하기: 생동감 넘치는 디자인 만들기 (0) | 2024.12.09 |
| CSS 그라디언트(Gradient) 완벽 가이드: 배경을 돋보이게 만드는 방법 (0) | 2024.12.09 |