< Code diaries />

CSS function - env() - UI 측면에서 꼭 필요한 함수 본문

CSS

CSS function - env() - UI 측면에서 꼭 필요한 함수

ejey 2024. 10. 29. 16:00

 

 

CSS의 env() 함수는 브라우저 또는 기기에서 제공하는 환경 변수를 참조하는 함수로, 화면 안전 영역이나 특정 기기의 특성에 맞춰 레이아웃을 동적으로 조정할 때 유용합니다. env() 함수는 특히 모바일 기기에서 노치, 하단바 등으로 인해 안전 영역이 필요한 경우 여백을 설정할 때 자주 사용됩니다.

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS env() 예제</title>
  <style>
    body {
      margin: 0;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      background-color: #f0f0f0;
    }

    .content {
      padding: 20px;
      background-color: #fff;
      max-width: 600px;
      margin: auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333;
      font-size: 1.5em;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>CSS env() 함수 예제</h1>
    <p>이 페이지는 브라우저의 안전 영역을 자동으로 감안하여 여백을 설정합니다.</p>
  </div>
</body>
</html>

 

 

주요 env() 변수를 사용한 예

기본적으로 아래와 같은 safe-area-inset-* 변수를 제공합니다:

  • safe-area-inset-top: 화면 상단의 안전 영역 여백
  • safe-area-inset-right: 화면 오른쪽의 안전 영역 여백
  • safe-area-inset-bottom: 화면 하단의 안전 영역 여백
  • safe-area-inset-left: 화면 왼쪽의 안전 영역 여백

그리고, env() 함수는 아이폰에만 한정된 명령이 아닙니다. 이 함수는 여러 플랫폼과 장치에서 사용할 수 있으며, 특히 모바일 환경에서 안전 영역을 조정할 때 유용합니다.

주요 사항:

  • 다양한 플랫폼에서 사용 가능: env() 함수는 CSS 환경 변수 사양을 지원하는 브라우저에서 구현됩니다. 아이폰의 노치와 같은 화면 특징으로 인해 많이 알려졌지만, 안드로이드 장치 및 다른 플랫폼에서도 사용할 수 있습니다.
  • 안전 영역 인셋: 가장 일반적으로 사용되는 환경 변수인 safe-area-inset-*는 콘텐츠가 화면의 노치나 둥근 모서리에 의해 가려지지 않도록 여백을 제공하는 데 사용됩니다.
  • 브라우저 호환성: 특정 장치에서 env()가 제대로 작동하는지 확인하려면 브라우저 호환성을 확인해야 합니다.

따라서, env()는 아이폰과 같은 iOS 장치에 특히 유용하지만, 해당 CSS 사양을 구현한 모든 브라우저에서 활용할 수 있습니다.

 

 

 

env()에 사용할 수 있는 주요 환경 변수는 다음과 같습니다. 이 변수들은 주로 모바일 환경에서 안전 영역이나 UI 요소에 따라 레이아웃을 조정하는 데 유용합니다.

1. Safe Area Insets

  • safe-area-inset-top: 화면 상단의 안전 영역 여백
  • safe-area-inset-right: 화면 오른쪽의 안전 영역 여백
  • safe-area-inset-bottom: 화면 하단의 안전 영역 여백
  • safe-area-inset-left: 화면 왼쪽의 안전 영역 여백

2. Title Bar Area Insets

  • titlebar-area-inset-top: 타이틀 바가 차지하는 화면 상단의 영역
  • titlebar-area-inset-right: 타이틀 바가 차지하는 화면 오른쪽의 영역
  • titlebar-area-inset-bottom: 타이틀 바가 차지하는 화면 하단의 영역
  • titlebar-area-inset-left: 타이틀 바가 차지하는 화면 왼쪽의 영역

3. 기타 환경 변수 (브라우저에 따라 다름)

  • status-bar-inset-top: 상태 표시줄이 차지하는 화면 상단의 영역
  • status-bar-inset-right: 상태 표시줄이 차지하는 화면 오른쪽의 영역
  • status-bar-inset-bottom: 상태 표시줄이 차지하는 화면 하단의 영역
  • status-bar-inset-left: 상태 표시줄이 차지하는 화면 왼쪽의 영역
body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.header {
    margin-top: env(titlebar-area-inset-top);
}

참고 사항

  • 위에서 언급한 환경 변수들은 지원하는 브라우저와 기기에 따라 다를 수 있습니다. 특정 변수의 지원 여부를 확인하기 위해서는 사용하려는 브라우저의 문서를 참조하는 것이 좋습니다.
  • 환경 변수를 사용할 때는 항상 실제 디바이스에서 테스트하여 각 변수의 동작을 확인하는 것이 중요합니다.

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/env

 

env() - CSS: Cascading Style Sheets | MDN

env() CSS 함수는 var() 함수나 사용자 정의 속성과 비슷한 방법으로 환경 변수에 정의된 값을 CSS에 삽입할 때 사용할 수 있습니다. 환경 변수와 사용자 정의 속성의 차이점은 환경 변수는 작성자가

developer.mozilla.org

 

 

반응형
저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

CSS Filter  (0) 2024.10.29
HTML문서에서 프린트 설정하기 - @media print CSS 설정 및 @page 사용법  (0) 2024.09.10
CSS Property - Background 이미지, 그라디언트 넣기  (0) 2024.06.10
CSS Property - 반응형 작업하기(Media query)  (0) 2024.06.10
CSS Property - Animation 애니메이션 적용하기~!  (0) 2024.06.10
'CSS' Related Articles more