4부: 레이아웃 및 방향(HTML)

4부: 레이아웃 및 방향(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

Windows 스토어 앱용 UI 디자인은 사용자에게 콘텐츠를 구성하여 보여주는 것, 그리고 사용자가 콘텐츠에 대해 실행할 수 있도록 명령을 제공하는 것과 관련이 있습니다. UI 디자인에는 앱의 페이지 구성, 페이지 간 탐색, 각 페이지의 콘텐츠 및 명령 레이아웃이 포함됩니다.

이 자습서에서는 HTML 및 CSS(Cascading Style Sheets)로 사용자 인터페이스를 만드는 방법의 기본 사항에 대해 살펴봅니다. 기본 사항을 학습하기 위해 사용자가 사진 라이브러리에서 이미지를 선택할 수 있도록 한 다음 이미지와 함께 이미지 파일에 대한 정보를 표시하는 간단한 사진 뷰어를 만듭니다. 이 자습서의 경우 새 앱으로 처음부터 시작합니다.

  

자습서를 건너뛰고 바로 코드를 보려면 JavaScript 시작: 자습서 시리즈의 전체 코드(영문)를 참조하세요.

 

시작하기 전에...

1단계: Visual Studio에서 새 탐색 앱 만들기

Navigation App 템플릿을 사용하는 PhotoAppSample라는 새 앱을 만들어 보겠습니다. 방법은 다음과 같습니다.

  1. Microsoft Visual Studio Express 2013 for Windows를 시작합니다.
  2. 파일 메뉴에서 새 프로젝트를 선택합니다.

    새 프로젝트 대화 상자가 나타납니다.

  3. 왼쪽 창에서 설치됨, 템플릿을 차례로 확장한 다음 JavaScript를 확장하고 Windows 스토어 템플릿 유형을 선택합니다. (Visual Studio 2013 업데이트 2 이상을 사용하는 경우 JavaScript > 스토어 앱을 확장한 후 Windows Apps 템플릿 유형을 선택합니다.) 대화 상자의 가운데 창에 JavaScript용 프로젝트 템플릿 목록이 표시됩니다.

  4. 가운데 창에서 Navigation App 템플릿을 선택합니다.
  5. Name 텍스트 상자에 "PhotoAppSample"을 입력합니다.
  6. 솔루션용 디렉터리 만들기 확인란의 선택을 취소합니다.

    새 프로젝트 창

  7. 확인을 클릭하여 프로젝트를 만듭니다.

    Visual Studio에서 프로젝트를 만들고 솔루션 탐색기에 표시합니다.

    PhotoAppSample 프로젝트의 솔루션 탐색기

  8. 앱을 실행합니다.

    PhotoAppSample 앱

2단계: 컨트롤 및 콘텐츠 추가

  1. 솔루션 탐색기에서 home.html을 두 번 클릭하여 엽니다.
  2. 밝은 스타일시트로 전환합니다. 어두운 스타일시트에 대한 참조를 찾습니다.
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    이 참조를 다음과 같이 바꿉니다.

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  3. 페이지 제목을 "Photo app sample"로 변경합니다.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Photo app sample</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
        </div>
    </body>
    
    
  4. 기본 섹션의 콘텐츠를 이미지 및 이미지 정보 선택과 표시를 위한 요소로 바꿉니다. 다음 요소를 만듭니다.
    • 모든 항목을 포함하기 위한 div 요소
    • 사진을 선택하기 위한 button
    • 이미지 이름을 표시하기 위한 div 요소
    • 이미지 및 이미지 정보를 포함하기 위한 div 요소(이 컨테이너는 나중에 형식 지정을 지원하는 데 사용됨)
    • 이미지를 표시하기 위한 img 요소
    • 이미지 정보를 포함하기 위한 다른 div 요소(이 컨테이너도 나중에 형식 지정을 지원하는 데 사용됨)
    • 이미지 정보를 식별하기 위한 레이블 3개
    • 이미지 정보를 표시하기 위한 div 요소 3개

    다음은 업데이트된 태그입니다.

    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Photo app sample</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div id="contentGrid">
                    <button id="getPhotoButton">Get photo</button>
                    <div id="imageName" class="pageSubheader">Image name</div>
    
                    <div id="imageGrid">
                        <img id="displayImage" src="#"  />
                        <div id="imageInfoContainer">
                            <label for="fileName">File name:</label>
                            <div id="fileName">File name</div>
                            <label for="path">Path:</label>
                            <div id="path">Path</div>
                            <label for="dateCreated">Date created:</label>
                            <div id="dateCreated">Date created</div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </body>
    
    
  5. 앱을 실행합니다.

    PhotoAppSample 앱

    아직은 앱처럼 보이지 않습니다. 다음 단계에서 요소를 그리드 레이아웃으로 정렬합니다.

3단계: 기본 콘텐츠 그리드 정의

과거에는 HTML 테이블을 페이지 레이아웃에 사용하는 것이 일반적이었습니다. 이제 CSS에서 그리드 레이아웃유연한 상자("플렉스박스") 레이아웃을 제공합니다. 이러한 레이아웃 시스템은 기존의 HTML 테이블보다 많은 기능을 제공하며 더 유연합니다.

이 자습서에서는 그리드 레이아웃을 사용합니다. 그리드 레이아웃을 통해 요소를 열과 행에 정렬할 수 있습니다.

그리드 레이아웃을 만들려면 컨테이너 요소(예: div)를 만들고 해당 표시 속성을 "-ms-grid"로 설정합니다.


<div style="border: 1px solid gray; width: 800px; display: -ms-grid">
    <p style="margin: 2px; border: 1px solid gray;">Child element 1</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 2</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 3</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 4</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 5</p>
</div>

그리드 레이아웃에서 트랙(열과 행)을 지정합니다. -ms-grid-columns-ms-grid-rows 속성을 사용하여 열 및 행 수와 크기를 지정합니다. 다음을 사용하여 열과 행(통칭하여 트랙이라고 함)의 크기를 조정할 수 있습니다.

  • 표준 길이 단위(예: 픽셀)
  • 개체의 너비(열) 또는 높이(행) 비율
  • 열의 너비 또는 행의 높이가 내부 항목에 따라 지정됨을 나타내는 auto 키워드
  • 자식 요소의 최소 너비 또는 높이가 너비 또는 높이로 사용됨을 나타내는 min-content 키워드
  • 자식 요소의 최대 너비 또는 높이가 너비 또는 높이로 사용됨을 나타내는 max-content 키워드
  • 사용 가능한 공간이 있을 경우 너비 또는 높이가 a에서 b 사이임을 나타내는 minmax(a, b) 키워드
  • 사용 가능한 공간을 분수 값에 따라 열 또는 행에 나누어야 함을 나타내는 분수 단위(fr)

이 예제에서는 픽셀, auto 키워드 및 분수 단위를 사용하여 그리드의 열과 행 크기를 설정합니다.


<div style="border: 1px solid gray; width: 800px; display: -ms-grid
            -ms-grid-columns: auto 100px 1fr 2fr; 
            -ms-grid-rows: 50px auto">
    <p style="margin: 2px; border: 1px solid gray;">Child element 1</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 2</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 3</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 4</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 5</p>
</div>

이 그리드에는 네 개의 열이 있고 각 열은 아래에 설명된 대로 표시됩니다.

  • 열 1(auto 키워드): 열이 열 콘텐츠에 맞게 조정됩니다.
  • 열 2("100px"): 열이 100픽셀 너비입니다.
  • 열 3("1fr"): 열이 남은 공간의 1개 분수 단위를 차지합니다.
  • 열 4("2fr"): 열이 남은 공간의 2개 분수 단위를 차지합니다.

이 그리드에는 총 3개의 분수 단위—가 있으므로 열 3에 남은 공간의—1/3(3개 분수 단위 중 1개 분수 단위)이 할당됩니다. 열 4에는 남은 공간의 2/3가 할당됩니다.

마찬가지로, 이 그리드에는 두 개의 행이 있고 각 행은 아래에 설명된 대로 표시됩니다.

  • 행 1("50px"): 행이 50픽셀 높이입니다.
  • 행 2(auto 키워드): 행이 행 콘텐츠에 맞게 조정됩니다.

자식 항목을 그리드에 배치하려면 -ms-grid-column-ms-grid-row 속성을 사용하여 각 항목의 열과 행을 지정합니다.


<div style="border: 1px solid gray; width: 800px; display: -ms-grid; 
            -ms-grid-columns: auto 100px 1fr 2fr; 
            -ms-grid-rows: 50px auto">
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 1; 
                -ms-grid-row: 1">Child element 1</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 2; 
                -ms-grid-row: 1">Child element 2</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 3; 
                -ms-grid-row: 1">Child element 3</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 4; 
                -ms-grid-row: 1">Child element 4</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 1; 
                -ms-grid-row: 2">Child element 5</p>
</div>

그리드 레이아웃

그리드 레이아웃 사용의 기본 사항을 알아보았으므로 이제 그리드 레이아웃을 사용하도록 앱을 업데이트하겠습니다.

JJ841108.wedge(ko-kr,WIN.10).gif기본 콘텐츠 그리드를 정의하려면

  1. 솔루션 탐색기에서 home.css를 두 번 클릭하여 엽니다. 파일의 첫 번째 스타일인 .homepage section[role=main]은 기본 섹션의 여백을 정의합니다. 지금은 여백 설정을 제거하고 스타일을 비워 두겠습니다.
    
    .homepage section[role=main] {
        
    }
    
    
  2. 기본 그리드 컨테이너를 설정하겠습니다. home.html에는 contentGrid라는 div 요소가 포함되어 있습니다. 이 요소가 최상위 그리드가 됩니다.

    home.css 파일을 열고 .homepage section[role=main]의 스타일을 따라 contentGrid의 스타일을 만듭니다. 표시 속성을 -ms-grid로 설정하고 열 1개와 행 3개를 지정합니다. 첫 번째 행을 50픽셀, 두 번째 행을 70픽셀, 세 번째 행을 auto로 설정합니다. 위쪽 여백으로 20픽셀, 왼쪽 및 오른쪽 여백으로 120픽셀을 지정합니다.

    
    #contentGrid {
        display: -ms-grid; 
        -ms-grid-rows: 50px 70px auto; 
        margin: 20px 120px 0px 120px;
    }
    
    
  3. 콘텐츠 그리드에는 getPhotoButton, imageNameimageContainer의 3개 요소가 있습니다. 각 요소의 스타일을 정의하고 콘텐츠 그리드의 첫 번째, 두 번째 및 세 번째 행에 놓습니다.

    getPhotoButton 스타일을 업데이트할 때 높이를 20픽셀로 지정하겠습니다.

    
    #getPhotoButton {
        -ms-grid-row: 1;
        width: 120px;
        height: 20px;
    }
    
    #imageName {
        -ms-grid-row: 2;
    }
    
    #imageGrid {
        -ms-grid-row: 3; 
    }
    
    
  4. pageSubheader 클래스의 스타일을 정의합니다.
    
    .pageSubheader {
        font-family: 'Segoe UI Light';
        font-size: 20px;
        vertical-align: bottom;
        margin: 0px 0px 40px 0px;
    }
    
    
  5. 앱을 실행합니다.

    기본 콘텐츠 그리드를 추가한 후의 PhotoAppSample

