티스토리 뷰
CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes)
웹 레이아웃의 미래를 위한 퀵 튜토리얼
그리드 레이아웃은 웹사이트 디자인의 주요한 요소이고, CSS 그리드 모듈은 그것을 구현해줄 수 있는 가장 강력하고 쉬운 툴이다. 개인적으로, 부트스트랩같은 것들보다 훨씬 좋다. (그 이유는 여기)
또한 최근 이 모듈은 주요 브라우저(Safari, Chrome, Firefox, Edge)에서 기본적으로 지원하기때문에, 머지않아 모든 프론트엔드 개발자들은 이 기술을 배워야 한다고 생각한다.
이 글에서, 가능한 빠르게 CSS 그리드의 아주 기본적인 부분만 알아볼 것이다. 기초를 이해하는데 있어서 신경쓰지 말아야 될 부분은 제외한다.
CSS 그리드에 관한 무료 강좌도 만들었습니다. 이곳에서 모든 강좌를 보실 수 있습니다.
혹은, 이 글을 확인하세요. 이 강좌를 통해 어떤 것들을 배울지 알 수 있습니다.
첫번째 그리드 레이아웃
CSS 그리드의 두가지 주요 요소는 wrapper(부모 요소)와 items(자식 요소)이다. wrapper는 감싸주는 그리드이고 item들은 그리드 내부의 요소들이다.
부모 요소 내부에 6개의 자식 요소들이 있는 마크업을 살펴보자.
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
부모 div를 grid로 바꾸려면, display를 grid로 설정하면 된다.
.wrapper {
display: grid;
}
하지만, 아직 그리드가 어떻게 보여야 할지 지정하지 않았기 때문에 아무런 동작을 하지 않는다. 단순히 6개의 div들이 쌓여있는 모습으로 보여질 것이다.
(약간의 스타일링을 했지만 CSS 그리드와 관련된 작업은 아님)
Column과 row
두개로 나누기 위해서, column과 row를 정의해줘야한다. 3개의 column과 2개의 row를 만들어보자.
grid-template-row와 grid-template-column 프로퍼티를 사용할것이다.
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
grid-template-columns에 3개의 값, grid-template-rows에 2개의 값을 정의해주면 3개의 column과 2개의 row를 표현할 수 있다.
값들은 column의 너비(100px)와, row의 높이(50px)을 지정한다.
값에 따른 그리드의 표현을 제대로 이해 하기위해 이 예제를 살펴보자.
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}
코드와 레이아웃의 관계를 주목하자. 이 코드는 이렇게 보일 것이다.
아이템의 배치
다음으로, 아이템이 어떻게 배치 되는지에 대해 알아야 한다. 간단히 따라할 수 있기때문에, 레이아웃을 그리는데 큰 도움이 된다.
3x3 그리드를 만들어 보자. 이전 마크업을 그대로 사용한다.
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
이렇게 표현된다 :
주 : 3x3을 정의했지만 페이지에는 3x2만 보일 것이다. 이것은 그리드를 채우기 위해 단지 6개의 아이템만 사용되었기 때문이다. 만약 3개의 아이템을 더 사용한다면, 마지막 줄이 추가 될 것이다.
아이템의 위치와 사이즈를 변경하기 위해 grid-column과 grid-row 속성을 지정해준다.
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
아이템1을 첫번째 그리드 라인부터 마지막 4번째 라인까지로 정의했다. 다르게 말하면, 전체 row를 사용한다는 뜻이다. 이렇게 표현 된다 :
여기서, 단지 3개의 column만 가지고 있는데 왜 4로 지정했는지 의아한 독자들이 있을것이다. Grid line에 대해 설명한 아래 그림을 보면서 이해해보자.
이제 그리드의 모든 row를 사용하고 있음에 주목하라. 첫번째 아이템이 전체 row를 차지하면, 나머지 아이템들은 아래로 밀려난다.
더 간단한 방법으로도 구현할 수 있다 :
.item1 {
grid-column: 1 / 4;
}
이 개념을 명확히 이해하기 위해, 조금씩 바꿔보자.
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
이 코드는 실제로 이렇게 표현된다. 왜 이렇게 되는지 생각해보자. 어렵지 않을 것이다.
여기까지다!
원작자의 말 :
물론 우리가 아직 알아보지 않은 많은 개념들이 있습니다. 만약 그것들을 배우고 싶다면, 이메일 주소를 남겨주세요. 그러면 Scrimba에서 저의 무료 CSS 그리드 강좌를 시작할때 알려드리겠습니다.
만약 궁금한 점이 있다면, 댓글을 남겨주면 성심성의껏 답변해 드리겠습니다. 또는 트위터로 문의주세요.
또한, Flexbox에 대한 글도 게시했으니, 또 다른 멋진 CSS 모듈을 배우고 싶다면 클릭해주세요.
원본 : https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b122
'css' 카테고리의 다른 글
| 4가지 CSS 필터 정리 (1) | 2019.05.17 |
|---|---|
| CSS3 컨닝 페이퍼 : CSS3 Cheat Sheet (0) | 2018.01.25 |
| CSS Variables & Conditional Rules (0) | 2015.02.04 |
- Total
- Today
- Yesterday