요소는 아무런 의미를 가지지 않는 요소로 적합하지 않습니다. 만약 \
요소를 사용하고자 한다면 img 역할(role)을 부여해 사용하길 권합니다.
```markup
```
{% endhint %}
이어서 배경 이미지를 각 요소를 식별하는 선택자를 사용하여 설정합니다.
```css
.grid-item[class*="img-"] { background-size: cover; }
.grid-item.img-1 { background: "url(wooden.jpg)"; }
.grid-item.img-2 { background: "url(speaker.jpg)"; }
.grid-item.img-3 { background: "url(waves.jpg)"; }
```
### 이미지 배치
그리드 라인의 시작/끝을 기준으로 각 이미지를 적정 위치에 배치 합니다.
1번째 이미지는 1열 - 3열에 위치합니다.
```css
.grid-item.img-1 {
grid-column-start: 1;
grid-column-end: 3;
}
```
`span` 문법을 사용하면 다음과 같이 작성할 수 있습니다.
```css
.grid-item.img-1 {
grid-column-start: 1;
grid-column-end: span 2;
}
```
속기형 문법을 사용하면 다음과 같이 작성합니다.
```css
.grid-item.img-1 {
grid-column: 1 / 3; /* 또는 grid-column: 1 / span 2; */
}
```
그리고 2행 - 5행에 위치합니다. 코드는 다음과 같이 작성합니다.
```css
.grid-item.img-1 {
grid-row-start: 2;
grid-row-end: 5;
}
```
또는
```css
.grid-item.img-1 {
grid-row-start: 2;
grid-row-end: span 3;
}
```
혹은
```css
.grid-item.img-1 {
grid-row: 2 / span 3; /* 또는 grid-row: 2 / 5; */
}
```
### 콘텐츠 추가 및 배치
`.asymmetrical-grid` 그리드 컨테이너 요소 내부에 다음과 같이 텍스트 콘텐츠를 추가하는 코드를 작성합니다.
```markup
```
다음 단계로 이미지를 배치 했던 것처럼 텍스트 콘텐츠를 그리드 라인을 기준으로 하여 적정 위치에 배치합니다.
```css
.strapline {
grid-column: 3 / span 3;
grid-row: 2 / span 1;
}
.cta-wrapper {
grid-column: 4 / span 2;
grid-row: 4 / span 2;
}
```
### `z-index` 설정
각 요소가 겹쳐 배치 되면, 나중에 마크업 된 요소가 위에 배치 됩니다. `.img-1`을 `.img-2` 보다 위에 배치 되게 하려면 `z-index` 속성을 사용해 정수 값을 설정합니다.
```css
z-index: 10;
```
### 그리드 가이드
Firefox 브라우저 개발도구를 사용하면 보다 풍부한 기능을 사용해 CSS Grid 레이아웃을 분석할 수 있습니다.
Rules 탭의 grid 아이콘을 클릭하면 브라우저 화면에 시각적으로 Grid가 오버레이 되어 표시 됩니다.
### 콘텐츠 스타일링
`` 내부에 Google 웹폰트 [Open Sans](https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans), [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)를 호출하는 코드를 작성합니다.
```markup
```
디자인을 참고하여 콘텐츠 영역을 스타일링 하는 코드를 다음과 같이 추가합니다.
```css
body {
font: 1em/1.7 "Open sans", sans-serif;
color: #292929;
}
.strapline {
margin: 0 0 2em 0;
font: italic 1.1em/2 "Playfair Display", serif;
}
.cta h1 {
position: relative;
margin: 0 0 20px 0;
font: bold 6em/1 "Playfair Display", serif;
}
```
버튼 요소 또한 스타일 코드를 추가합니다.
```css
.button {
display: inline-block;
padding: .8em 1.5em;
text-decoration: none;
background: #292929;
color: white;
}
.button:hover {
background: #000;
}
```
이어서 `.strapline` 텍스트를 가운데 정렬하고, `.cta-wrapper`에 패딩을 설정해 레이아웃을 조정합니다.
### 장식 추가 및 배치
`.strapline` 요소에 `::before` 가상 요소(pseudo element)를 사용해 장식 이미지를 추가 합니다.
```css
.strapline {
position: relative;
margin-top: 100px;
}
.strapline::before {
content: "";
position: absolute;
top: -3em;
left: 40%;
width: 20%;
height: 0.5em;
background: url("wavy.svg") repeat-x;
background-size: cover;
}
```
.cta h1 요소 옆에 위치한 왕관 배지 또한 마찬가지 방법을 사용해 추가 배치 합니다.
```css
.cta h1::before {
content: '';
position: absolute;
left: -120px;
top: 0;
height: 1em;
width: 1em;
background: url(badge.svg) no-repeat center center;
background-size: 80%;
}
```
물결, 왕관 장식이 모두 추가하면 완성입니다.
## 반응형 뷰
작은 화면에서는 다른 레이아웃을 제공하고 싶다면 미디어 쿼리를 사용해 화면 뷰를 변경해줄 수 있습니다. 모바일에서는 2열의 정형 그리드를 사용하고, `768px` 이상 화면 뷰에서는 6열의 비 정형 그리드를 사용하도록 설정할 수 있습니다.
```css
.asymmetrical-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 48em /* 768px */) {
.asymmetrical-grid {
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
}
```
## 크로스 브라우징 (IE)
IE를 제외한 모던 브라우저는 [@support](https://caniuse.com/#search=support)를 사용할 수 있습니다. 즉, IE 와 다른 브라우저를 구분해 코드를 나눌 수 있습니다. 이 방법을 사용해 `float` 또는 `position` 등을 사용해 IE 에서도 레이아웃이 무너지지 않게 만들 수 있습니다.
방법은 다음과 같이 코드를 작성해 IE와 모던 브라우저에 적용되는 코드를 나눕니다.
```css
/* IE 지원 Fallback */
.grid-item.img-1 { float: left; }
/* IE를 제외한 모던 브라우저 적용 */
@support (display: grid) {
.asymmetrical-grid {
display: grid;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
}
```
하지만 이 방법은 IE를 위한 별도의 레이아웃 코드가 필요해 제작자를 피곤하게 합니다. Grid 문법 코드만 사용해 IE 브라우저에서도 레이아웃이 무너지지 않게 하려면 MS 접두사(`-ms-`) 문법이 추가적으로 필요합니다. 다행히 [CSS Grid ProjectKit for IE](/css-grid/css-grid-for-ie.md#projectkit) 도구를 사용하면 IE를 위한 코드를 자동으로 생성해줍니다.
```css
.asymmetrical-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
-ms-grid-rows: 100px auto 15px auto auto;
grid-template-rows: 100px auto 15px auto auto;
}
.grid-item.img-1 {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / 3;
-ms-grid-row: 2;
-ms-grid-row-span: 3;
grid-row: 2 / span 3;
}
.strapline {
-ms-grid-column: 3;
-ms-grid-column-span: 3;
grid-column: 3 / span 3;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2 / span 1;
}
.cta-wrapper {
-ms-grid-column: 4;
-ms-grid-column-span: 2;
grid-column: 4 / span 2;
-ms-grid-row: 4;
-ms-grid-row-span: 2;
grid-row: 4 / span 2;
}
```
“Almost immediately, word spread of a Welshman who had built this incredible sounding sub bass system, and soon enough audiophiles began searching out these legendary subs that were built like no other.”
Gibraltar
Introducing 212/SE, our most powerful and agile subwoofer, designed exclusively for larger systems and rooms to allow superior state of the art speakers to spring to full voice.
View Product Details →