:fullscreen

CSS :fullscreen 의사 클래스는 전체 화면 모드에 진입한 모든 요소와 일치합니다. 다수의 요소가 전체 화면 중이라면 그 요소 모두 선택합니다.

구문

:fullscreen

사용 참고

:fullscreen 의사 클래스는 요소가 전체 화면과 일반적인 모습을 넘나들 때마다 크기, 스타일, 레이아웃 등을 조정하도록 스타일시트를 설정할 수 있습니다.

예제

이번 예제에서는 문서의 전체 화면 여부에 따라 버튼의 색을 변경합니다. 스타일 변경은 JavaScript 없이 CSS에서만 처리합니다.

HTML

페이지의 HTML 구조는 다음과 같습니다.

<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.</p>

<button id="fs-toggle">Toggle Fullscreen</button>

ID가 "fs-toggle"<button>은 문서가 전체 화면이면 흐릿한 빨강, 그렇지 않으면 흐릿한 초록으로 색이 바뀝니다.

CSS

스타일 마법은 CSS에서 일어납니다. 두 가지 규칙을 사용할 것으로, 첫 번째는 전체 화면이 아닐 때 전체 화면 버튼의 배경색을 설정합니다. 중요한 것은 :not(:fullscreen)으로, :fullscreen 의사 클래스와 일치하지 않는 요소를 선택합니다.

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

문서가 전체 화면에 들어간 경우, 대신 아래의 CSS를 적용하여 버튼 배경을 흐릿한 빨강으로 바꿉니다.

#fs-toggle:fullscreen {
  background-color: #faa;
}

명세

Specification Status Comment
Fullscreen API
The definition of ':fullscreen' in that specification.
Living Standard Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:fullscreenChrome Full support 71
Full support 71
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Edge Full support 12Firefox Full support 64
Full support 64
No support 47 — 65
Disabled
Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 9 — 65
Alternate Name
Alternate Name Uses the non-standard name: :-moz-full-screen
IE Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 58
Full support 58
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Safari Full support 6
Alternate Name
Full support 6
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
WebView Android Full support 71
Full support 71
Full support 37
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Chrome Android Full support 71
Full support 71
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Firefox Android Full support 64
Full support 64
No support 47 — 65
Disabled
Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 9 — 65
Alternate Name
Alternate Name Uses the non-standard name: :-moz-full-screen
Opera Android Full support 50
Full support 50
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Safari iOS No support NoSamsung Internet Android Full support 10.0
Full support 10.0
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Select all elements in the fullscreen stackChrome No support NoEdge No support 12 — 79Firefox Full support 43IE Full support 11Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 43Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기