What is portrait orientation?

Portrait orientation means the display is taller than it is wide. Height is greater than width, so the long edges run vertically. Phones held upright for reading, chat, or scrolling are usually in portrait.

What is the difference between portrait and landscape orientation?

Portrait is taller than wide. Landscape is wider than tall. The same device switches between them when you rotate it, but the aspect ratio and layout space change, so UI should adapt rather than only stretch.

How do I use @media (orientation: portrait) in CSS?

Add a media query with @media (orientation: portrait) { ... } to apply styles when the viewport height exceeds its width. Pair it with layout rules for landscape using @media (orientation: landscape) when you need both shapes.

What does change orientation mean on a phone or app?

Changing orientation means rotating the device or allowing the app to rotate so the screen moves between portrait and landscape. On the web, the viewport dimensions swap. In native and Capacitor apps, the OS may also animate the transition and update safe areas.

What is content orientation?

Content orientation is how content is laid out relative to the frame, not only which way the device is held. A portrait screen might still show a wide chart or video letterboxed inside it. Match layout and media to the task, not only the default device angle.

Can you show an example of portrait vs landscape?

Yes. Portrait looks like a tall phone frame where height is greater than width. Landscape looks like a wide frame where width is greater than height. The diagram below labels both shapes side by side.

세로 방향(Portrait Orientation): 정의, 예시 및 CSS

세로 방향 은 화면의 높이가 너비보다 큰 경우 (높이 > 너비)를 의미합니다. 가로 방향 은 그 반대입니다: 높이보다 너비가 큰 경우. 세로 방향은 주로 모바일 피드, 기사, 양식, 채팅에 사용되며, 가로 방향은 가로 공간이 필요한 영상, 지도, 대시보드에 적합합니다. 화면 비율(예: 세로 9:16, 가로 16:9)은 너비와 높이의 관계를 나타내며, 방향은 단순히 어느 쪽이 더 긴지만 알려줍니다.

세로 vs 가로 방향 예시

세로 방향 이미지를 검색했다면, 이 나란히 배치된 뷰가 핵심입니다: 같은 기기 클래스에서 한쪽은 세로 프레임, 다른 쪽은 가로 프레임입니다.

나란히 배치된 다이어그램: 높이가 너비보다 큰 세로 방향과 너비가 높이보다 큰 가로 방향

세로 방향은 주의를 수직 스크롤로 좁혀줍니다. 가로 방향은 더 많은 열과 나란히 배치된 UI를 노출합니다. 이들은 단순한 회전 라벨이 아니라 레이아웃 컨텍스트입니다.

방향	형상	일반적인 용도
세로	너비보다 높음	피드, 읽기, 폼, 채팅
가로	높이보다 넓음	비디오, 지도, 차트, 게임

방향(orientation)은 해상도나 화면 비율과 같은 개념이 아닙니다. 두 기기 모두 세로 모드(portrait)라도 픽셀 크기와 비율이 다를 수 있습니다. 반응형 레이아웃은 특정 폰 모델이 아니라 뷰포트의 형태를 기준으로 해야 합니다.

CSS에서 세로 방향(portrait orientation)

회전 시 간격이나 구조가 변경되어야 할 때 CSS를 사용하세요. @media (orientation: portrait) 쿼리는 높이가 너비보다 큰 뷰포트를 일치시킵니다. MDN은 이를 다음 항목에서 문서화하고 있습니다. orientation 미디어 기능.

/* Default: portrait-first single column */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sidebar {
  display: none;
}

@media (orientation: landscape) {
  .page {
    grid-template-columns: 280px 1fr;
  }

  .sidebar {
    display: block;
  }
}

@media (orientation: portrait) {
  .hero {
    padding-block: 24px;
  }
}

대부분의 사용자가 처음 보는 세로 방향에서 시작하고, 그다음 가로 모드 규칙을 추가하세요. 키보드나 브라우저 UI가 나타날 때 깨지는 고정 viewport 높이는 피하세요. 실제 기기에서 두 방향 모두 폼과 스티키 헤더를 테스트하세요.

회전에 반응해야 하는 JavaScript(차트, 지도, 커스텀 셸)라면 다음을 listen하세요: screen.orientation change 이벤트를 수신하거나 다음을 비교하세요: window.innerHeight 대상 window.innerWidth가능하면 레이아웃은 CSS로 유지하세요.