기본 콘텐츠 그리드를 정의했습니다. 이제 콘텐츠가 3개의 행으로 나뉩니다. 행의 윤곽선을 볼 수 있다면 다음과 같이 보일 것입니다.

윤곽선이 표시된 콘텐츠 그리드 행이 있는 PhotoAppSample

4단계: 페이지의 나머지 부분에 대한 레이아웃 정의

기본 콘텐츠 그리드를 만들었으므로 이제 앱의 나머지 부분에 대한 레이아웃을 완료하겠습니다.

JJ841108.wedge(ko-kr,WIN.10).gif페이지의 나머지 부분에 대한 레이아웃을 정의하려면

  1. 이미지 및 이미지 정보에 대한 그리드를 정의합니다. home.css를 열고 마지막 단계에서 imageGrid에 대해 만든 스타일을 업데이트합니다. imageGrid를 열이 2개인 그리드로 설정합니다. 각 열의 너비를 auto로 설정합니다.
    
    #imageGrid {
        -ms-grid-row: 3; 
        display: -ms-grid;
        -ms-grid-columns: auto auto;
    }
    
    
  2. imageGrid의 스타일을 따라 displayImage 요소의 스타일을 만듭니다. imageGrid의 첫 번째 열에 표시되게 하고 width를 375픽셀, max-height를 375픽셀로 설정한 다음 검은색 테두리를 지정하고 배경색을 "회색"으로 설정합니다.
    
    #displayImage {
        -ms-grid-column: 1;
        width: 375px;
        max-height: 375px; 
        border: 1px solid black;
        background-color: gray; 
    
    }
    
    
  3. imageInfoContainer 요소의 스타일을 만듭니다. imageGrid의 두 번째 열에 표시되게 하고 왼쪽 여백을 20픽셀로 지정합니다.
    
    #imageInfoContainer {
        -ms-grid-column: 2;
        margin-left: 20px; 
    }
    
    
  4. imageInfoContainer 요소 안에 있는 div 요소의 스타일을 만듭니다. 왼쪽 여백을 20픽셀, 아래쪽 여백을 40픽셀로 지정하고 너비를 400픽셀로 설정한 다음 word-wrap을 "break-word"로 설정합니다.

    
    #imageInfoContainer > div {
        margin-left: 20px;
        margin-bottom: 40px;
        width: 400px; 
        word-wrap: break-word;
    }
    
    
  5. 앱을 실행합니다.

    레이아웃이 추가된 PhotoAppSample

