오늘은 큰 수확이 있었다. 바로 간단하게나마 한식 메뉴를 렌더링하여 메뉴를 만들어 내는 데에 성공한 것이다. 비록 과정이 순탄하지는 않았지만 그런 만큼 배운 것은 많은 것 같다.
위는 전통적인 느낌을 낸다고 평소 사용하지 않는 색을 사용했더니 이상한 색감이 나와버린 결과물이다. 나전칠기 같은 느낌을 원했는데, 그런 배경을 만들어내려면 아예 이미지를 가져와야 할 것 같아서 포기했다. 그래도 다음에 한 번 더 시도해볼 예정이다.
이 메뉴를 만든다고 고생을 제법 했는데, 아무리 스크립트를 재구성해보아도 작동이 되지 않아 골머리를 앓았다. 그런데 혹시 몰라 <script> 태그를 <head> 안이 아니라 <body> 밑으로 옮겨보니 정상적으로 작동하는 것이다. 이와 관련하여 여러 게시글들을 검색해 보았는데, <script> 태그 위치에 따라 실행되는 순서가 달라진다는 것을 알게 되었다. 그래서 이번처럼 <body> 태그 안에 있는 요소들에 스크립트를 적용하려면 <body> 태그가 실행되고 난 다음에 <script> 태그가 실행되도록 뒤에 붙여야 하는 것 같다.
또 하나의 성과는 이렇듯 메뉴를 렌더링하는 코드를 짜낸 것이다.
mainItems.forEach((item) => {
let name = item.name;
let description = item.description;
let temp_html = `
<li class="main">
<h2>${name}</h2>
<p>${description}</p>
</li>`
$("#main-list").append(temp_html);
});
이전에 한 과제를 참조해서 작성한 코드이지만, 지금으로써는 응용이 가능했다는 것만으로도 성과라고 할 수 있을 것이다. 적어도 스크립트 위치 때문에 작동하지 않는 코드를 가지고 하루종일 재조립을 하면서 변수 선언의 개념에 대해서는 확실히 이해한 것 같다.
'til' 카테고리의 다른 글
| 한식 메뉴 렌더링 4일차(完) (0) | 2024.07.08 |
|---|---|
| 한식 메뉴 렌더링 3일차 (1) | 2024.07.05 |
| 한식 메뉴 렌더링 1일 차(HTML에서 웹페이지 구성하기) (0) | 2024.07.03 |
| 프론트엔드 개발자 JD 분석 (0) | 2024.07.01 |
| 개발 아티클 스터디(3) (0) | 2024.06.28 |