사전 캠프/달리기반 과제 모음

한식 메뉴 렌더링하기 (2)

Iruka913 2024. 9. 11. 17:36

바로 실전으로 들어가보자. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>한식 메뉴</title>
    <style>
        .title { /* 제목의 CSS입니다. */
            margin-top: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .menu-item { /* 메뉴에 대한 CSS입니다. */
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 300px;
            height: 150px;
            margin: 30px auto 0px auto;
            box-shadow: 2px 2px 2px black;
            border: 1px solid black;
            text-align: center;
        }
       
    </style>
</head>

<body>
    <h1 class="title">한식 메뉴</h1>
    <div id="menu-list"></div>
    <script>
        const menuItems = [ // 메뉴 아이템의 변수 선언.
            { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
            { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
            { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
            { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
            { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
        ];

        const menuList = document.querySelector('#menu-list'); // 선언된 menu-list 아이디에 대한 html 요소 선택

        menuList.innerHTML = menuItems.map((item) => // menuitem에 대한 반복. 항목을 순회하며 html 리스트 항목으로 변환.
        `<li class="menu-item">
            <h2>${item.name}</h2>
            <p>${item.description}</p>
          </li>`) // 어떤 html을 추가할 것인지.
          .join(''); // 추가.
    </script>
</body>

</html>

 

스크립트를 바디 쪽에 썼는데, 먼저 id를 선언한 뒤에 선언된 id를 기반으로 변수를 만들거나 뭘 할 수 있기 때문이다. 이거 때문에 상당히 애를 먹었다....