CSS 그리드를 사용하여 적응 레이아웃을 만드는 방법

.NET Framework 3.0

웹 페이지 레이아웃에 관한 한 웹 개발자에게는 많은 옵션이 있습니다. 사용할 방법을 결정할 때의 중요한 고려 사항은 레이아웃이 서로 다른 장치, 방향 및 화면 크기에 적응할 수 있도록 하는 것입니다. 그리드 레이아웃은 고정된 공간, 브라우저 창 내에서 사용 가능한 공간, 또는 둘의 조합을 기반으로 웹 페이지의 주 영역 공간을 분할할 수 있는 새로운 레이아웃 방법입니다.

그리드 레이아웃을 사용하면 열과 행에 요소를 맞출 수는 있지만 콘텐츠 구조가 없으므로 HTML 또는 CSS 스타일 시트 테이블로는 불가능하거나 수행하기 아주 어려운 —이 문서에서 설명한 것과 같은— 시나리오 또한 사용할 수 있습니다. 또한 그리드 레이아웃을 미디어 쿼리와 함께 사용하면 장치 폼 팩터, 방향, 사용 가능한 공간 등의 변경에 맞춰 레이아웃을 더욱 원활하게 조정할 수 있습니다.

CSS 그리드 레이아웃 사양은 현재 W3C(World Wide Web 컨소시엄)에서 초안을 작성하는 중이며 공급업체 접두사가 붙은 형태로 Internet Explorer 10에서 부분적으로 지원됩니다. 지원되는 속성의 전체 목록은 MSDN에서 그리드 레이아웃을 참조하세요. 그리드 레이아웃 사양은 아직 개발 중이므로 Internet Explorer 10의 지원은 사양에서 설계한 내용과 정확히 일치하지 않을 수 있습니다.

여기서는 사진 갤러리에서 사진을 보는 데 사용할 간단한 라이트 박스 페이지를 만드는 과정을 안내합니다. 여기서는 그리드 레이아웃을 사용하여 페이지의 콘텐츠를 구성하고, 미디어 쿼리를 사용하여 세로 또는 가로 방향으로 볼 레이아웃을 최적화합니다.세로 레이아웃에서는 브라우저 창의 높이가 너비보다 크고, 가로 방향에서는 브라우저 창의 너비가 높이보다 큽니다.

이 항목의 내용은 다음과 같습니다.

페이지 디자인

이 라이트 박스 페이지가 새 Windows UI 환경에서 스크롤하지 않고 Internet Explorer의 전체 화면을 차지하게 하려고 합니다. 물론 이 페이지는 데스크톱용 Internet Explorer에서도 사용할 수 있어야 하며 해당 브라우저의 크롬에도 잘 맞아야 합니다.

다음 스케치는 우리가 원하는, 가로 방향일 때의 라이트 박스 페이지의 모양을 나타낸 것입니다. 여기서는 16:9 가로 세로 비율로 전체 와이드 화면 디스플레이를 차지하는 브라우저를 가정하여 스케치했습니다.

로고, 설명 텍스트, 큰 사진 및 여러 개의 사진 미리 보기 섹션이 있는 사진 갤러리 라이트 박스의 모형

이 스케치에서 A는 로고 영역, B는 사진 자막 또는 설명 영역, C는 주 사진 보기 영역, D는 컬렉션에 있는 다른 사진의 미리 보기 영역입니다.

라이트 박스는 전체 화면에서 보도록 디자인되므로 다른 화면 크기를 고려해야 합니다. 페이지의 포커스는 큰 사진에 있습니다. 따라서 화면 크기가 커지면 사진 패널(C)이 확장되도록 합니다. 단, 그와 동시에 패널 A가 확장되거나, 패널 B가 가로 방향으로 확장되거나, 패널 D가 세로 방향으로 확장되지 않아야 합니다.

그리드 구성

이 시나리오는 그리드 레이아웃에 이상적입니다. 그리드를 구성하려면 점선을 추가하여 아직 보이지 않는 그리드 선을 완성해야 합니다. 페이지 요소 사이에 여백을 넣고 디자인이 너무 복잡해 보이지 않도록, 약간의 여백을 추가할 것입니다. 너비 또는 높이가 고정된 열과 행을 추가하면 간단히 여백을 만들 수 있습니다.

이 이미지에서 자주색 점선은 그리드 요소 또는 그리드 레이아웃 컨테이너를 나타냅니다. 빨간색 점선은 그리드 선을 나타냅니다.

앞의 이미지에서 전체 그리드 요소 주위에 자주색 점선이 추가되었고 열과 행이 배치되어야 할 위치를 나타내기 위해 빨간색 점선이 추가되었습니다.

