재미있게 Grid를 마스터하는 - Grid Garden 3/3 (문제풀이 21~28)

이전 문제 풀이는 아래 링크를 참고해주세요.

문제 21

Grid 레이아웃에서 grid-template-columns 또는 grid-template-rows 속성에 같은 값이 반복적으로 나타날 때 repeat() 함수를 사용하면 코드를 간결하게 작성할 수 있습니다. 이 문제는 repeat() 함수를 사용하여 Grid 컨테이너의 열 구조를 효율적으로 정의하는 방법을 익히는 문제입니다.

repeat() 함수:

repeat(반복 횟수, 값) 형식으로 사용합니다.
반복 횟수에는 정수 값을 지정합니다.
값에는 열 또는 행의 크기를 지정합니다. fr, px, % 등 다양한 단위를 사용할 수 있습니다.

repeat()는 마치 코딩에서의 함수처럼 보이지 않나요?

#garden {
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
    grid-template-rows: 20% 20% 20% 20% 20%;
  }

문제 22

Grid 레이아웃에서 grid-template-columns 속성을 사용하여 열의 크기를 지정할 때, px, em, %, fr 등 다양한 단위를 사용할 수 있습니다. 각 단위는 고유한 특징을 가지고 있으며, 레이아웃 요구사항에 따라 적절한 단위를 선택하여 사용하면 됩니다.

단위별 특징:

px (픽셀): 고정된 크기를 지정합니다. 화면 해상도에 따라 크기가 변하지 않습니다.
em: 상대적인 크기를 지정합니다. 부모 요소의 글꼴 크기를 기준으로 크기가 계산됩니다.
% (백분율): 컨테이너 요소의 너비에 대한 비율로 크기를 지정합니다.
fr (fraction): 남은 공간을 비율에 따라 분할합니다.

문제 해결 팁:

문제에서 요구하는 레이아웃을 분석하고, 각 열의 크기를 어떤 단위로 지정할지 결정합니다.
고정된 크기가 필요한 경우 px을, 상대적인 크기가 필요한 경우 em 또는 %를, 남은 공간을 비율에 따라 분할하려는 경우 fr을 사용합니다.
필요에 따라 여러 단위를 혼합하여 사용할 수도 있습니다.

#garden {
    display: grid;
    grid-template-columns: 100px 3em 40%;
    grid-template-rows: 20% 20% 20% 20% 20%;
  }

문제 23

Grid 레이아웃에서 fr 단위를 사용하여 유연하게 열의 크기를 조절하는 방법을 익히는 문제입니다.

fr 단위:

fr 단위는 "fraction"의 약자로, Grid 컨테이너에서 남은 공간을 비율에 따라 분할하는 데 사용됩니다.
fr 단위는 다른 단위와 함께 사용하여 더욱 복잡한 레이아웃을 만들 수 있습니다.

문제 해결 팁:

레이아웃 분석: 문제에서 요구하는 레이아웃을 분석하고, 각 열이 컨테이너의 남은 공간을 어떤 비율로 차지해야 하는지 파악합니다.
fr 단위 적용: grid-template-columns 속성에 fr 단위를 사용하여 각 열의 크기를 지정합니다. 예를 들어, grid-template-columns: 1fr 2fr 1fr; 는 3개의 열을 만들고, 첫 번째와 세 번째 열은 남은 공간의 1/4, 두 번째 열은 남은 공간의 2/4를 차지하도록 합니다.
다른 단위와 혼합 사용: 필요에 따라 px, %, em 등 다른 단위와 fr 단위를 혼합하여 사용할 수 있습니다.

#garden {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
  }

문제 24

Grid 레이아웃에서 fr 단위를 사용하여 남은 공간을 유연하게 분할하는 방법을 보여줍니다.

핵심 개념:

fr 단위: Grid 컨테이너에서 남은 공간을 비율에 따라 분할하는 단위입니다. 예를 들어, 1fr은 남은 공간의 1/n (n은 fr 단위의 총합)을 의미합니다.

문제 분석:

Grid 컨테이너의 크기는 유동적으로 변할 수 있습니다.
각 열은 고정된 크기(예: px) 또는 비율(예: %)로 설정될 수 있습니다.
fr 단위는 남은 공간을 유연하게 분할하는 데 사용됩니다.

해결 방법:

고정 크기 또는 비율 열 설정: grid-template-columns 속성을 사용하여 고정 크기(px, em 등) 또는 비율(%)로 설정할 열을 지정합니다.
fr 단위 열 설정: 남은 공간을 분할할 열에 fr 단위를 지정합니다. 예를 들어, grid-template-columns: 100px 1fr 2fr; 는 첫 번째 열은 100px, 두 번째 열은 남은 공간의 1/3, 세 번째 열은 남은 공간의 2/3를 차지하도록 설정합니다.