5단계: 다양한 방향 및 뷰에 맞게 페이지 레이아웃 조정

지금까지 가로 방향에서 전체 화면을 볼 수 있도록 앱을 디자인했습니다. 그러나 Windows 스토어 앱은 여러 방향과 레이아웃에 맞게 조정되어야 합니다. 여기에서는 모든 해상도와 방향에서 앱을 보기 좋게 표시하는 방법에 대해 알아봅니다.

다양한 뷰에서 앱이 어떻게 표시되는지 확인하는 가장 쉬운 방법은 Blend for Microsoft Visual Studio 2013을 사용하는 것입니다. Blend는 UI를 미리 보고 쉽게 수정할 수 있는 비주얼 디자이너를 제공합니다. 한번 해 보세요.

  1. Blend를 시작합니다.
  2. 파일 메뉴에서 Open Project/Solution(프로젝트/솔루션 열기)을 선택합니다.
  3. Open Project(프로젝트 열기) 대화 상자에서 PhotoAppSample 앱이 포함된 위치로 이동하고 솔루션 파일을 선택한 다음 Open(열기)을 클릭합니다.

Blend 환경은 Microsoft Visual Studio와 많이 다릅니다.

Visual Studio용 Blend에서의 PhotoAppSample

상위 수준에서 Blend 작업 영역을 살펴보겠습니다. 작업 영역의 가운데에서 시작하겠습니다.

