나만의 갤러리 만들기
지금부터 여러분이 좋아하는 이미지, 영상, 오디오를 담는 갤러리를 만들어 볼게요.
먼저 <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에 대해 자세히 알아볼게요!