이 그리드에는 총 5개의 행과 3개의 열이 있습니다.

  • 여백은 두 번째 및 네 번째 행과 두 번째 열입니다.
  • 첫 행과 마지막 행은 패널 A와 D의 고정된 높이를 고려하여 높이가 고정되어 있습니다.
  • 세 번째 행의 높이는 가변적이므로 레이아웃이 화면 크기에 맞춰 조정됩니다.
  • 첫 열은 패널 A와 B의 고정된 너비를 고려하여 너비가 고정되어 있습니다.
  • 마지막 열의 너비는 가변적이므로 레이아웃이 화면 크기에 맞춰 조정됩니다.

페이지 구조 구성

그리드 만들기를 시작해 보겠습니다. 먼저 기본 페이지 구조를 가진 간단한 HTML을 작성합니다. 섹션의 순서는 스케치에 표시되도록 할 순서와 반드시 같지 않아도 되며, 이는 그리드의 장점 중 하나입니다. DOM(Document Object Model)의 요소 순서를 원하는 대로 다시 지정할 수 있습니다.


<!DOCTYPE html>
<html>

<head>
<meta content="IE=10" http-equiv="X-UA-Compatible" />
<link href="photogallerystyles.css" media="screen" rel="stylesheet" type="text/css">
<style>
</style>
</head>

<body>

<div id="body">
  <div id="grid">
    <div id="text_box" class="orange">
      Text box</div>
    <div id="big_pic" class="red">
      <img id="mainphoto" alt="mainphoto" src="images/img1.jpg"></div>
    <div id="photos" class="blue">
      Photos</div>
    <div id="logo" class="green">
      <div id="logotype">
        CONTOSO<br>IMAGES</div>
      <div id="pagedesc">
        Lightbox</div>
    </div>
  </div>
</div>

</body>

</html>


그리드 요소 만들기 및 행과 열 지정

이제 그리드 요소를 만들고 행과 열을 지정해 보겠습니다.

먼저 해야 할 일은 display 요소를 추가하고 -ms-grid로 설정하는 것입니다. 이렇게 하면 그리드 요소가 만들어집니다.

그리드 요소에서 -ms-grid-columns 속성을 사용하여 공백으로 구분된 목록의 각 열 너비를 지정합니다. 마찬가지로, -ms-grid-rows 속성을 사용하여 공백으로 구분된 목록의 각 열 높이를 지정합니다.

ID가 "grid"인 요소의 경우 CSS는 다음과 같습니다.


#grid {
  height: calc(100vh - 65px);  /* 65px to account for scrollbar */;  
  display: -ms-grid;
  -ms-grid-columns: 200px 25px 1fr;
  -ms-grid-rows: 160px 25px 1fr 25px 200px; 
  border: 1px solid red;	      /* for a visual guide */
}

분수 단위에 대한 정보

사용 가능한 공간에 따라 그리드의 크기를 자체적으로 조정하도록, fr(분수 단위)을 사용합니다. 분수 단위의 크기는 사용 가능한 총 공간과 지정된 분수 단위의 총 수에 따라 다릅니다. 여기에 나오는 라이트 박스 예제 페이지에서는 분수 단위를 하나만 사용하지만 더 복잡한 레이아웃도 가능합니다. 예를 들어, 길이가 자동, 100픽셀, 분수 단위 하나, 분수 단위 2개로 지정된 4개의 열이 있다고 가정해 보세요. 열은 다음과 같이 나타납니다.

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

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

열과 행에 페이지 요소 할당

지금의 페이지 모양은 완벽한 상태가 아닙니다. 각 요소가 어떤 열에 가야 할지 정의하지 않았으므로 모든 페이지 요소가 서로 겹쳐 있습니다. 따라서 -ms-grid-row, -ms-grid-column, -ms-grid-row-span-ms-grid-column-span 속성의 조합을 사용하여 이러한 정의 작업을 수행합니다.

-ms-grid-row-ms-grid-column 속성은 페이지 요소에 적용될 경우 페이지 요소가 시작되는 그리드 셀을 지정합니다. 왼쪽에서 오른쪽, 위에서 아래로 쓰는 언어에서 -ms-grid-row 속성은 요소가 차지할 가장 윗 행을 지정합니다. 마찬가지로, -ms-grid-column 속성을 사용하여 요소가 차지할 가장 왼쪽 열을 지정합니다.

-ms-grid-row-span-ms-grid-column-span 속성은 페이지 요소에 적용될 경우 페이지 요소가 확장될 열 및 행의 수를 지정합니다.

그리드에서 정의된 열 또는 행 수를 초과하여 확장을 시도할 경우 다른 열 또는 행이 암시적으로 만들어지고 정의된 개수를 넘은 각 열 또는 행의 너비 또는 높이는 auto(콘텐츠에 맞춤)로 설정됩니다.