Blend의 가운데 작업 영역

대체로 가운데 패널에는 아트보드가 표시됩니다. 아트보드에서 대부분의 시각적 레이아웃 작업이 수행됩니다. 응용 프로그램 영역의 프레임은 시각적 태블릿 장치에서 지정됩니다.

아트보드 아래에는 HTML 및 CSS 코드가 있습니다. 현재 뷰(분할 뷰라고 함)에는 코드와 아트보드가 둘 다 표시됩니다. 아트보드 패널의 오른쪽 위에 있는 단추를 클릭하여 다양한 뷰(디자인, 코드분할)를 전환할 수 있습니다.

아트보드 패널

이제 가운데 작업 영역을 둘러싸는 일부 패널을 살펴보겠습니다.

패널Image설명
Projects(프로젝트)

Blend의 Projects(프로젝트) 패널

작업 영역의 왼쪽 위에는 Projects(프로젝트) 패널이 있습니다.

Projects(프로젝트) 패널은 Visual Studio의 솔루션 탐색기와 유사합니다. 파일을 열고 새 항목을 추가하는 데 사용할 수 있습니다.

Live DOM

Blend의 Live DOM(실시간 DOM) 패널

Projects(프로젝트) 패널 아래에는 Live DOM(실시간 DOM) 패널이 있습니다.

Live DOM(실시간 DOM) 패널에는 디자인 중인 앱의 구조가 표시되며 스타일을 지정할 요소를 선택할 수 있습니다. 무엇보다도, Live DOM(실시간 DOM) 뷰는 HTML 태그에 선언된 요소 및 동적으로 생성된 요소의 변경을 포함하여 앱 상태가 변경될 때 자동 및 동적으로 업데이트됩니다.

CSS 속성

Blend의 CSS Properties(CSS 속성) 패널

CSS Properties(CSS 속성) 패널에서는 아트보드나 Live DOM(실시간 DOM) 패널에서 선택된 HTML 요소의 CSS 속성을 보고 수정할 수 있습니다.

Style Rules(스타일 규칙)

Blend의 Style Rules(스타일 규칙) 패널

Style Rules(스타일 규칙) 패널에는 현재 문서에 연결된 모든 스타일시트와 스타일시트에 정의된 모든 스타일이 나열됩니다.

장치Blend의 Device(장치) 패널

Device(장치) 패널에서는 앱에 대한 표시, 뷰 및 기타 표시 옵션을 선택할 수 있습니다.

 

장치 패널을 사용하여 앱이 세로 방향에서 어떻게 표시되는지 살펴보겠습니다.

장치 패널에서 세로(세로 뷰 단추) 단추를 클릭합니다. 디자이너가 변경되어 세로 뷰를 시뮬레이트합니다.

사용자가 이 앱을 세로 방향으로 회전하면 앱은 다음과 같이 보입니다. 이제 앱이 세로 모드에서 추가로 사용 가능한 세로 공간을 활용할 수 있도록 몇 가지 조정 작업을 하겠습니다.

