Practice

33. (CSS) 음식 사이트 만들기 연습 문제

박은서's avatar
박은서
Jan 07, 2026
33. (CSS) 음식 사이트 만들기 연습 문제
Contents
1. 문제2. 풀이3. 정답

1. 문제

아래와 똑같은 화면을 출력하시오.
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>
      hr {
        border: none;
        height: 1px;
        background-color: #ccc;
        width: 100%;
        margin: 24px 0;
      }
      main {
        display: grid;
        justify-content: center;
      }
      section {
        width: 1000px;
      }
      .category_title {
        font-size: 30px;
        font-weight: 700;
      }
      .category_box {
        display: grid;
        grid-template-columns: repeat(4, 80px);
      }
      .category_icon {
        display: grid;
        justify-content: center;
        border-radius: 40px;
        width: 40px;
        height: 40px;
        font-size: 23px;
        box-shadow: 2px 2px 2px 2px rgb(190, 190, 190);
      }
      .category_name {
        display: grid;
        justify-content: center;
        width: 40px;
        font-size: 13px;
      }
      .img_title {
        font-size: 18px;
        font-weight: 600;
      }
      .img_box {
        display: grid;
        justify-content: center;
        grid-template-columns: auto auto auto auto;
        column-gap: 35px;
      }
      .img_item {
        display: grid;
        grid-template-columns: auto auto;
        width: 220px;
        height: 100px;
        border-radius: 10px;
        background-size: cover;
      }
      .img1 {
        background-image: url(https://getinthere.notion.site/image/attachment%3A26b1437c-02c3-4e50-8ade-b7c19fe74bec%3Ameal1.png?table=block&id=2e08a08b-6c0d-80fb-b25e-e04b46fefcab&spaceId=079fd135-2d90-4bdf-b746-cdd6f990ba6a&width=600&userId=&cache=v2);
      }
      .img2 {
        background-image: url(https://getinthere.notion.site/image/attachment%3A35740d2e-3ad0-4cb0-9919-0519e9b0b9e6%3Ameal2.png?table=block&id=2e08a08b-6c0d-8020-b3e5-c60ff8d734f4&spaceId=079fd135-2d90-4bdf-b746-cdd6f990ba6a&width=600&userId=&cache=v2);
      }
      .img3 {
        background-image: url(https://getinthere.notion.site/image/attachment%3Ac6823218-a01e-4b30-b571-8f8dd4bc74f5%3Ameal3.png?table=block&id=2e08a08b-6c0d-80e5-b68d-c21eee8a99ec&spaceId=079fd135-2d90-4bdf-b746-cdd6f990ba6a&width=610&userId=&cache=v2);
      }
      .img4 {
        background-image: url(https://getinthere.notion.site/image/attachment%3A4055a6f2-ecd8-4db5-b012-7fcbbec87205%3Ameal4.png?table=block&id=2e08a08b-6c0d-8011-82de-fdb9d88e6ab1&spaceId=079fd135-2d90-4bdf-b746-cdd6f990ba6a&width=600&userId=&cache=v2);
      }
      .img_item_name {
        display: grid;
        align-items: end;
        margin: 10px;
        color: white;
        font-size: 12px;
        font-weight: 600;
      }
      .img_item_icon {
        display: grid;
        justify-content: end;
        align-items: end;
        margin: 10px;
      }
      .menu_box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
      .menu_name {
        font-size: 20px;
      }
      .menu_icon {
        display: grid;
        justify-content: end;
        font-size: 20px;
      }
      .mb20 {
        margin-bottom: 20px;
      }
      .mb10 {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <br />
        <br />
        <div class="category_title">Add meals</div>
        <br />
        <div class="category_box">
          <div class="category_itmes">
            <div class="category_icon">🥪</div>
            <div class="category_name">All</div>
          </div>
          <div class="category_itmes">
            <div class="category_icon">🍕</div>
            <div class="category_name">Pizza</div>
          </div>
          <div class="category_itmes">
            <div class="category_icon">🥩</div>
            <div class="category_name">Meat</div>
          </div>
          <div class="category_itmes">
            <div class="category_icon">🥗</div>
            <div class="category_name">Veggies</div>
          </div>
        </div>
      </section>
      <br />
      <hr />
      <br />
      <section>
        <div class="img_title mb10">Featured meals</div>
        <div class="img_box">
          <div class="img_item img1">
            <div class="img_item_name">Penne Broccoli</div>
            <div class="img_item_icon">➕</div>
          </div>
          <div class="img_item img2">
            <div class="img_item_name">Penne Broccoli</div>
            <div class="img_item_icon">➕</div>
          </div>
          <div class="img_item img3">
            <div class="img_item_name">Penne Broccoli</div>
            <div class="img_item_icon">➕</div>
          </div>
          <div class="img_item img4">
            <div class="img_item_name">Penne Broccoli</div>
            <div class="img_item_icon">➕</div>
          </div>
        </div>
      </section>
      <br />
      <hr />
      <br />
      <section>
        <div class="menu_box mb20">
          <div class="menu_name">Pasta Carbonara</div>
          <div class="menu_icon">➕</div>
        </div>
        <div class="menu_box mb20">
          <div class="menu_name">Lasagna</div>
          <div class="menu_icon">➕</div>
        </div>
      </section>
    </main>
  </body>
</html>
notion image

3. 정답

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 class="all_box">
      <main>
        <header>
          <div>Add meals</div>
          <div>
            <div>
              <div>
                <div>아이콘자리</div>
              </div>
              <div>All</div>
            </div>
            <div>
              <div>
                <div>아이콘자리</div>
              </div>
              <div>Pizza</div>
            </div>
            <div>
              <div>
                <div>아이콘자리</div>
              </div>
              <div>Meat</div>
            </div>
            <div>
              <div>
                <div>아이콘자리</div>
              </div>
              <div>Veggies</div>
            </div>
          </div>
        </header>
        <section>
          <div>
            <hr />
          </div>
          <div>Featured meals</div>
          <div>
            <div>그림1</div>
            <div>그림2</div>
            <div>그림3</div>
            <div>그림4</div>
          </div>
        </section>
        <section>
          <div>
            <hr />
          </div>
          <div>
            <div>Pasta Carbonara</div>
            <div>플러스</div>
          </div>
          <div>
            <div>Lasagna</div>
            <div>플러스</div>
          </div>
        </section>
      </main>
    </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: 5px;
      }

      .all_box {
        display: grid;
        justify-content: center;
      }

      main {
        width: 1000px;
      }
      .menu_box {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
        column-gap: 30px;
      }

      .icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: grid;
        justify-content: center;
        align-items: center;
      }

      .icon_box {
        display: grid;
        justify-content: center;
      }

      .menu_title {
        text-align: center;
      }

      .feature_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 30px;
      }
      .list_box {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="all_box">
      <main>
        <header>
          <div class="title">Add meals</div>
          <div class="menu_box">
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">😒</div>
              </div>
              <div class="menu_title">All</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">😒</div>
              </div>
              <div class="menu_title">Pizza</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">😒</div>
              </div>
              <div class="menu_title">Meat</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">😒</div>
              </div>
              <div class="menu_title">Veggies</div>
            </div>
          </div>
        </header>
        <section>
          <div>
            <hr />
          </div>
          <div>Featured meals</div>
          <div class="feature_box">
            <div class="feature_item">그림1</div>
            <div class="feature_item">그림2</div>
            <div class="feature_item">그림3</div>
            <div class="feature_item">그림4</div>
          </div>
        </section>
        <section>
          <div>
            <hr />
          </div>
          <div class="list_box">
            <div>Pasta Carbonara</div>
            <div>
              <button>➕</button>
            </div>
          </div>
          <div class="list_box">
            <div>Lasagna</div>
            <div>
              <button>➕</button>
            </div>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>
➡️ grid-template-columns: max-content; : 최대 크기에 맞춤
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>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        background-color: #fafafc;
      }

      div {
        border: 1px solid black;
        padding: 5px;
      }

      .all_box {
        display: grid;
        justify-content: center;
      }

      main {
        width: 1000px;
      }
      .menu_box {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
        column-gap: 30px;
      }

      .icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: grid;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        border: 1px solid rgba(170, 170, 170, 0.301);
        box-shadow: 1px 1px 1px 1px rgba(170, 170, 170, 0.301);
      }

      .icon_box {
        display: grid;
        justify-content: center;
      }

      .menu_title {
        text-align: center;
        font-weight: 700;
      }

      .feature_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 30px;
      }
      .list_box {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .title {
        font-size: 30px;
        font-weight: bold;
      }

      .sub_title {
        font-size: 20px;
        font-weight: bold;
      }

      .feature_item {
        height: 110px;
      }

      .feature_item > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="all_box">
      <main>
        <header>
          <div class="title">Add meals</div>
          <div class="menu_box">
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🥪</div>
              </div>
              <div class="menu_title">All</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🍕</div>
              </div>
              <div class="menu_title">Pizza</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🥩</div>
              </div>
              <div class="menu_title">Meat</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🥗</div>
              </div>
              <div class="menu_title">Veggies</div>
            </div>
          </div>
        </header>
        <section>
          <div>
            <hr />
          </div>
          <div class="sub_title">Featured meals</div>
          <div class="feature_box">
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
          </div>
        </section>
        <section>
          <div>
            <hr />
          </div>
          <div class="list_box">
            <div>Pasta Carbonara</div>
            <div>
              <button>➕</button>
            </div>
          </div>
          <div class="list_box">
            <div>Lasagna</div>
            <div>
              <button>➕</button>
            </div>
          </div>
        </section>
      </main>
    </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>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        background-color: #fafafc;
      }

      div {
        padding: 5px;
      }

      .all_box {
        display: grid;
        justify-content: center;
      }

      main {
        width: 1000px;
      }
      .menu_box {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
        column-gap: 30px;
      }

      .icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: grid;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        border: 1px solid rgba(170, 170, 170, 0.301);
        box-shadow: 1px 1px 1px 1px rgba(170, 170, 170, 0.301);
      }

      .icon_box {
        display: grid;
        justify-content: center;
      }

      .menu_title {
        text-align: center;
        font-weight: 700;
      }

      .feature_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 30px;
      }
      .list_box {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
      }

      .title {
        font-size: 30px;
        font-weight: bold;
      }

      .sub_title {
        font-size: 20px;
        font-weight: bold;
      }

      .feature_item {
        height: 110px;
      }

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

      .mb20 {
        margin-bottom: 20px;
      }
      .mb10 {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="all_box">
      <main>
        <header>
          <div class="title mb20">Add meals</div>
          <div class="menu_box mb20">
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🥪</div>
              </div>
              <div class="menu_title">All</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🍕</div>
              </div>
              <div class="menu_title">Pizza</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🥩</div>
              </div>
              <div class="menu_title">Meat</div>
            </div>
            <div class="menu_item">
              <div class="icon_box">
                <div class="icon">🥗</div>
              </div>
              <div class="menu_title">Veggies</div>
            </div>
          </div>
        </header>
        <section>
          <div>
            <hr />
          </div>
          <div class="sub_title">Featured meals</div>
          <div class="feature_box mb20">
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
            <div class="feature_item">
              <img src="Screenshot_1.png" />
            </div>
          </div>
        </section>
        <section>
          <div>
            <hr />
          </div>
          <div class="list_box">
            <div>Pasta Carbonara</div>
            <div>
              <button>➕</button>
            </div>
          </div>
          <div class="list_box">
            <div>Lasagna</div>
            <div>
              <button>➕</button>
            </div>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>
notion image
Share article