> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/ui.md). # UI 만들기 ✨과제. 색상을 빨간색 배경색을 검은색으로 변경해봅시다. {% code overflow="wrap" %} ```javascript ``` {% endcode %} ✨실습. 폰트와 폰트사이즈 변경 {% embed url="" %} 색 rgb와 hex 값 알려주는 사이트 {% endembed %} UI 만드는 스텝 1. HTML / CSS 로 미리 디자인 2. 필요할 때 호출

js002.html 파일 생성

{% code title="main.css" overflow="wrap" %} ```css .alert-box { background-color: cornflowerblue; padding: 20px; color: white; border-radius: 5px; display: none; } /* css 파일생성 */ ``` {% endcode %} ✨실습. 알림창 띄우는 스크립트 작성 ✨실습. 알림창 닫기 버튼 만들고 닫기 기능 스크립트 작성

UI 컴포넌트 예시

## ## ## 😒완성된 코드만 보고 따라치는건 아무 의미없다. ```html Title
알림창
```