웹 애플리케이션을 빌드할 때 가장 먼저 필요한 것 중 하나는 앱 콘텐츠를 레이아웃하는 방법입니다.
많은 디자이너가 사이트 또는 앱에 관계없이 가상의 그리드를 사용하여 콘텐츠를 배치합니다. CSS 그룹은 레이아웃을 더 쉽게 만들기 위해 노력해 왔으며, 그 일환으로 현재 브라우저에 등장하고 있는 CSS 그리드 레이아웃 모듈을 제작했습니다.
이 기능은 실험 플래그를 통해 Chrome에서 사용해 볼 수 있습니다. 또한 버전 10부터 IE에 구현되었으며 곧 대부분의 브라우저에 구현될 예정입니다.
핵심 요약
- CSS 그리드 레이아웃을 사용하면 레이아웃의 행과 열을 정의할 수 있습니다.
- 그리드는 사용 가능한 공간을 활용하도록 조정할 수 있습니다.
- 콘텐츠 순서가 그리드 컨테이너 표시 순서와 무관할 수 있음
- 미디어 쿼리를 기반으로 레이아웃을 변경할 수 있으므로 반응형 디자인이 더 쉬워집니다.
- 콘텐츠가 겹칠 수 있음 (다른 방법으로는 불가능한 레이아웃 사용 가능)
- 그리드 레이아웃이 빠름
다음은 CSS 그리드 레이아웃의 작동 방식을 자세히 설명하는 개요 동영상입니다 (슬라이드는 여기에서 확인).
사용해 보기
이제 Chrome에서 CSS 그리드 레이아웃을 쉽게 사용할 수 있습니다. 먼저 실험 플래그를 사용 설정하여 기능을 사용 설정해야 합니다.
먼저 chrome://flags URL을 로드하고 아래와 같이 실험용 웹 플랫폼 기능 사용 설정 옵션으로 아래로 스크롤합니다.
사용 설정을 클릭하여 플래그를 사용 설정하면 다음과 같이 브라우저를 다시 시작하라는 메시지가 표시됩니다.
이제 지금 다시 실행 버튼을 클릭하여 브라우저를 다시 시작하면 CSS 그리드 레이아웃을 사용해 볼 수 있습니다.
여러분의 의견을 공유해 주세요
CSS 그리드 레이아웃은 웹 콘텐츠를 위한 훌륭한 새로운 원시 형식이지만, 평소와 같이 개발자의 의견을 듣고자 합니다. 의견을 제공하는 방법에는 여러 가지가 있습니다. 여기에 댓글을 남기거나, 제목에 '[css-grid]'를 포함하여 W3C CSS 작업 그룹 목록에 메일을 보내거나, 버그를 신고하거나, 블로그에 글을 올리고 트윗으로 의견을 전달할 수 있습니다. 이 유용한 새 기능으로 멋진 레이아웃을 만들어 보시기 바랍니다.