한식 메뉴 렌더링 두번째는 틀과 꾸미기를 해야 한다.
어떤 방식으로 꾸미기를 해야 할 지 감이 안잡혀, 부트스트랩(BootStrap)을 가져와서 실행했다.
script문 안에서 ul 태그 안에 li 태그를 만들기 때문에
그에 따른 CSS에 대한 script문도 같이 적어야 한다.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
이 문법을 body 태그 안에 넣어서 script문 안에서 부트스트랩을 사용할 수 있게 한다.
list-group 클래스 안에 있는 아이템들에 대한 설정으로 폰트 사이즈 증가, 배경색 파란색 등등을 설정한다.
어제의 스크립트문에서 listItem.classList.add('list-group-item');이 추가되었다. 각 리스트 아이템에 대해 list-gruop-item이라는 클래스를 속성으로 추가하는 것이다.
미션에 대해 느낀점
이번 미션은 하루만에 할 수 있을 줄 알았는데, 어쩌다보니 두 번 TIL을 적게 되었다.
어제는 script를 어디에 적는 지에서 생각보다 시간이 걸렸고, 두번째로 TIL을 적으면서 velog가 html 태그처럼 마크다운(Markdown)이 가능하다는 점을 알게 되면서 마크다운을 복기하게 되었다.
원래 마크다운이란 것에 대해 알고는 있었는데, 마크업(MarkUp) 언어인 HTML을 하는 게 우선이다 보니 별로 신경을 안쓰고 있었다. 실제로 마크다운용으로 쓰이는 옵시디언(Obsidian) 앱도 다운받아놓고 한 번도 사용해 본 적이 없다.
그렇다가 마크다운에 대한 것을 velog를 통해 복기하게 되면서 어제 시간을 좀 크게 뺏긴 것 같다.
그리고 script 문 안에서 CSS에 대한 설정은 생각을 했지만, 프레임워크에 대한 설정도 가능한 것을 생각 못했었다. 처음에 부트스트랩을 생각했지만, 그 다음에 li 태그에 대한 것을 생각을 못했었는데, 생각보다 쉽게 설정이 가능해서 또 새로운 것을 공부하게 됐다.
