Categorygrid layout (6)

[CSS] 5. fr 단위 대하여

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.fr?fr이란 유연한 크기를 갖는 단위입니다.그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다..grid {    display: grid;    grid-template..

[CSS] 4. Grid Name을 이용한 Grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.Grid name을 이용한 Grid 나누기보기이번 예제에서는 grid css 중 grid-template-columns와 grid-template-rows를 사용합니다.여기에 Grid Name을 할당하여 레이아웃을 나눠보도록 하겠습니다.html element 설정아래와 같은 class를 가진 element를 생성해 줍시다.<body..

[CSS] 3. fr 단위를 이용하여 grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container {    display: grid;    height: 100vh;    grid-template-col..

[CSS] 2. grid-column, grid-row

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.grid-column, grid-row를 이용하여 grid 나누기grid-column과 grid-row를 이용하여 레이아웃을 나누는 법을 알아보겠습니다.우선 기본적인 grid css를 적용해 줍시다.보기.container {    display: grid;    grid..

[CSS] 1. grid-area를 이용한 Grid Layout

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.grid-area를 이용한 Grid Layout첫번째 파트입니다.간단하게 그리드를 구현해보겠습니다.아래와 같은 Grid Layout으로 시작해봅시다.보기index.html<!DOCTYPE html><html lang="en"><head>    <meta cha..

[CSS] 0. CSS Grid Layout 시작하기 & 목차

시작하며CSS Grid 관련 내용은 아래 Github에서도 보실 수 있습니다.Github 바로가기CSS Grid?우리는 지금까지 일반적으로 그리드를 구현할 때 라이브러리를 사용하곤 했습니다.ex) Bootstrap, fancyGrid 등하지만 CSS에 공식 GRID 지원 기능이 있습니다.다만 문제라면 Firefox 52, Chrome 57이상 버전의 브라우저를 사용하거나 크롬의 flag 기능을 이용해야 합니다.이렇게 보니 ..