레이아웃 및 뷰 정의(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
사용자 인터페이스에 대한 일관되고 예측 가능한 관리를 통해 폼 팩터, 디스플레이 크기 및 보기 상태와 관련하여 유연하고 조화로운 환경을 제공하는 Windows 런타임 앱을 빌드할 수 있습니다. 사용자가 전화, 태블릿 또는 대형 HD 모니터에서 볼 때, 화면을 세로로 돌릴 때, 앱 크기를 조정할 때 앱이 멋지게 보이게 하고 싶을 것입니다. 사용자가 선택하는 장치 및 보기를 계획하면 UI를 사용자의 선택에 맞춰 깔끔하게 다시 배치할 수 있습니다.
.png "전체 화면 가로, 전체 화면 세로 및 크기 조정된 좁은 너비 뷰")
JavaScript로 작성한 Windows 런타임 앱의 UI를 지정하는 경우 앱에서 지원하는 뷰와 뷰에 필요한 레이아웃, 이 두 가지 기본 요소에 중점을 두게 됩니다. CSS 스타일시트를 사용하여 이러한 작업을 수행할 수 있습니다.
CSS 콘텐츠를 표시 부분(표시되는 항목과 표시 방식)으로부터 분리하는 표준 기반 CSS를 통해 사용자 인터페이스를 설명하고 관리할 수 있습니다. 이러한 분리를 통해 여러 장치, 폼 팩터, 화면 크기, 사용자 기본 설정 및 보기 상태를 지원하는 일관되고 유용하며 즐거운 사용자 환경을 제공할 수 있습니다.
레이아웃 레이아웃은 앱에서 뷰를 지원할 수 있는 메커니즘입니다. 격자, 다중 열, 영역 및 가변 상자 등 CSS3(CSS 스타일시트, Level 3) 레이아웃을 통해 앱 콘텐츠를 구조화하고 표시하며 콘텐츠에 스타일을 지정하여 사용자가 선택하는 콘텐츠 표시 방식에 맞출 수 있습니다.
시맨틱 줌 기능을 포함하는 앱은 UI가 그리드 레이아웃과 선형 레이아웃 간에 전환할 수 있는 경우 제공되는 정보의 양과 세분성에 따라 의미 중심 임계값을 지정할 수 있습니다.
뷰 뷰는 사용자가 앱 콘텐츠를 액세스하고 조작하는 방식을 말합니다.
- 가로 또는 세로 방향
- 전체 화면 또는 크기 조정
- 이동 가능, 확대/축소 가능 또는 크기 조정된 UI 표면
- 검색 결과 창이나 폴더 구조와 같은 특정 UI 요소
Windows 런타임 앱용 레이아웃과 뷰를 정의하려면 HTML, JavaScript 및 CSS에 대해 잘 알고 있어야 합니다.
이 조항의 내용
| 항목 | 설명 |
|---|---|
임의의 창 크기 또는 방향에 대한 앱 레이아웃을 정의할 수 있습니다. |
|
어느 창 크기에서나 제대로 표시되고 문제 없이 작동하도록 앱을 디자인할 때는 기본 전체 화면 가로 레이아웃을 보완할 추가 레이아웃을 만들지 여부를 선택해야 합니다. |
|
개별 창에서 여러 개의 독립 함수를 볼 수 있도록 하여 사용자의 생산성을 높일 수 있습니다. |
|
Windows 런타임 앱의 사용자에게 가장 유연하고 적응성이 뛰어난 사용자 환경을 제공하려면 먼저 콘텐츠가 사용될 뷰와 콘텐츠에 가장 적합한 레이아웃 모드를 결정해야 합니다. 여기서는 Windows 8의 Windows 스토어 앱에서 지원하는 CSS3(CSS 스타일시트, Level 3) 레이아웃에 대해 설명합니다. |
|
여기에 설명된 레이아웃 패턴을 사용하여 앱 페이지의 UI 요소를 레이아웃할 수 있습니다. 여백, 페이지 헤더, 제본용 여백 너비 및 이러한 다른 요소에서 일관된 패턴을 따르면 앱 전체에서 통일성이 유지되며 사용자가 시스템 전체의 조작 방식을 쉽게 이해할 수 있습니다. |