실제 UI를 따라 만들며 배우는 CSS 구조 복습

 

 

 

이제까지 배운 position, flex, z-index, 반응형 레이아웃 등을 한꺼번에 실전에서 적용해볼 시간입니다.
이번 포스팅에서는 간단한 카드형 UI를 하나 따라 만들어보며,
CSS 구조를 어떻게 잡는지, 어떤 순서로 스타일링하는지 복습해보겠습니다.

---

 

✅ 목표 UI 구성

이번에 만들 UI는 아래와 같은 구조입니다:

• 카드 컨테이너
• 카드 안에는 썸네일 이미지, 제목, 설명, 버튼이 포함됨

---

 

✅ HTML 구조 먼저 만들기

<div class="card">
  <img src="thumbnail.jpg" alt="썸네일 이미지" class="card-img">
  <div class="card-content">
    <h2 class="card-title">제목입니다</h2>
    <p class="card-desc">설명 텍스트가 들어갑니다.</p>
    <button class="card-btn">자세히 보기</button>
  </div>
</div>

 

---

 

✅ CSS로 스타일 입히기

 

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background: #fff;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}

.card-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

 

---

 

✅ 실전 팁

• .card 요소에 transition을 넣으면 사용자에게 더 부드러운 경험을 줄 수 있습니다.
• object-fit: cover는 이미지의 비율을 유지하면서 박스를 꽉 채우는 데 매우 유용합니다.
• 여백과 배경색, 그림자 등을 적절히 조합하면 간단한 구조도 깔끔하게 표현됩니다.

---

 

✅ 반응형 처리 예시

화면이 작아지면 카드의 너비를 조정해보겠습니다.

 

@media (max-width: 480px) {
  .card {
    width: 100%;
  }
}

 

---

 

✅ 마무리 요약

항목	설명
핵심 레이아웃	썸네일 + 제목 + 설명 + 버튼 구조
주요 속성	box-shadow, border-radius, object-fit
사용자 경험	hover 애니메이션, 버튼 스타일
반응형 처리	미디어쿼리로 카드 너비 조절