CSS

10. 실습

박은서's avatar
박은서
Jan 07, 2026
10. 실습
Contents
1. 문제2. 풀이1️⃣ 뼈대 만들기2️⃣ 레이아웃3️⃣ 이미지/설명 넣기4️⃣ 디자인5️⃣ 최종

1. 문제

아래와 같은 화면을 출력하시오.
notion image

2. 풀이

1️⃣ 뼈대 만들기

1) 전체 박스

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
notion image

2) title / 내용 박스

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>title</div>
      <div>내용</div>
    </div>
  </body>
</html>
notion image

3) card 박스

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div>
        <div>Card 1</div>
        <div>Card 2</div>
        <div>Card 3</div>
        <div>Card 4</div>
      </div>
    </div>
  </body>
</html>
notion image

4) 각 카드마다 사진/설명 박스 만들기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

2️⃣ 레이아웃

1) 사진/설명 박스 가로로 나열

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
        <div>
          <div>사진</div>
          <div>설명</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

2) 사진, 설명 가로로 나열

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>사진</div>
          <div>설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div>설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div>설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div>설명</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

3) 설명이 세로 가운데 정렬되게

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
      .content {
        display: grid;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>사진<br /><br /></div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>사진</div>
          <div class="content">설명</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

3️⃣ 이미지/설명 넣기

1) 이미지 넣기

https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80
https://a0.muscache.com/4ea/air/v2/pictures/a77ee672-e790-4362-8cc5-52bec1371ece.jpg?t=r:w375-h250-sfit,e:fjpg-c80
https://a0.muscache.com/4ea/air/v2/pictures/38f2bfd6-1f4d-46d7-babf-61657deef302.jpg?t=r:w375-h250-sfit,e:fjpg-c80
https://a0.muscache.com/4ea/air/v2/pictures/da2d8e97-90b7-409f-94ac-5ab0327c289b.jpg?t=r:w375-h250-sfit,e:fjpg-c80
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
      .content {
        display: grid;
        align-items: center;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">설명</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">설명</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

2) 설명 넣기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
      .content {
        display: grid;
        align-items: center;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">숙소 및 호텔</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">트립</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">어드벤처</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">레스토랑</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

3) 패딩 조절

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 0px;
      }
      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
      .content {
        display: grid;
        align-items: center;
        padding: 5px;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div>
      <div>에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">숙소 및 호텔</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">트립</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">어드벤처</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">레스토랑</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

4️⃣ 디자인

1) ‘에어비앤비 둘러보기’ 디자인

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
      }
      .content {
        display: grid;
        align-items: center;
        padding: 5px;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="title">에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">숙소 및 호텔</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">트립</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">어드벤처</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">레스토랑</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

2) 사진 설명 디자인

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
        border: 1px solid rgb(187, 184, 184);
        border-radius: 5px;
        box-shadow: 5px 5px 0px 0px rgb(185, 183, 183);
      }
      .content {
        display: grid;
        align-items: center;
        padding: 5px;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="title">에어비앤비 둘러보기</div>
      <div class="grid_box">
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">숙소 및 호텔</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">트립</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">어드벤처</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">레스토랑</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

3) 너비 조정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
        border: 1px solid rgb(187, 184, 184);
        border-radius: 5px;
        box-shadow: 5px 5px 0px 0px rgb(185, 183, 183);
      }
      .content {
        display: grid;
        align-items: center;
        padding: 5px;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mb10 {
        margin-bottom: 10px;
      }

      .mt5 {
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="title">에어비앤비 둘러보기</div>
      <div class="grid_box mt5">
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">숙소 및 호텔</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">트립</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">어드벤처</div>
        </div>
        <div class="grid_item">
          <div>
            <img
              src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
            />
          </div>
          <div class="content">레스토랑</div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image

5️⃣ 최종

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .grid_box {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 10px;
      }
      .grid_item {
        display: grid;
        grid-template-columns: 2fr 5fr;
        border: 1px solid rgb(187, 184, 184);
        border-radius: 5px;
        box-shadow: 5px 5px 0px 0px rgb(185, 183, 183);
      }
      .content {
        display: grid;
        align-items: center;
        padding: 5px;
      }

      .grid_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mb10 {
        margin-bottom: 10px;
      }

      .mt5 {
        margin-top: 5px;
      }
      main {
        display: grid;
        justify-content: center;
      }
      section {
        width: 1000px;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <div class="title">에어비앤비 둘러보기</div>
        <div class="grid_box mt5">
          <div class="grid_item">
            <div>
              <img
                src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
              />
            </div>
            <div class="content">숙소 및 호텔</div>
          </div>
          <div class="grid_item">
            <div>
              <img
                src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
              />
            </div>
            <div class="content">트립</div>
          </div>
          <div class="grid_item">
            <div>
              <img
                src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
              />
            </div>
            <div class="content">어드벤처</div>
          </div>
          <div class="grid_item">
            <div>
              <img
                src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
              />
            </div>
            <div class="content">레스토랑</div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>
notion image
Share article