CSS 전체 화면 요소 스타일링 | 웹 개발

소개

이 랩에서는 :fullscreen CSS 의사 요소 선택자를 사용하여 요소가 전체 화면 모드일 때 스타일을 적용하는 방법을 살펴봅니다. Element.requestFullscreen()을 사용하여 스타일을 미리 보기 위해 요소를 전체 화면으로 만드는 버튼을 생성합니다. 이 랩을 마치면 CSS 를 사용하여 사용자 정의 스타일을 가진 전체 화면 요소를 만드는 방법에 대한 이해도가 높아질 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

전체 화면 (Fullscreen)

index.html 및 style.css는 이미 VM 에 제공되어 있습니다.

전체 화면 모드에서 요소의 스타일을 지정하려면 :fullscreen CSS 의사 요소 선택자를 사용할 수 있습니다. <button> 및 Element.requestFullscreen()을 사용하여 미리 보기 목적으로 요소를 전체 화면으로 만드는 버튼을 만들 수도 있습니다. 다음은 예제 코드입니다.

<div class="container">
  <p>
    <em>아래 버튼을 클릭하여 요소를 전체 화면 모드로 전환하세요. </em>
  </p>
  <div class="element" id="element">
    <p>전체 화면 모드에서 색상이 변경됩니다!</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    전체 화면으로!
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

/* For Internet Explorer */
.element:-ms-fullscreen p {
  visibility: visible;
}

/* For modern browsers */
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 전체 화면 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

CSS 를 이용한 전체 화면 요소 스타일링

소개

전체 화면 (Fullscreen)

요약