CSS Grid로 반응형 웹 페이지 디자인하기

​ 안녕하세요 오늘은 CSS그리드를 통해 반응형 웹 디자인을 보여드리려고 합니다. 구체적으로는 CSS template을 통한 디자인이구요. 이를 통해 얼마나 단순한 구조로 반응형 구현이 가능한지 보여드리겠습니다.

<div class="grid-container">
  <div class="title-kor">
    <h1>17번째 노래 <span>파블로 네루다</span></h1>
  </div>
  <div class="title-es">
    <h1>SONETO XVII <span>Pablo Neruda</span></h1>
  </div>

  <div class="verse-1-kor">
    <p>
      네가 소금 장미나 황옥이라면 널 사랑하지 않을 거야,<br />
      불을 뿜어내는 카네이션의 화살이었대도<br />
      숨겨진 것이 사랑받는 것처럼 널 사랑할거야<br />
      은밀히, 그늘과 영혼 사이에서.
    </p>
  </div>

  <div class="verse-1-es">
    <p>
      No te amo como si fueras rosa de sal, topacio<br />
      o flecha de claveles que propagan el fuego:<br />
      te amo como se aman ciertas cosas oscuras,<br />
      secretamente, entre la sombra y el alma.
    </p>
  </div>

  <div class="verse-2-kor">
    <p>
      꽃은 피지 않지만 그속에 숨겨진 꽃의 빛,<br />
      그것을 지닌 식물처럼 널 사랑해<br />
      땅에서 올라와 내 몸에 은밀히 살고 있는<br />
      어떤 순수한 향기, 네 사랑이 고마워
    </p>
  </div>

  <div class="verse-2-es">
    <p>
      Te amo como la planta que no florece y lleva<br />
      dentro de sí, escondida, la luz de aquellas flores,<br />
      y gracias a tu amor vive oscuro en mi cuerpo<br />
      el apretado aroma que ascendió de la tierra.
    </p>
  </div>

  <div class="verse-3-kor">
    <p>
      어떻게, 언제, 어디로부턴지 모른채 너를 사랑해 <br />
      복잡함과 자만 없이 솔직하게 너를 사랑해<br />
      다른 방법은 모르기 때문에 너를 이렇게 사랑해
    </p>
  </div>

  <div class="verse-3-es">
    <p>
      Te amo sin saber cómo, ni cuándo, ni de dónde,<br />
      te amo directamente sin problemas ni orgullo:<br />
      así te amo porque no sé amar de otra manera,
    </p>
  </div>

  <div class="verse-4-kor">
    <p>
      내가 없는 곳엔 너도 없고,<br />
      내 가슴에 얹은 네 손이 바로 내 손이며,<br />
      내가 잠들 때 너의 눈은 감긴다
    </p>
  </div>

  <div class="verse-4-es">
    <p>
      sino así de este modo en que no soy ni eres,<br />
      tan cerca que tu mano sobre mi pecho es mía,<br />
      tan cerca que se cierran tus ojos con mi sueño.
    </p>
  </div>
</div>

대학에서 과제로 사용했던 네루다의 시 원문과 한글입니다. 이 둘의 조합으로 화면을 구성하려고 합니다. 보시다시피 최 상단에는 title 선택자를 통해 제목을 구분하고 verso 선택자로 연을 구분해줬습니다. Flex를 사용하면 가로 혹은 세로 중 하나만 선택해 단편적으로 구성할 수 밖에 없습니다. 그러나 grid는 가로축과 세로축 모두 설정을 마음대로 변경할 수 있기 때문에 보다 다채로운 화면 구성이 가능합니다.

/* mobile version */
.grid-container {
  padding-left: 10px;
  min-height: 100vh;
  display: grid;
  gap: 30px;
  grid-template:
    "title-kor" 30px
    "title-es" 1fr
    "verso-1-kor " 1fr
    "verso-1-es" 1fr
    "verso-2-kor " 1fr
    "verso-2-es" 1fr
    "verso-3-kor " 1fr
    "verso-3-es" 1fr
    "verso-4-kor " 1fr
    "verso-4-es" 1fr
    /1fr;
}

먼저 모바일의 경우 1줄로 구성했습니다. 놀랍지 않나요? CSS만 보더라도 전체 화면이 어떻게 구성되는지 볼 수 있는 것이 CSS template의 효과입니다. 또한 각 row 오른쪽에 그 크기를 나타내어 대충의 크기도 가늠이 가능합니다. 최 하단에는 column의 크기도 있구요.

@media only screen and (min-width: 767px) {
  .grid-container {
    gap: 80px 10px;
    grid-template:
      "title-kor title-es" 1fr
      "verso-1-kor verso-1-es" 1fr
      "verso-2-kor verso-2-es" 1fr
      "verso-3-kor verso-3-es" 1fr
      "verso-4-kor verso-4-es" 1fr
      /1fr 1fr;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
  }
}

다음은 테블릿인데요. 열을 하나 더 늘여서 전체적으로 두 시가 대응하는 구조로 만들어 보았습니다. 이 역시 CSS만으로 화면의 구성이 보입니다. 정말 놀라운 기능이죠.

@media only screen and (min-width: 1200px) {
  .grid-container {
    gap: 0px 0px;
    grid-template:
      "title-kor verso-1-kor verso-1-es title-es" 1fr
      "title-kor verso-2-kor verso-2-es title-es" 1fr
      "title-kor verso-3-kor verso-3-es title-es" 1fr
      "title-kor verso-4-kor verso-4-es title-es" 1fr
      / 1fr 1fr 1fr 1fr;
  }
}

마지막으로 데스크톱 모드입니다. Grid로 표현 할 수 있는 자유로움이 얼마나 극적인지 가장 잘 표현되는 코드이죠. flex보다 훨씬 직관적으로 화면을 구성할 수 있었는데요. 두 가지의 제목을 양 측면으로 빼고 가운데에 연을 배치하는 구조로 구성했습니다. 화면에 대한 생각을 바로 바로 구현할 수 있는 것이 정말 자유로운 시스템이었습니다.

정말 대단한 경험이었습니다. 처음에 각 부분을 grid-area로 지정해주는 부분이 아주 조금 번거롭지만 이후 바로바로 코드로 나타낼 수 있다는 장점에 비하면 굉장히 작은 수고로움입니다. 앞으로도 레이아웃을 디자인할 때는 가능하다면 그리드를 사용해야 겠다는 생각이 드는 하루였네요.

오늘도 재미있는 것을 배웠네요 :)