diff options
Diffstat (limited to 'files/ko/web/css/_colon_fullscreen/index.html')
| -rw-r--r-- | files/ko/web/css/_colon_fullscreen/index.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/files/ko/web/css/_colon_fullscreen/index.html b/files/ko/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..70e0c0308c --- /dev/null +++ b/files/ko/web/css/_colon_fullscreen/index.html @@ -0,0 +1,94 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Fullscreen API + - Pseudo-class + - Reference + - Selector + - 전체화면 +translation_of: 'Web/CSS/:fullscreen' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:fullscreen</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 전체 화면 모드에 진입한 모든 요소와 일치합니다. 다수의 요소가 전체 화면 중이라면 그 요소 모두 선택합니다.</span></p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="사용_참고">사용 참고</h2> + +<p><code>:fullscreen</code> 의사 클래스는 요소가 전체 화면과 일반적인 모습을 넘나들 때마다 크기, 스타일, 레이아웃 등을 조정하도록 스타일시트를 설정할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>이번 예제에서는 문서의 전체 화면 여부에 따라 버튼의 색을 변경합니다. 스타일 변경은 JavaScript 없이 CSS에서만 처리합니다.</p> + +<h3 id="HTML">HTML</h3> + +<p>페이지의 HTML 구조는 다음과 같습니다.</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>ID가 <code>"fs-toggle"</code>인 {{htmlelement("button")}}은 문서가 전체 화면이면 흐릿한 빨강, 그렇지 않으면 흐릿한 초록으로 색이 바뀝니다.</p> + +<h3 id="CSS">CSS</h3> + +<p>스타일 마법은 CSS에서 일어납니다. 두 가지 규칙을 사용할 것으로, 첫 번째는 전체 화면이 아닐 때 전체 화면 버튼의 배경색을 설정합니다. 중요한 것은 <code>:not(:fullscreen)</code>으로, <code>:fullscreen</code> 의사 클래스와 일치하지 않는 요소를 선택합니다.</p> + +<pre class="brush: css notranslate">#fs-toggle:not(:fullscreen) { + background-color: #afa; +} +</pre> + +<p>문서가 전체 화면에 들어간 경우, 대신 아래의 CSS를 적용하여 버튼 배경을 흐릿한 빨강으로 바꿉니다.</p> + +<pre class="brush: css notranslate">#fs-toggle:fullscreen { + background-color: #faa; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.fullscreen")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Fullscreen_API">Fullscreen API </a></li> + <li><a href="/ko/docs/Web/API/Fullscreen_API/Guide">Fullscreen API 안내서</a></li> + <li>{{cssxref(":not")}}</li> + <li>{{cssxref("::backdrop")}}</li> + <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} 특성</li> +</ul> |