나만의 갤러리 만들기

지금부터 여러분이 좋아하는 이미지, 영상, 오디오를 담는 갤러리를 만들어 보겠습니다.

먼저 <section> 태그를 활용해 갤러리 섹션을 만들어 볼까요?

갤러리 Section 만들기

아래 HTML 코드는 갤러리 섹션의 제목과 내용을 정의합니다.

갤러리 섹션

<section id="gallery" class="container">
  <div class="content-text">
    <h2>갤러리</h2>
    <p>저는 이런 것들을 좋아해요</p>
  </div>

  <div class="gallery"></div>
</section>

제목으로 h2 태그를, 부제목으로 p 태그를 사용했습니다.

container 클래스와 content-text 클래스는 이전에 이미 사용했던 클래스이고, gallery 클래스는 새로 정의할 클래스입니다.

갤러리 섹션의 화면을 구성하는 .gallery 클래스는 그리드(Grid) 레이아웃을 사용합니다.

Grid는 가로 또는 세로 한 축을 활용하는 Flex와 달리, 가로-세로 두 방향을 모두 활용하는 레이아웃(Layout, 화면 배치) 시스템입니다.

이제부터 Grid에 대해 자세히 알아보겠습니다!