모바일 및 Capacitor 앱에서 방향 고정하기

브라우저는 방향 고정을 사용자 설정으로 취급합니다. Native 앱과 Capacitor 프로젝트는 회전이 작업에 방해가 될 때(로그인, 결제, 키오스크 플로우) 화면별로 화면 방향을 강제할 수 있습니다.

이 @capgo/capacitor-screen-orientation 플러그인이 현재 모드를 읽고, 특정 라우트에서 세로 모드를 고정한 뒤, 사용자가 해당 화면을 벗어나면 고정을 해제합니다. 자세한 내용은 Screen Orientation 플러그인 문서 자세한 내용은 API를 참고하세요.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.lock({ orientation: 'portrait' });

const { type } = await ScreenOrientation.orientation();
console.log(type);

await ScreenOrientation.unlock();

잠금은 최소한으로만 사용하세요. 회전해도 간격만 달라진다면 대신 레이아웃을 조정하세요. 잠금을 적용할 때는 lock 및 unlock 페이지 라이프사이클에 묶어서 미디어와 설정 화면에서는 여전히 가로 모드를 쓸 수 있게 하세요. iOS와 Android 전반의 레이아웃 패턴은 Capacitor 앱의 크로스 플랫폼 UI/UX 모범 사례를 참고하세요.

자주 묻는 질문

세로 방향(Portrait orientation)이란?

세로 방향은 화면 높이가 너비보다 큰 상태를 말합니다. 높이가 너비보다 크므로 긴 변이 수직으로 놓입니다. 읽기, 채팅, 스크롤을 위해 세로로 들고 보는 스마트폰은 보통 세로 방향입니다.

세로 방향과 가로 방향의 차이는 무엇인가요?

세로 방향은 높이가 너비보다 크고, 가로 방향은 너비가 높이보다 큽니다. 기기를 돌리면 같은 기기에서 두 모드가 전환되지만 화면 비율과 레이아웃 공간이 달라지므로, UI는 단순히 늘리는 대신 적응하도록 설계해야 합니다.

CSS에서 @media (orientation: portrait)는 어떻게 사용하나요?

다음과 같은 미디어 쿼리를 추가하세요 @media (orientation: portrait) { ... } 뷰포트 높이가 너비보다 클 때 스타일을 적용합니다. 가로 모드 레이아웃 규칙과 함께 사용하세요 @media (orientation: landscape) 두 가지 형태가 모두 필요할 때

폰이나 앱에서 방향 변경이란 무엇인가요?

방향 변경은 장치를 회전시키거나 앱이 회전하도록 허용하여 화면이 세로 모드와 가로 모드 사이를 오가게 하는 것을 의미합니다. 웹에서는 뷰포트 크기가 바뀝니다. 네이티브 및 Capacitor 앱에서는 OS가 전환 애니메이션을 실행하고 안전 영역을 업데이트할 수도 있습니다.

콘텐츠 방향이란 무엇인가요?

콘텐츠 방향은 장치를 어떻게 들고 있느냐보다 프레임에 대한 콘텐츠 배치 방식을 의미합니다. 세로 화면에서도 넓은 차트나 영상에 레터박싱을 적용해 표시할 수 있습니다. 기본 장치 각도뿐 아니라 작업에 맞게 레이아웃과 미디어를 조정하세요.

세로 모드와 가로 모드 예시를 보여줄 수 있나요?

네. 세로(Portrait)는 높이가 너비보다 큰 세로형 폰 프레임처럼 보입니다. 가로(Landscape)는 너비가 높이보다 큰 가로형 프레임처럼 보입니다. 아래 다이어그램으로 스크롤하세요 세로 vs 가로 방향 예시 라벨이 붙은 이미지를 확인하려면.

Capacitor 앱을 출시하고 있으며, 릴리스 후 빠른 수정과 함께 방향성 동작을 제어해야 하는 경우 Capgo 한 번 살펴볼 가치가 있습니다. CapacitorJS 및 Electron 앱에 대한 라이브 업데이트를 제공하며, 화면 방향과 같은 앱 기능을 위한 플러그인도 유지 관리합니다. 이는 전체 릴리스 프로세스를 다시 빌드하지 않고도 특정 뷰를 잠금 또는 활성화해야 할 때 도움이 될 수 있습니다.