전체 화면을 구현하는 CSS

CSS(Cascading Style Sheets)는 웹페이지의 모양과 스타일을 설명하는 데 사용되는 마크업 언어입니다. HTML 문서에 스타일, 레이아웃 및 대화형 효과를 추가할 수 있습니다. 프런트엔드 개발에서는 전체 화면 효과를 구현해야 하는 경우가 많습니다. 이 기사에서는 CSS를 사용하여 전체 화면 효과를 구현하는 방법을 소개합니다.

1. 전체 화면 속성

CSS3에는 전체 화면 속성(전체 화면 API)이 도입되어 개발자가 웹 페이지에서 일부 요소 또는 전체 페이지를 전체 화면으로 표시할 수 있습니다. 전체 화면 속성을 통해 브라우저 창이 전체 화면일 때 특정 작업을 수행할 수 있습니다. 이 속성을 사용하면 웹 프로그램에서 더 나은 사용자 경험을 얻을 수 있습니다.

이 속성의 구문은 다음과 같습니다:

element:fullscreen{
    /*全屏样式*/
}

사용자가 전체 화면 키를 누르거나 다른 표준 전체 화면 작업을 수행하면 요소가 브라우저에 의해 확대되어 전체 화면을 채웁니다. 전체 화면 상태를 종료하면 요소가 원래 크기와 위치로 돌아갑니다.

전체 화면 속성은 Chrome, Firefox, Safari 및 IE11을 포함하여 지원되는 브라우저에서만 인식될 수 있습니다.

2. 전체 화면 효과 달성

아래에서는 전체 화면 API를 사용하여 개별 요소에 대해 전체 화면을 구현하고 전체 페이지에 대해 전체 화면을 구현하는 방법을 보여줍니다.

1. 개별 요소에 대해 전체 화면 구현

먼저 HTML에서 전체 화면으로 표시해야 하는 요소를 추가합니다. 예:

<div id="fullscreen">
    ...
</div>

그런 다음 CSS 스타일에 다음 코드를 추가합니다.

#fullscreen {
    width: 100%;
    height: 100%;
}

#fullscreen:fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #fff; /*全屏时的背景色*/
}

코드에서 먼저 요소의 너비와 높이를 모두 100%로 설정합니다. 다음으로, 위치가 상위 요소가 아닌 브라우저 창을 기반으로 하도록 요소를 고정 위치 지정(position:fixed)으로 설정하는 것을 포함하여 전체 화면 속성(:fullscreen)에 추가 스타일이 추가되었습니다. 또한 요소의 너비와 높이를 100%로 설정합니다. 마지막으로 전체 화면 요소를 다른 요소 위에 배치하려면 z-index를 999로 설정하세요. 또한 전체 화면에서 배경색, 글꼴 및 기타 스타일을 변경하기 위해 추가 스타일을 추가할 수 있습니다.

2. 전체 페이지에 대해 전체 화면 구현

전체 페이지에 대해 전체 화면 효과를 구현하려면 HTML 및 본문 요소에 전체 화면 스타일을 추가할 수 있습니다.

html:fullscreen, 
body:fullscreen {
    height: 100%;
    overflow: hidden;
}

여기서는 두 요소를 모두 전체 화면으로 설정하고 그런 다음 높이를 100%로 설정합니다. 또한 전체 화면 모드에서 스크롤 막대가 표시되지 않도록 하려면 오버플로 속성을 숨김으로 설정하세요. 이렇게 하면 사용자가 브라우저에서 전체 화면 키를 누르면 전체 페이지가 화면 크기에 맞게 확대됩니다.

전체 화면 API를 사용할 때 브라우저는 오디오 및 비디오 자동 재생과 같은 자동 재생 기능을 비활성화할 수 있다는 점에 유의해야 합니다. 또한 키보드 및 마우스 이벤트는 전체 화면 모드에서 다를 수 있습니다.

3. 요약

CSS를 사용하여 전체 화면 효과를 얻는 것은 매우 간단합니다. 몇 가지 CSS 속성만 추가하면 됩니다. 전체 화면 API를 사용하면 더 나은 사용자 경험을 제공하기 위해 웹 페이지의 요소가 전체 화면으로 표시되도록 설정할 수 있습니다. 전체 화면 속성은 지원되는 브라우저에서만 유효하며 전체 화면 상태에는 일부 제한이 있을 수 있다는 점에 유의하세요.

위 내용은 전체 화면을 구현하는 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!