한국어

유럽

아시아

← 레벨 1 – 빌더

수업 10/12 ⏱ 35 분

카드와 사진 갤러리

최신 웹사이트에서 가장 인기 있는 두 가지 요소인 콘텐츠 카드와 그리드 사진을 구축해.

보여줄게: 카드

카드는 이미지와 텍스트를 함께 유지하는 그림자가 있는 흰색 직사각형야. YouTube, Netflix 및 온라인 상점에서 알고 있어. 카드는 몇 가지 속성을 가진 상자야.

<div class="card">
  <img src="images/photo.jpg" alt="Photo description">
  <h3>Card heading</h3>
  <p>Short text for the card.</p>
</div>
.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

여기에 두 가지 새로운 사항이 있어.

보여줄게: 카드를 나란히 놓고

이제 여러분이 이미 알고 있는 트릭인 flexbox를 살펴보겠어. 카드를 상자에 싸서 유연하게 설정해.

<div class="cards">
  <div class="card">…</div>
  <div class="card">…</div>
  <div class="card">…</div>
</div>
.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;             /* cards fairly share the available space */
  min-width: 200px;    /* but none will ever be narrower than 200px */
}

flex-wrap: wrap+min-width= 컴퓨터에서는 카드가 나란히 놓여 있고, 전화기에서는 카드가 쌓여 있어. 모든 화면에 맞춰 조정되는 반응형 웹사이트를 구축했어.

네 차례 💪

웹사이트에 카드가 있는 섹션을 최소 3개 이상 나란히 추가해. 진행되는 작업은 프로젝트에 따라 다릅니다.

🏫 학교 웹사이트 – 솔루션(교사 카드) 
<h2>Our Teachers</h2>
<div class="cards">
  <div class="card">
    <h3>Ms. Turner</h3>
    <p>4th grade homeroom. Teaches English and art. Loves cats.</p>
  </div>
  <div class="card">
    <h3>Mr. Bennett</h3>
    <p>Math and P.E. Runs the floorball club.</p>
  </div>
  <div class="card">
    <h3>Principal Adams</h3>
    <p>Running the school for 10 years. Plays the piano.</p>
  </div>
</div>
🙋 개인 웹사이트 - 솔루션(취미 카드) 
<h2>My Hobbies</h2>
<div class="cards">
  <div class="card">
    <img src="images/soccer.jpg" alt="Me during a match">
    <h3>Soccer</h3>
    <p>I play forward for the youth team. 12 goals this year!</p>
  </div>
  <div class="card">
    <img src="images/minecraft-build.jpg" alt="My castle in Minecraft">
    <h3>Minecraft</h3>
    <p>I build huge castles. This one took a month.</p>
  </div>
  <div class="card">
    <h3>Coding</h3>
    <p>I'm building this very website right now. And this is just the start.</p>
  </div>
</div>
🌍 여행 일지 - 솔루션(여행 카드) 
<h2>Our Trips</h2>
<div class="cards">
  <div class="card">
    <img src="images/mountains.jpg" alt="View from the summit">
    <h3>The Mountains</h3>
    <p>A three-day hike. Best part: wild berries and the lookout tower.</p>
  </div>
  <div class="card">
    <img src="images/sea.jpg" alt="A bay in Greece">
    <h3>Greece</h3>
    <p>A week at the beach. We saw dolphins!</p>
  </div>
  <div class="card">
    <img src="images/dc.jpg" alt="View from a monument in Washington, D.C.">
    <h3>Washington, D.C.</h3>
    <p>Museums, monuments, and way too much walking.</p>
  </div>
</div>
⚽ 클럽 웹사이트 – 솔루션(선수 카드) 
<h2>Roster</h2>
<div class="cards">
  <div class="card">
    <h3>Jake · goalkeeper 🧤</h3>
    <p>Team captain. 5 clean sheets this season.</p>
  </div>
  <div class="card">
    <h3>Owen · midfield ⚡</h3>
    <p>Fastest player on the team. 8 assists.</p>
  </div>
  <div class="card">
    <h3>Tom · forward 🎯</h3>
    <p>Top scorer. 14 goals this season.</p>
  </div>
</div>
모든 프로젝트에 동일한 CSS가 작동해. 
.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;
  min-width: 200px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

보너스: 사진 갤러리

사진이 많나요? 사진 그리드는 훨씬 더 간단해.aspect-ratio그리고object-fit모두 같은 크기로 유지하려면 다음을 수행해.

<div class="gallery">
  <img src="images/p1.jpg" alt="…">
  <img src="images/p2.jpg" alt="…">
  <img src="images/p3.jpg" alt="…">
  <img src="images/p4.jpg" alt="…">
</div>
.gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery img {
  width: 180px;
  aspect-ratio: 1;      /* a square */
  object-fit: cover;    /* the photo fills the square and gets cropped, not squished */
}
✅
**직접 확인해:** 웹사이트에 그림자가 나란히 있는 카드가 있어. 브라우저 창을 휴대폰 너비에 맞춰 축소해. 카드가 쌓야. 이것을 반응형 디자인이라고 하는데, 여러분은 그것을 해냈어.

이번 수업에서 배울 점

-<div>함께 속한 물건을 포장하는 상자야.

© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관