[HTML/CSS] 12. Card 박스 만들기

Mar 11, 2025

먼저 박스의 레이아웃을 구상하고 border을 넣어서 모양을 확인하자


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 3px;
      }
      .card-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .card-item {
        display: grid;
        grid-template-columns: 2fr 5fr;
        height: 80px;
      }
      .card-img {
        background-image: url("/imgs/london.jpg");
        background-size: cover;
        background-position: center;
      }
      .card-content {
        display: grid;
        align-items: center;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <div class="card-list">
      <div class="card-item">
        <div class="card-img"></div>
        <div class="card-content">숙소 및 부티크 호텔</div>
      </div>
      <div class="card-item">
        <div class="card-img"></div>
        <div class="card-content">숙소 및 부티크 호텔</div>
      </div>
      <div class="card-item">
        <div class="card-img"></div>
        <div class="card-content">숙소 및 부티크 호텔</div>
      </div>
      <div class="card-item">
        <div class="card-img"></div>
        <div class="card-content">숙소 및 부티크 호텔</div>
      </div>
    </div>
  </body>
</html>

background-image : 요소의 배경을 디자인 한다.

url() : CSS url() 함수를 사용하면 스타일 시트에 파일을 포함할 수 있습니다.

참고 https://www.w3schools.com/cssref/func_url.php

background-size : 요소의 배경의 크기를 정한다.

background-position : 요소의 배경의 위치를 정한다.

See more posts

[HTML/CSS] 12. Card 박스 만들기

More articles

[HTML/CSS] 14. Airbnb 만들기

[HTML/CSS] 13. 전체 실습 예제

[HTML/CSS] 11. Grid Layout 실습

[HTML/CSS] 10. Img 와 Icon