728x90
1. 기본 HTML 구조 설정하기
먼저 가로형 차단 메시지를 표시할 오버레이 요소를 HTML에 추가해야 합니다. 메인 콘텐츠와 별도로 전체 화면을 덮을 수 있는 구조를 만들어보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가로형 차단 예제</title>
</head>
<body>
<!-- 메인 콘텐츠 -->
<div class="main-content">
<h1>메인 콘텐츠</h1>
<p>여기에 웹사이트의 실제 내용이 들어갑니다.</p>
</div>
<!-- 가로형 차단 오버레이 -->
<div class="landscape-overlay">
<div class="landscape-message">
<div class="landscape-icon">📵</div>
<h2>가로형은 사용금지입니다</h2>
<p>세로형으로 화면을 회전해주세요.</p>
</div>
</div>
</body>
</html>
2. CSS 미디어 쿼리로 핵심 기능 구현하기
가장 중요한 부분은 CSS 미디어 쿼리를 사용해 모바일 가로형일 때만 오버레이를 표시하는 것입니다. orientation: landscape 속성과 화면 크기 조건을 조합해서 정확히 제어할 수 있어요.
/* 기본적으로 오버레이 숨김 */
.landscape-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(20px);
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
}
/* 모바일 가로형일 때만 오버레이 표시 */
@media screen and (max-width: 768px) and (orientation: landscape) {
.landscape-overlay {
display: flex;
}
body {
overflow: hidden; /* 스크롤 방지 */
}
}
/* 데스크톱에서는 절대 차단하지 않음 */
@media screen and (min-width: 769px) {
.landscape-overlay {
display: none !important;
}
}
3. 사용자 친화적인 메시지 디자인하기
단순한 차단보다는 시각적으로 매력적이고 이해하기 쉬운 메시지를 디자인해야 합니다. 블러 배경과 애니메이션을 활용해 전문적인 느낌을 연출할 수 있어요.
.landscape-message {
text-align: center;
color: white;
padding: 40px 20px;
max-width: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
animation: slideUp 0.5s ease-out;
}
.landscape-icon {
font-size: 4rem;
margin-bottom: 20px;
color: #ff6b6b;
animation: pulse 2s infinite;
}
/* 애니메이션 효과 */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
4. JavaScript로 추가 제어 기능 완성하기
CSS만으로도 기본 기능은 동작하지만, JavaScript를 추가하면 더 안정적이고 세밀한 제어가 가능합니다. 특히 iOS Safari에서 발생할 수 있는 지연 문제를 해결할 수 있어요.
// 화면 방향 변경 감지
window.addEventListener('orientationchange', function() {
setTimeout(function() {
if (window.innerWidth <= 768 && window.innerWidth > window.innerHeight) {
// 모바일 가로형 - 스크롤 차단
document.body.style.overflow = 'hidden';
} else {
// 세로형 또는 데스크톱 - 정상 동작
document.body.style.overflow = 'auto';
}
}, 100); // 화면 전환 완료 대기
});
// 창 크기 변경 감지 (추가 안전장치)
window.addEventListener('resize', function() {
if (window.innerWidth <= 768 && window.innerWidth > window.innerHeight) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
});
이 코드들을 조합하면 모바일에서만 가로형을 차단하는 완전한 기능을 구현할 수 있습니다. 768px을 기준으로 모바일과 데스크톱을 구분하며, backdrop-filter를 지원하지 않는 구형 브라우저를 위해 background: rgba(0, 0, 0, 0.85)를 함께 사용하는 것이 좋습니다.
📁 완성된 예시 파일
위에서 설명한 모든 기능이 포함된 완전한 HTML 파일을 확인하고 싶으시면, 이 글 하단의 "모바일 가로형 차단 기능" 예제를 참고하세요. 실제 모바일 기기에서 테스트해보시면 가로형으로 회전했을 때 차단 화면이 나타나는 것을 확인할 수 있습니다.
728x90
'웹 퍼블리싱 | Web Publishing > 스크립트 | Script' 카테고리의 다른 글
| 마우스 커서 이미지 교체로 파리잡기 게임 만들기 (1) | 2025.06.26 |
|---|---|
| 버튼 클릭으로 배경과 내용이 동시에 바뀌는 인터랙티브 페이지 만들기 (2) | 2025.06.25 |
| 시간에 따라 자동으로 테마가 바뀌는 웹페이지 만들기 (1) | 2025.06.24 |
