웹페이지가 브라우저의 전체 화면(Fullscreen) 모드로 전환되었을 때 별도의 스타일을 적용하고 싶다면 CSS의 :fullscreen 가상 클래스(pseudo-class)를 사용하면 됩니다. 이 가상 클래스를 활용하면 전체 화면 상태에서만 배경색, 글꼴 크기, 배경 이미지 등을 자유롭게 변경할 수 있습니다.
CSS :fullscreen 가상 클래스 문법
:fullscreen 가상 클래스의 기본 문법은 다음과 같습니다.
Selector:fullscreen {
attribute: /*value*/
}다만 브라우저마다 지원 방식이 다르기 때문에, 크로스 브라우저 호환성을 위해 :-webkit-full-screen(Chrome, Safari 등 WebKit 기반)와 :-ms-fullscreen(구버전 Edge/IE) 접두사 버전도 함께 작성해 주는 것이 좋습니다.
예제 1: 전체 화면에서 배경색과 글꼴 크기 변경하기
아래 예제는 페이지를 클릭하면 전체 화면으로 전환되며, 전체 화면 모드에서는 배경색이 연보라색(thistle)으로 바뀌고 글꼴 크기가 커지도록 설정한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 3%;
}
:fullscreen {
background-color: thistle;
font-size: 2em;
}
:-webkit-full-screen {
background-color: thistle;
font-size: 2em;
}
:-ms-fullscreen {
background-color: thistle;
font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
if (item.requestFullscreen) {
item.requestFullscreen();
} else if (item.webkitRequestFullscreen) {
item.webkitRequestFullscreen();
} else if (item.msRequestFullscreen) {
item.msRequestFullscreen();
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 페이지가 일반 모드에서는 기본 스타일로 표시되지만, 화면을 클릭해 전체 화면으로 전환하는 순간 배경이 연보라색으로 바뀌고 텍스트 크기가 2배로 확대됩니다.
예제 2: 전체 화면에서 배경 이미지 적용하기
이번에는 전체 화면 모드에서 단색 대신 배경 이미지를 적용하는 예제입니다. 페이지를 클릭하면 전체 화면으로 전환되면서 지정한 이미지가 배경에 꽉 차게 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 3%;
color: white;
box-shadow: inset 0 0 40px green;
}
:fullscreen {
background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
font-size: 2em;
}
:-webkit-full-screen {
background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
font-size: 2em;
}
:-ms-fullscreen {
background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
if (item.requestFullscreen) {
item.requestFullscreen();
} else if (item.webkitRequestFullscreen) {
item.webkitRequestFullscreen();
} else if (item.msRequestFullscreen) {
item.msRequestFullscreen();
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 일반 모드에서는 흰색 텍스트와 초록색 내부 그림자(box-shadow) 효과가 보이고, 전체 화면으로 전환되면 지정한 배경 이미지가 화면 전체에 반복 없이(no-repeat) 채워집니다.
정리
CSS :fullscreen 가상 클래스를 사용하면 JavaScript의 Fullscreen API(requestFullscreen())와 함께 브라우저 전체 화면 모드에 맞춘 전용 UI를 손쉽게 구현할 수 있습니다. 실무에서는 표준 속성인 :fullscreen을 먼저 작성하고, 필요에 따라 -webkit-, -ms- 접두사 버전을 병행하여 다양한 브라우저 환경에서 일관된 화면을 제공하는 것이 좋습니다.