세로 방향의 PhotoAppSample

JJ841108.wedge(ko-kr,WIN.10).gif세로 뷰를 조정하려면

  1. 장치 패널에서 세로(세로 뷰 단추) 뷰 단추를 클릭하여 세로 뷰를 표시합니다.
  2. Style Rules(스타일 규칙) 패널에서 home.css 항목을 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 Add At-Rule(At-Rule 추가)... > Add @media rule(@media 규칙 추가)을 선택합니다.

    Blend Style Rules(스타일 규칙) 패널

  3. Add @media Rule(@media 규칙 추가) 대화 상자가 나타납니다. screen and (orientation: portrait)를 선택하고 OK(확인)를 클릭합니다.

    Add @media Rule(@media 규칙 추가) 대화 상자

  4. 아직 확장되지 않은 경우 home.css 항목을 확장합니다. 방금 만든 @media screen and (orientation: portrait) 항목을 마우스 오른쪽 단추로 클릭하고 Add Style Rule(스타일 규칙 추가)을 선택합니다.

    스타일 규칙 추가

    Blend가 .newStyle이라는 스타일을 만듭니다.

  5. .newStyle을 선택하고 이름을 ".homepage section[role=main]"으로 바꿉니다. 이 스타일을 선택합니다.

  6. CSS Properties(CSS 속성) 패널에서 Layout(레이아웃) 섹션을 확장합니다. 왼쪽 여백을 0픽셀로 설정합니다.

    Blend의 CSS Properties(CSS 속성) 패널

  7. Style Rules(스타일 규칙) 패널에서 @media screen and (orientation: portrait) 항목 옆에 있는 Add New Style(새 스타일 추가) 단추(Blend의 Add New Style(새 스타일 추가) 단추)를 클릭합니다.
  8. 새 스타일 이름을 "#imageGrid"로 설정하고 선택합니다.
  9. CSS Properties(CSS 속성) 패널에서 Grid(그리드) 섹션을 확장합니다. -ms-grid-columns를 "auto"로 설정하고 -ms-grid-rows를 "auto auto"로 설정합니다.

    imageGrid 요소의 그리드 스타일

  10. Style Rules(스타일 규칙) 패널에서 @media screen and (orientation: portrait) 항목 옆에 있는 Add New Style(새 스타일 추가) 단추(새 스타일 단추 추가)를 다시 클릭합니다. 이 스타일의 이름을 "#imageInfoContainer"로 지정하고 선택합니다.
  11. CSS Properties(CSS 속성) 패널에서 Grid(그리드) 섹션을 확장합니다. -ms-grid-column을 "1"로, -ms-grid-row를 "2"로 설정합니다.

    imageInfoContainer 요소의 그리드 스타일

  12. Layout(레이아웃) 섹션을 확장합니다. 위쪽 여백을 "20px", 왼쪽 여백을 "0px"로 설정합니다.

    imageInfoContainer 요소의 레이아웃 스타일

    업데이트된 CSS는 다음과 같이 보입니다.

    
    
    @media screen and (orientation: portrait) {
    	.homepage section[role=main] {
    		margin-left: 0px;
    	}
    
    	#imageGrid {
    		-ms-grid-columns: auto;
    		-ms-grid-rows: auto auto;
    	}
    
    	#imageInfoContainer {
    		-ms-grid-column: 1;
    		-ms-grid-row: 2;
    		margin-top: 20px;
    		margin-left: 0px;		
    	}
    }
    
    
    
  13. Ctrl + S를 눌러 작업을 저장합니다.
  14. 앱을 실행합니다. 이제 앱이 세로 뷰에서 다음과 같이 보입니다.

    세로 뷰의 앱

요약

축하합니다. 네 번째 자습서를 마쳤습니다! 그리드 레이아웃을 사용하고 다양한 방향의 스타일을 만드는 방법을 알아보았습니다. 또한 Blend를 사용하여 UI를 디자인하는 방법을 알아보았습니다.

샘플 다운로드

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 이 경우 JavaScript 시작 샘플을 다운로드(영문)하세요.

다음 단계

이 자습서 시리즈의 다음 부분에서는 보다 복잡한 앱을 만드는 방법에 대해 알아봅니다. 5부: 파일 액세스 및 선택기로 이동합니다.

관련 항목

JavaScript 시작: 자습서 시리즈의 전체 코드
HTML, CSS 및 JavaScript를 사용하여 Windows 8 앱 프로그래밍(전자책)

 

 

표시:
© 2016 Microsoft