미디어쿼리 orientation — 가로/세로 모드 감지 완전 정리

 

 

Web Development · Media Queries

미디어쿼리 orientation — 가로/세로 모드 감지

landscape · portrait · 폭 vs 높이 비교 · 폰을 돌렸을 때

시작 오늘 분석할 코드

화면 크기가 아니라 방향(가로 길이 > 세로 길이?)에 따라 배경색을 바꾸는 코드다. 폰을 가로로 돌리면 주황(orange), 세로로 돌리면 노랑(yellow). 모니터·노트북도 가로 모드라 보통 주황이 보인다.

@media screen and (orientation:landscape) { body { background-color: orange; } } @media screen and (orientation:portrait) { body { background-color: yellow; } }

실제 출력 미리보기 — 창 가로/세로 비율 바꿔 보세요

방향에 따라 배경색이 바뀜

용어 용어 정리

orientation화면 방향 — landscape/portrait

landscape풍경화 — 가로 > 세로

portrait초상화 — 세로 > 가로

정사각형너비=높이는 landscape로 처리

화면 회전폰 돌리면 즉시 다시 평가

screen매체 — 모니터·모바일 일반

background-color배경 색상 (이미지 없이)

@media and조건 결합 — 모두 만족 시 적용

---

1 landscape vs portrait — 비율로 결정

판정은 화면의 폭과 높이 비교다. 디바이스 종류와 무관하다.

상황	폭 vs 높이	모드
일반 모니터 1920×1080	폭 > 높이	landscape
스마트폰 세로	폭 < 높이	portrait
스마트폰 가로 (회전)	폭 > 높이	landscape
창 너비를 줄여 세로로 길게	폭 < 높이	portrait
정사각형 (1:1)	폭 = 높이	landscape (CSS 표준)

---

2 언제 orientation을 쓰는가?

※ 실용 사례

• 스마트폰 가로로 돌렸을 때 영상·게임을 화면 꽉 차게
• portrait에선 수직 메뉴, landscape에선 수평 메뉴
• landscape에선 사이드바를, portrait에선 본문만
• 키오스크·태블릿 거치 형태 따라 다른 UI

---

3 회전 시 즉시 다시 평가

미디어쿼리는 화면 변화에 실시간 반응한다. 폰을 돌리면 브라우저가 portrait/landscape를 다시 판단해 즉시 새 스타일을 적용한다. JavaScript 없이도 동작한다.

---

 

반응형

 

4 orientation + width 결합

실무에선 orientation 단독보다 width와 함께 쓴다. "태블릿이 가로 모드일 때만 2단으로"처럼.

@media screen and (min-width: 768px) and (orientation: landscape) { .layout { display: grid; grid-template-columns: 1fr 2fr; } }

---

5 자주 하는 실수

실수	증상	해결
orientation만으로 모바일 판별	큰 모니터도 landscape라 같이 적용됨	width와 결합
괄호 누락	조건 무시	(orientation: landscape) 형식
and 빠뜨림	조건 결합 안 됨	and (orientation: ...)
portrait/landscape 오타	규칙 무효	철자 정확히
회전 시 깜빡임	레이아웃이 갑자기 바뀜	transition 추가로 부드럽게

---

핵심 한 줄 요약

orientation화면 방향 — 폭 vs 높이 비교

landscape가로 > 세로 (모니터·노트북·폰 가로)

portrait세로 > 가로 (스마트폰 세로)

실시간 반응JS 없이 회전 시 자동 재적용

width와 결합실무에선 너비 조건과 묶기

정사각형CSS 표준: landscape

Tags

#media-query #orientation #landscape #portrait #가로모드 #세로모드 #화면방향 #회전감지 #반응형 #미디어쿼리 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

media-query, orientation, landscape, portrait, 가로모드, 세로모드, 화면방향, 회전감지, 반응형, 미디어쿼리, CSS, HTML, 웹개발, 티스토리