#garden {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 1fr 50px;
    grid-template-rows: 20% 20% 20% 20% 20%;
  }

문제 25

Grid 레이아웃에서 px 단위와 fr 단위를 함께 사용하여 열의 크기를 유연하게 조절하는 방법을 보여줍니다.

핵심 개념:

px 단위: 고정된 크기를 지정합니다.
fr 단위: 남은 공간을 비율에 따라 분할합니다.

문제 분석:

특정 열은 고정된 크기(예: px)를 가져야 합니다.
나머지 열은 남은 공간을 비율에 따라 분할해야 합니다.

해결 방법:

고정 크기 열 설정: grid-template-columns 속성을 사용하여 고정 크기(px, em 등)를 갖는 열을 지정합니다.
fr 단위 열 설정: 남은 공간을 분할할 열에 fr 단위를 지정합니다.

#garden {
    display: grid;
    grid-template-columns: 75px 3fr 2fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
  }

문제 26

Grid 레이아웃의 핵심 속성인 grid-template-columns에 적용할 수 있는 대부분의 기능은 grid-template-rows에도 동일하게 적용할 수 있습니다.

grid-template-rows 속성:

Grid 컨테이너의 행(row)을 정의합니다.
각 행의 크기를 지정할 수 있습니다.
fr 단위, 픽셀 (px), 백분율 (%), em 등 다양한 단위를 사용할 수 있습니다.
repeat() 함수를 사용하여 반복되는 행 패턴을 간결하게 정의할 수 있습니다.
minmax() 함수를 사용하여 행의 최소 및 최대 크기를 지정할 수 있습니다.

굳이 자세한 설명까지는 필요가 없겠죠?

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: repeat(4, 12.5px) 1fr
  }

문제 27

CSS는 효율성을 중시하기 때문에 자주 사용되는 속성들을 한 번에 설정할 수 있는 축약형 속성을 제공하는 경우가 많습니다. Grid 레이아웃에서도 grid-template-columns와 grid-template-rows 속성을 한 번에 설정할 수 있는 grid-template 축약형 속성이 있습니다.

grid-template 속성:

grid-template-rows와 grid-template-columns 속성을 한 줄로 합쳐서 표현합니다.
/ 기호를 사용하여 행과 열의 설정을 구분합니다.
행 설정을 먼저 작성하고, / 기호 다음에 열 설정을 작성합니다.

grid-template = grid-template-columns + grid-template-rows 를 기억하세요!

#garden {
    display: grid;
    grid-template: 60% / 200px;
  }

문제 28

드디어 대망의 마지막 문제입니다!

grid-template 축약형을 사용하여 마지막 문제를 멋지게 클리어해 봅시다!

문제 분석:

문제에서 요구하는 레이아웃을 분석하여 행과 열의 크기 및 개수를 파악합니다.
grid-template-rows와 grid-template-columns에 필요한 값을 결정합니다.

grid-template 축약형 활용:

행 (rows) 설정: grid-template-rows에 해당하는 값을 grid-template 속성 값의 / 기호 앞에 작성합니다. fr, px, %, em 등 다양한 단위를 사용할 수 있으며, repeat() 함수를 사용하여 반복되는 패턴을 간결하게 표현할 수도 있습니다.
열 (columns) 설정: grid-template-columns에 해당하는 값을 / 기호 뒤에 작성합니다. 행 설정과 마찬가지로 다양한 단위와 함수를 사용할 수 있습니다.

#garden {
    display: grid;
    grid-template: 1fr 50px / 20% 1fr;
  }

마치며

어쩌면 재미 없을 만한 주제인 HTML/CSS 속성들을 가지고, 이렇게 흥미로운 게임을 만들어 낼 수 있다는 사실이 다소 놀랍습니다.

이렇게 게임을 하듯 공부를 하는 것은 언제나 즐거운 일 같습니다.

어떻게, 이번 포스팅을 통해 Grid의 특징과 속성들의 쓰임에 대해서 감을 잡으셨나요?

앞으로도 더욱 다양하고 즐거운 자료들을 계속 공유해나가 보겠습니다.

아래는 Grid Garden을 모두 클리어 했을 때 확인할 수 있는 엔딩화면입니다. 참 꼼꼼하게 만들었네요^^

저작자표시 비영리 변경금지 (새창열림)

D.C SKY 정보채널

재미있게 Grid를 마스터하는 - Grid Garden 3/3 (문제풀이 21~28)