유튜브처럼! CSS Flexbox로 반응형 카드 만들기
CSS Flexbox로 반응형 카드 레이아웃 만들기
웹사이트를 만들 때 가장 어려운 부분 중 하나가 바로 '레이아웃'입니다. 특히 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에서 모두 깔끔하게 보이는 반응형 레이아웃을 구현하는 것은 초보자에게 큰 벽처럼 느껴지곤 하죠.
하지만 걱정 마세요! 현대 CSS에는 이런 고민을 해결해 줄 강력한 도구, Flexbox가 있습니다. Flexbox를 사용하면 마치 레고 블록을 맞추듯 쉽고 유연하게 요소들을 정렬하고 배치할 수 있습니다.
오늘은 '그림으로 쉽게 배우는 HTML+CSS+자바스크립트' 도서의 7장 내용을 바탕으로, 유튜브처럼 화면 크기에 따라 카드 개수가 유연하게 변하는 반응형 레이아웃을 만드는 방법을 단계별로 알아보겠습니다.
Flexbox의 기본 개념: 컨테이너와 아이템
Flexbox를 시작하기 전에 딱 두 가지 개념만 기억하면 됩니다. 바로 컨테이너(Container)와 아이템(Item)입니다.
컨테이너: 정렬하고 싶은 아이템들을 감싸는 부모 요소입니다.
아이템: 컨테이너 안에 들어있는 각각의 자식 요소들입니다.
책에서는 이 관계를 컴퓨터의 '폴더(컨테이너)와 파일(아이템)' 관계로 비유합니다. 파일을 정리할 때 폴더에 담아 한 번에 정렬하듯, Flexbox도 컨테이너에 속성을 지정해 그 안의 아이템들을 한 번에 제어하는 방식입니다. 이 개념만 이해하면 절반은 성공입니다!
마법의 시작, display: flex
Flexbox 레이아웃을 만드는 첫걸음은 컨테이너 역할을 할 요소에 display: flex; 속성을 추가하는 것입니다. 이 코드 한 줄만으로 마법 같은 변화가 일어납니다.
원래 <div> 같은 블록 요소들은 수직으로 쌓이지만, 부모 요소에 display: flex;를 적용하는 순간, 자식 아이템들은 약속이라도 한 듯 가로 방향으로 나란히 정렬됩니다.
똑똑한 줄 바꿈의 비밀: flex-wrap
display: flex;만 적용된 상태에서 브라우저 창의 크기를 줄여보면 아이템들이 억지로 한 줄에 crammed되면서 찌그러지는 것을 볼 수 있습니다. 우리가 원하는 유튜브 같은 레이아웃은 화면이 좁아지면 아이템이 아래로 자연스럽게 내려와야 하죠.
이때 사용하는 속성이 바로 flex-wrap: wrap;입니다. 이 속성을 컨테이너에 추가하면, 더 이상 공간이 없을 때 아이템들이 다음 줄로 자동으로 넘어갑니다. 이것이 반응형 레이아웃의 핵심 원리입니다.
아이템 정렬의 기술: justify-content와 align-items
이제 아이템들을 원하는 위치에 예쁘게 정렬해 보겠습니다. Flexbox에는 축을 기준으로 정렬하는 두 가지 핵심 속성이 있습니다.
1. 가로 정렬을 담당하는 justify-content
justify-content는 메인 축(기본적으로 가로 방향)에서 아이템들을 어떻게 정렬하고 분배할지 결정합니다.
flex-start: 왼쪽으로 정렬 (기본값)
center: 가운데로 정렬
space-between: 아이템들 사이에 균등한 간격을 만들어 정렬
2. 세로 정렬을 담당하는 align-items
align-items는 교차 축(기본적으로 세로 방향)에서 아이템들의 위치를 결정합니다. 아이템들의 높이가 서로 다를 때 유용하게 사용됩니다.
flex-start: 위쪽으로 정렬
center: 세로 중앙으로 정렬
stretch: 아이템의 높이를 컨테이너 높이에 맞춰 꽉 채움 (기본값)
실전 예제: 유튜브 카드 레이아웃 완성하기
이제 배운 속성들을 모두 조합해 실제 유튜브 같은 반응형 카드 레이아웃을 만들어 보겠습니다.
작동 방식
핵심은 Flexbox와 미디어 쿼리(Media Query)를 함께 사용하는 것입니다. 화면 너비에 따라 아이템의 너비를 조절해서 한 줄에 보이는 카드의 개수를 바꾸는 원리입니다.
컨테이너 설정: display: flex;와 flex-wrap: wrap;을 적용해 기본 플렉스 레이아웃을 만듭니다. gap 속성으로 아이템 사이의 간격을 줍니다.
아이템 너비 설정: flex 속성과 calc() 함수를 사용해 아이템의 너비를 계산합니다. 예를 들어 한 줄에 4개의 카드를 보여주려면, 각 카드의 너비는 calc(25% - 간격)이 되어야 합니다.
미디어 쿼리 적용: 화면 너비(max-width 또는 min-width)를 기준으로 아이템의 너비를 변경하는 CSS 규칙을 추가합니다.
- PC (769px 이상): 한 줄에 4개 (calc(25% - 10px))
- 태블릿 (768px 이하): 한 줄에 2개 (calc(50% - 10px))
- 모바일 (600px 이하): 한 줄에 1개 (calc(100%))
위 코드를 적용하면 브라우저의 크기를 조절할 때마다 카드 개수가 자동으로 "착착" 바뀌면서 언제나 최적의 레이아웃을 유지하는 것을 볼 수 있습니다.
마치며
Flexbox는 처음에는 조금 낯설 수 있지만, 컨테이너와 아이템의 관계만 이해하면 display, flex-wrap, justify-content 등 몇 가지 속성만으로도 놀랍도록 유연하고 강력한 레이아웃을 만들 수 있습니다.
오늘 살펴본 내용은 '그림으로 쉽게 배우는 HTML+CSS+자바스크립트'가 어떻게 복잡한 CSS 개념을 쉬운 그림과 실용적인 예제로 풀어내는지를 보여주는 좋은 예시입니다. 더 이상 레이아웃 때문에 스트레스받지 말고, Flexbox로 자신감 있게 웹 디자인의 세계에 빠져보세요!
웹 개발을 처음 배우려고 할 때 가장 먼저 드는 생각은 “대체 어디서부터 시작해야 하지?”입니다. 낯선 용어, 익숙하지 않은 코드, 구조를 이해하기 어려운 화면 구성 등 초보자 입장에서 웹 개발을 배우는 일은 쉽지 않습니다.
『그림으로 쉽게 배우는 HTML+CSS+자바스크립트』는 이러한 고민을 가진 분들을 위해 만들어진 책입니다. 웹 페이지의 뼈대를 구성하는 HTML, 스타일을 담당하는 CSS, 동적인 기능을 구현하는 자바스크립트까지, 웹 개발의 핵심 기술을 그림과 실생활 비유를 활용해 누구나 이해하기 쉽게 풀어냈습니다.
