14

개발_자 2024. 6. 18. 19:52

한식 메뉴 렌더링 하기(HTML + CSS)

const menuItems = [
  {
    name: "비빔밥",
    description: "밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리",
  },
  {
    name: "김치찌개",
    description: "김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리",
  },
  { name: "불고기", description: "양념한 고기를 구워서 먹는 한국 요리" },
  {
    name: "떡볶이",
    description: "떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식",
  },
  { name: "잡채", description: "당면과 여러 채소, 고기를 볶아 만든 한국 요리" },
];

주어진 데이터를 화면에 표시하기

어떻게 렌더링을 하는지..

하나도 모르겠다만..

그냥 막 눕고싶다만..

~에 앞서 html과 css를 만듭니다

<HTML>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" (type="text/css" ) />
    <title>한식 메뉴</title>
  </head>
  <body>
    <div id="menu">
      <h1>한식 메뉴</h1>
      <input type="text" id="search" placeholder="재료를 입력하세요" />
      <div id="foods">
      	<!-- 
    	<h2>비빔밥</h2>
    	<p>밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리</p>
   	-->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

이 말

<CSS>

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");
* {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

body {
  background-color: #f0f0f0;
}

#menu {
  background-color: white;
  width: 520px;
  margin: 50px auto;
  padding: 30px 0px 40px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

#search {
  width: 230px;
  height: 28px;
  background-color: rgb(235, 235, 235);
  border: none;
  border-radius: 13px;
  padding-left: 10px;
}

.food {
  width: 390px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px auto 0px auto;
  border: 2px solid rgb(215, 215, 215);
  border-radius: 20px;
  padding: 0px 20px;
}

id = #

class = .

대충 이런 식으로 메뉴 항목을 하나씩 추가할 계획

+ 인풋 사용으로 검색한 단어를 갖고있는 메뉴 항목을 필터링해 표시하기

<JS>

본격 함수 만들기(1)

- 전체 항목 렌더링

const menuItems = [
  {
    name: "비빔밥",
    description: "밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리",
  },
  {
    name: "김치찌개",
    description: "김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리",
  },
  { name: "불고기", description: "양념한 고기를 구워서 먹는 한국 요리" },
  {
    name: "떡볶이",
    description: "떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식",
  },
  { name: "잡채", description: "당면과 여러 채소, 고기를 볶아 만든 한국 요리" },
];

document.addEventListener("DOMContentLoaded", function () {
  //메뉴 항목들 가져오기
  const menuList = document.getElementById("foods");

  //'renderMenu()'메뉴 항목들을 화면에 출력하는 함수
  function renderMenu(items) {
    //? 메뉴리스트 내부의 html을 초기화
    menuList.innerHTML = "";

    //각 메뉴 항목에 대해 div 요소 생성 추가
    items.forEach((item) => {
      const foodItem = document.createElement("div");
      //food클래스 추가
      foodItem.classList.add("food");
      foodItem.innerHTML = `
        <h2>${item.name}</h2>
        <p>${item.description}</p>
      `;
      //menuList에 foodItem을 추가
      menuList.appendChild(foodItem);
    });
  }
  //페이지 로드 될 때 초기 메뉴 항목들 표시
  renderMenu(menuItems);

본격 함수 만들기(2)

- 검색어와 일치하는 항목 필터링

  //검색 입력 상자를 가져와 입력 이벤트 추가
  const searchInput = document.getElementById("search");
  searchInput.addEventListener("input", function () {
    const searchText = searchInput.value.trim().toLowerCase();
    //메뉴 항목들 중에서 검색어와 일치하는 항목들 필터링
    const filteredItem = menuItems.filter(
      (item) =>
        //메뉴 항목의 이름에 검색어가 포함되는지 확인
        item.name.toLowerCase().includes(searchText) ||
        //메뉴 항목의 설명에 검색어가 포함되는지 확인
        item.description.toLowerCase().includes(searchText)
    );
    //필터링된 항목들 다시 화면에 표시
    renderMenu(filteredItem);
  });
});

`고기`가 포함된 메뉴 항목만 화면 노출

성공!

나 사실 잘 모르겠어.