미디어쿼리 가로모드1

• 

  [HTML&CSS] 웹 페이지 가로모드 체크하기 (CSS 미디어 쿼리) CSS 미디어 쿼리를 사용하여, 디바이스가 세로 방향으로 방향을 바꾸었을 때, '가로모드로 변환해 주세요'라는 메시지를 삽입하는 스타일 코드입니다. orientation이 protrait인 경우 body에 "left", "top", "right", "bottom" 속성을 0으로 설정하여 뷰포트 전체를 차지하도록 하고, "background" 속성을 #000으로 설정하여 배경색을 검은색으로 설정합니다. 메시지는 수평/수직 가운데 정렬했고, "z-index"를 통해서 우선적으로 표시될 수 있도록 하였습니다. 간단한 소스 코드이니 바로 사용 가능 합니다. 가로 모드 입니다. 개발이야기/HTML&CSS 2023. 4. 14.