페이지 레이아웃

WPF에서 애플리케이션의 요소를 레이아웃하려면 Panel에 넣어야 합니다. 패널은 자식 요소의 배열을 제어하는 컨테이너 요소입니다. Angular에서 페이지 레이아웃과 자식 요소를 사용자 지정하려면 CSS를 사용해야 합니다. WPF에서 가장 인기 있는 패널 중 일부를 살펴보고 CSS로 비슷한 레이아웃을 어떻게 구현할 수 있는지 살펴보겠습니다.

StackPanel

​StackPanel은 해당 하위 요소를 가로 또는 세로 방향을 지정할 수 있는 단일 선으로 정렬합니다. StackPanel에 여러 개의 버튼을 추가하고 WPF에서 어떻게 보이는지 살펴보겠습니다.

<StackPanel>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
    <Button>4</Button>
    <Button>5</Button>
</StackPanel>
xml

Angular에서 비슷한 레이아웃을 구현하려면 CSS Flexbox 레이아웃을 사용할 수 있습니다. Flexible Box Layout Module은 유연한 반응형 레이아웃 구조를 설계할 수 있는 강력한 메커니즘입니다. Flexbox 레이아웃을 사용하려면 display 속성을 flex로 설정한 컨테이너를 정의해야 합니다. 또한 항목을 수직으로 쌓으려면 flex-direction 속성을 column으로 설정해야 합니다.

<div class="flex-container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>
html

.flex-container {
    display: flex;
    flex-flow: column;
}
css

브라우저의 최종 결과는 다음과 같습니다.

​flex-direction 속성의 기본값은 row 이며, 이는 WPF에서 가로 방향의 StackPanel과 동일합니다. Flexbox는 또한 항목을 각각 오른쪽에서 왼쪽으로, 아래에서 위로 쌓는 column-reverse​ ​row-reverse 및 열 역방향을 지원합니다.

WrapPanel

​WrapPanel 왼쪽에서 오른쪽으로 순차적인 위치에 하위 요소를 배치하여 콘텐츠를 포함 상자 가장자리의 다음 줄로 나눕니다. 후속 순서는 Orientation 속성 값에 따라 위에서 아래로 또는 오른쪽에서 왼쪽으로 순차적으로 발생합니다. WrapPanel에 여러 개의 버튼을 추가하고 WPF에서 어떻게 보이는지 살펴보겠습니다.

<WrapPanel>
    <WrapPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="150"></Setter>
        </Style>
    </WrapPanel.Resources>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
    <Button>4</Button>
    <Button>5</Button>
</WrapPanel>
xml

Angular에서 비슷한 결과를 얻기 위해 Flexbox 레이아웃을 다시 사용할 것입니다. StackPanel의 경우와 마찬가지로 display 속성을 flex로 설정해야 하지만 flex-wrap 속성도 wrap으로 설정해야 합니다.

<div class="flex-container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>
html

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

button {
    width: 150px;
}
css

브라우저의 최종 결과는 다음과 같습니다.

Orientation="Vertical"을 사용하여 WrapPanel과 유사한 결과를 얻으려면 flex-direction 속성을 column 설정해야 합니다. flex-flow 속성은 flex-direction 및 flex-wrap 속성을 모두 설정하기 위한 단축 속성입니다.

.flex-container {
    display: flex;
    flex-flow: row wrap;
}
css

Flexbox는 항목 정렬을 위해 몇 가지 추가 CSS 속성을 지원합니다. 이 튜토리얼에서 이에 대해 자세히 알아볼 수 있습니다.

Grid

​Grid 열과 행으로 구성된 유연한 그리드 영역을 정의합니다. Grid에 여러 개의 버튼을 추가하고 WPF에서 어떻게 보이는지 살펴보겠습니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Button Grid.RowSpan="2" Grid.ColumnSpan="2">1</Button>
    <Button Grid.Column="2">2</Button>
    <Button Grid.Row="1" Grid.Column="2">3</Button>
    <Button Grid.Row="2">4</Button>
    <Button Grid.Row="2" Grid.Column="1">5</Button>
    <Button Grid.Row="2" Grid.Column="2">6</Button>
    <Button Grid.Row="3" Grid.ColumnSpan="3">7</Button>
</Grid>
xml

Angular에서 행과 열이 있는 그리드 기반 레이아웃 시스템을 제공하는 CSS Grid Layout Module을 사용할 수 있습니다. Grid 레이아웃을 사용하려면 display 속성이 grid 또는 inline-grid로 설정된 컨테이너를 정의해야 합니다.

<div class="grid-container">
    <button class="button1">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="button7">7</button>
</div>
html

.grid-container {
    display: grid;
}
css

CSS 그리드 레이아웃은 Internet Explorer 11과 같은 이전 브라우저에서는 지원되지 않습니다.

이제 grid-template-columns 속성을 사용하여 그리드의 열을 정의해 보겠습니다.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}
css

너비가 auto 인 세 개의 열을 정의했습니다. 즉, 너비가 동일하다는 뜻입니다. WPF의 별 크기 조정과 유사하게 사용 가능한 공간을 분배하려면 CSS의 flex 크기 조정 단위 fr 사용할 수 있습니다. 다음 코드 조각은 두 개의 열을 정의합니다. 첫 번째 열은 사용 가능한 공간의 1배를 받고 두 번째 열은 사용 가능한 공간의 두 배를 받습니다.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
css

이제 grid-template-rows 속성을 사용하여 각각 높이가 50px인 행을 추가하겠습니다.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 50px 50px 50px 50px;
}
css

이제 애플리케이션을 열면 다음과 같습니다.

WPF와 CSS 그리드 사이의 한 가지 중요한 차이점을 볼 수 있습니다. WPF에서 Grid.Row 및 Grid.Column의 기본값은 0인 반면 CSS 그리드 레이아웃은 자동으로 사용 가능한 다음 행과 열을 하위 항목에 할당합니다.

이제 첫 번째와 일곱 번째 버튼에 열과 행 범위를 적용해 보겠습니다. 이러한 목적으로 grid-row 및 grid-column 속성을 사용합니다.

.button1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.button7 {
    grid-column: 1 / span 3;
}
css

먼저 시작 행/열을 지정한 다음 / 기호 뒤에 끝 행/열 또는 항목이 확장되어야 하는 행/열 수를 지정할 수 있습니다. WPF와 달리 CSS 그리드 열 번호 지정은 0부터 시작하지 않으며 첫 번째 행/열은 1입니다.

다음은 전체 CSS와 브라우저의 최종 결과입니다.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 50px 50px 50px 50px;
}

.button1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.button7 {
    grid-column: 1 / span 3;
}
css

​grid-row 및 grid-column 속성은 grid-row-start, grid-row-end, grid-column-start 및 grid-column-end 속성에 대한 약칭 속성입니다. 추가 리소스 섹션의 튜토리얼에서 CSS 그리드 컨테이너 및 항목 속성에 대해 자세히 알아볼 수 있습니다.

Additional Resources

• CSS 플렉스박스
• CSS 그리드 소개
• CSS 그리드 컨테이너
• CSS 그리드 항목

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular