레이아웃 선택(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
Windows 런타임 앱의 사용자에게 가장 유연하고 적응성이 뛰어난 사용자 환경을 제공하려면 먼저 콘텐츠가 사용될 뷰와 콘텐츠에 가장 적합한 레이아웃 모드를 결정해야 합니다. 여기서는 Windows 8의 Windows 스토어 앱에서 지원하는 CSS3(CSS 스타일시트, Level 3) 레이아웃에 대해 설명합니다. 가변 상자와 그리드 레이아웃은 앱 및 사용자 지정 컨트롤을 위한 유연한 레이아웃을 만드는 데 유용하며, 다중 열과 영역은 텍스트 및 기타 읽기 콘텐츠의 레이아웃에 가장 유용합니다.
가변 상자 레이아웃
가변 상자(플렉스박스)는 가변 크기 조정 및 기본 크기 조정을 지원하는 제약 조건 기반 시스템을 사용하여 자식 요소를 배열하고 크기를 조정하는 레이아웃 메커니즘입니다. 가변 상자 레이아웃은 여러 화면 크기에 맞출 수 있으며 전자 신문, 잡지 및 기타 디지털 인쇄 미디어 소비 시나리오를 지원합니다.
Flexbox 레이아웃은 복잡한 웹 페이지를 배치하기 위한 것으로, 화면과 브라우저 창 크기가 변경되더라도 요소의 상대적 위치 및 크기를 일정하게 유지하는 데 특히 유용합니다. 이 레이아웃은 부동 상태에 대한 의존도가 적어 올바르게 배치하고 크기를 조정하기가 훨씬 더 복잡합니다.
Flexbox 레이아웃은 상자 크기를 정의할 때 상대적 크기 조정 및 위치 지정을 지원하는 사용 가능한 공간을 고려합니다. 예를 들면 브라우저 창에 있는 별도의 공백을 여러 자식 요소의 크기에 고르게 분산하고, 그러한 자식 요소가 포함 블록의 가운데에 오도록 할 수 있습니다.
Flexbox 레이아웃을 사용하여 다음을 할 수 있습니다.
- 서로 다른 화면 및 브라우저 창 크기를 사용할 만큼 유동적이지만 서로에 대해 상대적인 위치와 크기를 유지하는 요소(예: 이미지 또는 컨트롤)를 포함하는 레이아웃을 만듭니다.
- 일련의 요소 레이아웃 축(가로 또는 세로)에서 여분의 공간을 비례적으로 할당하여 주어진 요소의 크기를 늘리는 방법을 지정합니다.
- 일련의 요소의 레이아웃 축(가로 또는 세로) 주변에 있는 여분의 공간을 할당하여 일련의 요소 앞, 뒤 또는 사이에 배치하는 방법을 지정합니다.
- 요소 레이아웃 축과 수직인 여분의 공간(예: 나란히 배치된 단추 위 또는 아래의 추가 공간)을 요소 주위에 배치하는 방법을 지정합니다.
- 페이지에 요소가 배치되는 방향(즉, 위에서 아래로, 왼쪽으로 오른쪽으로, 오른쪽에서 왼쪽으로 또는 아래에서 위로)을 제어합니다.
- 화면에 있는 요소를 DOM(문서 개체 모델)에 지정된 방식과 다른 순서로 다시 정렬합니다.
그리드와는 달리 플렉스박스에서는 상위 컨테이너에 하위 요소를 명시적으로 배치할 필요가 없습니다. 동적으로 결정되는 다수의 하위 요소가 있는 가벼운 항목 컨테이너를 디자인할 때는 그리드를 사용하는 것이 더 나을 수 있습니다.
자세한 내용은 가변 상자("플렉스박스") 레이아웃을 참조하세요.
그리드 맞춤
그리드는 작성자가 예측 가능한 크기 조정 동작을 사용하여 열과 행으로 배치하기 위해 사용 가능한 공간을 분할하는 메커니즘입니다. 따라서 작성자는 열과 셀 사이에 있는 그리드 선을 참조하거나 그리드 셀을 정의 및 참조하여 앱의 문서 블록 요소를 정확히 배치하고 크기를 조정할 수 있습니다.
플렉스박스와 마찬가지로, 격자도 플로트 또는 스크립트를 사용하여 위치를 지정하는 것보다 더 나은 레이아웃 유동성을 제공합니다. 따라서 웹 페이지나 웹 응용 프로그램의 주요 영역에 대해 공간을 분할하고 크기, 위치 및 계층과 관련하여 HTML 컨트롤의 파트 간 관계를 정의할 수 있습니다. 그러면 고정된 레이아웃을 만들 필요가 없습니다. 고정된 레이아웃에서는 브라우저 창 내의 사용 가능한 공간을 활용할 수 없습니다. 격자를 사용하면 요소를 열과 행으로 정렬할 수 있지만 격자에는 콘텐츠 구조가 없기 때문에 HTML 테이블에서는 불가능한 시나리오도 가능해집니다. 눈금을 미디어 쿼리와 함께 사용하면 장치 폼 팩터, 방향, 사용 가능한 공간 등의 변경에 맞춰 레이아웃을 더욱 원활하게 조정할 수 있습니다. 그리드 컨트롤은 가로 및 세로 레이아웃을 제어하므로 최상위 앱 레이아웃에는 플렉스박스 대신 그리드를 사용하는 것이 좋습니다.
자세한 내용은 그리드 레이아웃을 참조하세요.
다중 열 레이아웃
다중 열 레이아웃은 임의 개수의 열에 대해 한 열에서 다른 열로 콘텐츠 흐름을 지원합니다.
다중 열 레이아웃을 사용하면 콘텐츠를 여러 열에 제공할 수 있으며, 이 때 열 사이에 간격과 규칙(선택 사항)이 유지됩니다. 브라우저 창의 크기에 따라 열의 수를 조정할 수도 있습니다. 다중 열 요소는 W3C에 의해 column-width 또는 column-count 속성이 auto가 아닌 요소로 정의되며, 따라서 다중 열 레이아웃을 위한 컨테이너로 작동합니다. 다중 열 레이아웃은 열 상자를 삽입하는데, 이 상자는 콘텐츠 상자와 콘텐츠 중간에 해당하는 새로운 유형의 컨테이너로 정의됩니다. 다중 열 요소는 여러 행의 열 상자를 사용할 수 있습니다. 행은 열 스패닝 요소(column-span:all이 지정된 요소)로 나뉩니다. 행은 다중 열 요소의 방향으로 정렬됩니다. 인접한 열 상자는 열 간격으로 구분되며, 선택적으로 열 규칙을 포함할 수 있습니다.
자세한 내용은 다중 열 레이아웃을 참조하세요.
영역 레이아웃
영역 레이아웃은 단일 콘텐츠 스트림을 받은 후 이 스트림을 HTML 템플릿에서 여러 빈 컨테이너로 분할할 수 있게 해주는 페이지 레이아웃 기능입니다. HTML 템플릿은 원래 콘텐츠가 거의 없이 주로 빈 컨테이너로 구성되는 문서입니다. 이 빈 컨테이너는 들어오는 콘텐츠에 특정 레이아웃을 제공하도록 크기와 위치가 조정됩니다. 영역을 사용하여 CSS(CSS 스타일시트)를 통해 명시적으로 크기 및 위치가 지정된 여러 열에 텍스트가 흐르도록 하여 신문이나 잡지 스타일 레이아웃을 만들 수 있습니다.
자세한 내용은 영역을 참조하세요.
Windows 8용 실습 랩
앱 레이아웃 및 기타 Windows 8의 주요 기능으로 작업해 보려면 Windows 8용 실습 랩을 다운로드하세요. 이러한 랩은 선택한 프로그래밍 언어(JavaScript 및 HTML 또는 C# 및 XAML)로 샘플 Windows 스토어 앱을 만들 수 있는 모듈식 단계별 소개를 제공합니다.