흑백 화면 위에 눈이 내리는 부드러운 시각적 효과를 CSS와 JavaScript를 활용하여 구현할 수 있습니다. 이 효과는 심플하면서도 차분한 분위기를 연출할 수 있으며, 특히 블로그나 웹사이트 배경에 잘 어울립니다. 또한, 웹사이트의 본문 서체를 기본 서체로 설정하는 방법도 함께 다뤄보겠습니다.
1. 흑백 배경과 눈 내리는 효과 만들기
눈이 내리는 효과는 CSS와 JavaScript를 조합해서 만들 수 있습니다. 이 글에서는 화면 전체를 흑백으로 유지한 채, 부드럽게 내리는 하얀색 눈을 구현하는 방법을 소개하겠습니다.
CSS로 흑백 배경 설정
먼저, 화면 전체를 흑백으로 설정하기 위해 배경색을 검은색으로 지정합니다.
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: black; /* 검정 배경 */
overflow: hidden;
}2. 본문 서체 설정
블로그의 본문 서체는 가독성을 높이기 위해 기본 서체로 설정할 수 있습니다. 기본 서체는 사용자의 운영체제와 브라우저에 맞는 기본 글꼴을 사용하게 합니다. 이를 위해 CSS에서 font-family 속성을 다음과 같이 설정할 수 있습니다.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #ffffff; /* 흰색 텍스트 */
}3. 눈 내리는 효과 구현
눈 내리는 효과는 작은 하얀색 점들을 화면 위에 랜덤하게 뿌리고, 천천히 내려오는 애니메이션을 적용하는 방식으로 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>흑백 화면에 눈 내리는 효과</title>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: black;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #ffffff;
}
.snowflake {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<div id="snow-container"></div>
<script>
const snowContainer = document.getElementById('snow-container');
// 눈 내리는 효과 구현
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// 눈송이의 시작 위치 (화면 너비 내에서 랜덤하게)
snowflake.style.left = Math.random() * window.innerWidth + 'px';
// 크기와 애니메이션 속도를 랜덤하게
const size = Math.random() * 8 + 2; // 크기는 2px에서 10px 사이
snowflake.style.width = size + 'px';
snowflake.style.height = size + 'px';
snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // 5초에서 10초 사이로 떨어짐
snowContainer.appendChild(snowflake);
// 일정 시간이 지나면 눈송이를 삭제
setTimeout(() => {
snowflake.remove();
}, 10000); // 10초 후 눈송이 제거
}
// 눈송이 생성 간격 (0.1초마다 생성)
setInterval(createSnowflake, 100);
</script>
</body>
</html>
4. 설명
CSS 부분
- background-color: black;: 배경을 검정색으로 설정하여 흑백 효과를 구현합니다.
- font-family: 기본 서체를 지정해, 각 운영체제에서 가독성 좋은 폰트를 사용하게 합니다.
- .snowflake: 눈송이 요소는 하얀색 점으로 설정하고, 화면 위에서 아래로 떨어지는 애니메이션을 적용합니다.
- @keyframes fall: 눈송이가 화면 상단에서 하단까지 부드럽게 내려오는 애니메이션을 정의합니다.
JavaScript 부분
- createSnowflake(): 눈송이를 생성하는 함수입니다. 눈송이는 화면 너비 내에서 랜덤한 위치에 생성되며, 크기와 애니메이션 속도도 랜덤으로 설정됩니다.
- setInterval(): 0.1초마다 새로운 눈송이를 생성하여 지속적으로 눈이 내리는 효과를 연출합니다.
결론
위 코드를 사용하면, 흑백 화면에서 눈이 내리는 부드러운 효과를 적용할 수 있으며, 기본 서체 설정을 통해 블로그의 본문 텍스트를 가독성 좋게 유지할 수 있습니다. 이 효과는 단순하지만, 웹사이트나 블로그에 차분하고 아름다운 분위기를 더해줄 수 있습니다.
'IT 정보' 카테고리의 다른 글
| Anime.js로 화려한 웹 애니메이션 만들기 (1) | 2024.10.14 |
|---|---|
| TUI Image Editor 사용법: 손쉽게 이미지 편집하는 방법 가이드 (0) | 2024.10.14 |
| 영카트 상품별 금액 변동 코드 (3) | 2024.09.26 |
| 그누보드에서 PHP로 친구 신청 시스템 만들기 (0) | 2024.06.16 |
| 토드(TOAD) 사용법 안내 (0) | 2024.06.11 |