한식 메뉴 렌더링하기
const menuItems = [
{
name: "비빔밥",
description: "밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리",
},
{
name: "김치찌개",
description: "김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리",
},
{ name: "불고기", description: "양념한 고기를 구워서 먹는 한국 요리" },
{
name: "떡볶이",
description: "떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식",
},
{
name: "잡채",
description: "당면과 여러 채소, 고기를 볶아 만든 한국 요리",
},
];해당 배열을 렌더링하는 간단한 페이지를 렌더링했다. createElement()를 통해 <ul> 태그의 하위로 <li>를 생성하여 innerHTML로 내부 텍스트를 타이틀과 설명을 덧붙여 appendChild()로 생성해 주었다.
배열을 순회해야 하기 때문에 forEach()함수를 사용하고 저번처럼 script가 body의 생성 전에 실행 되기 때문에 appendChild()에 null을 추가하게 되는 에러가 발생했기 때문에 배열 순회 함수를 window.onload를 통해 html문서가 모두 로드되고 나서 실행되도록 구현했다.
만들어진 태그에 스타일을 주기위해서 setAttribute()를 통해서 div에 listBox라는 id를 생성했다.
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script>
const menuItems = [
{
name: "비빔밥",
description: "밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리",
},
{
name: "김치찌개",
description: "김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리",
},
{ name: "불고기", description: "양념한 고기를 구워서 먹는 한국 요리" },
{
name: "떡볶이",
description: "떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식",
},
{
name: "잡채",
description: "당면과 여러 채소, 고기를 볶아 만든 한국 요리",
},
];
const loadList = () =>
menuItems.forEach((e) => {
const listBox = document.createElement("li");
listBox.setAttribute("id", "listBox");
const subTitle = document.createElement("h2");
const desc = document.createElement("div");
subTitle.innerHTML = e.name;
desc.innerHTML = e.description;
listBox.appendChild(subTitle);
listBox.appendChild(desc);
document.getElementById("menuBox").appendChild(listBox);
});
window.onload = function () {
loadList();
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
body > h1 {
text-align: center;
}
#menuBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#description {
text-align: center;
}
#listBox {
text-align: center;
width: 900px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
}
</style>
<body>
<h1>한식 메뉴</h1>
<ul id="menuBox"></ul>
</body>
</html>
프론트가 하고싶어요