#text_box {
  -ms-grid-row: 3;
  -ms-grid-column: 1; 
  -ms-grid-row-span: 3;
  padding: 15px;
}
#big_pic {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
}
#photos {
  -ms-grid-row: 5; 
  -ms-grid-column: 3;
  padding: 15px;
}
#logo {
  -ms-grid-row: 1; 
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}


이러한 선택기와 다른 페이지 요소의 스타일링이 일부 추가된 페이지를 보려면 여기를 클릭하세요.

전체 화면 웹 페이지의 스크린샷. 로고를 위한 녹색 패널, 설명을 위한 주황색 긴 세로 패널, 사진 미리 보기를 위한 파란색 긴 가로 패널, 왼쪽 위에 구름 사진이 있는 중앙의 흰색 패널

그리드 항목 맞춤

현재의 페이지 모양도 좋지만 사진이 패널의 중앙에 오는 것이 이상적입니다. 이를 위해서 -ms-grid-row-align-ms-grid-column-align 속성을 사용할 것입니다. 이러한 속성은 각각 행 또는 열 내에서 항목을 맞추는 방법을 정의합니다. 여기서는 "big_pic"의 ID 선택기에서 이 두 속성을 모두 center으로 설정할 것입니다.


#big_pic { 
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
}


앞에 나온 이미지와 동일하지만, 사진 주위의 흰색 사각형이 조밀해졌고 사진도 패널의 중앙에 위치하고 있습니다.

이 버전의 페이지를 보려면 클릭하세요.

미디어 쿼리와 함께 그리드 사용

이 레이아웃은 가로 방향에서는 괜찮습니다. 보는 장치가 세로 방향이 되면 어떻습니까? 이 경우 미디어 쿼리를 사용할 수 있습니다.

미디어 쿼리를 사용하면 세로 레이아웃에 맞도록 레이아웃의 가로 세로 비율을 다시 정의할 수 있습니다. 세로 레이아웃 스타일을 스타일 시트에 추가하려면 먼저 미디어 쿼리 구문을 추가합니다.


@media all and (orientation: portrait) {

}

미디어 쿼리 구문에서 세로 방향은 너비가 높이보다 큰 페이지를 정의합니다. 반대로, 높이가 너비보다 크면 페이지가 가로 방향이 됩니다.

이제 새 그리드 레이아웃과 다른 페이지 요소에 대한 새 스타일 몇 가지를 추가하겠습니다. 미디어 쿼리의 중괄호 사이에 이 스타일을 추가합니다.


#grid {
	-ms-grid-columns: 150px 25px 1fr;
	-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
#text_box {
  -ms-grid-row: 1; 
  -ms-grid-column: 3;
  -ms-grid-row-span: 1;
}
#big_pic {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#photos {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}
#logotype {
  font-size: 15px;
}
#pagedesc {
  font-size: 12px;
}
#mainphoto {
  width: 100%; 
  border-width: 10px;
  border-color: white;
}


이제 완료된 페이지를 볼 수 있습니다. 세로 방향으로 돌려 페이지를 볼 수 있는 장치가 없으면 데스크톱용 Internet Explorer를 열고 너비가 높이보다 작도록 페이지 크기를 조정합니다.

동일한 사진 갤러리의 세로 보기입니다. 이제 사진이 화면의 대부분을 차지하며, 주황색 패널과 파란색 패널이 각각 사진의 위와 아래에 있습니다.

그리드를 사용하여 겹치는 요소 만들기

CSS 그리드는 페이지 레이아웃에 대한 가능성을 열어 줍니다. 예를 들어, 그리드를 사용하면 불투명도 속성과 결합될 경우 이미지 위에 반투명 텍스트 띠를 만들 수 있는 콘텐츠 오버레이를 손쉽게 만들 수 있습니다. 실행 중인 그리드 오버레이를 보기 위한 자세한 내용은 Internet Explorer 샘플 갤러리에서 CSS 그리드 오버레이 샘플을 참조하세요.

결론

지금까지 그리드 레이아웃의 가능성을 알아보고 미디어 쿼리와 함께 Grid 속성을 사용하는 방법에 대해 살펴보았습니다. 추가로 학습하려면 다음 섹션에 나오는 링크를 참조하세요.

관련 항목

Contoso 이미지 사진 갤러리
그리드 레이아웃
개발자용 Internet Explorer 10 가이드: 그리드 레이아웃
IE Blog: IE10 Platform Preview 및 적응 레이아웃을 위한 CSS 기능

 

 

표시:
© 2014 Microsoft. All rights reserved.