# UI 만들기



✨과제. 색상을 빨간색 배경색을 검은색으로 변경해봅시다.

{% code overflow="wrap" %}
```javascript
  <script>
        document.getElementById('hello').style.color = "red";
        document.getElementById('hello').style.background = "rgb(0,0,0)";
        document.getElementById('hello').style.background = "#000000";
  </script>
```
{% endcode %}

✨실습. 폰트와 폰트사이즈 변경&#x20;

{% embed url="https://htmlcolorcodes.com/" %}
색  rgb와 hex 값 알려주는 사이트&#x20;
{% endembed %}

UI 만드는 스텝&#x20;

1. HTML / CSS 로 미리 디자인&#x20;
2. 필요할 때 호출

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FplZBW2Leo4NAVfUBE9Ev%2FScreenshot_33.png?alt=media&#x26;token=5e333135-0790-433f-8976-6216908e03ea" alt=""><figcaption><p>js002.html 파일 생성</p></figcaption></figure>



{% code title="main.css" overflow="wrap" %}
```css
.alert-box {
    background-color: cornflowerblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none;
}
/* css 파일생성  */
```
{% endcode %}



✨실습. 알림창 띄우는 스크립트 작성

✨실습. 알림창 닫기 버튼 만들고 닫기 기능 스크립트 작성



<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FiHTw7dGjctlNJc8g9EBr%2FScreenshot_35.png?alt=media&#x26;token=f62848d4-78a3-4fb0-b529-994fc1fa8f6e" alt=""><figcaption><p>UI 컴포넌트 예시</p></figcaption></figure>

##

##

## 😒완성된 코드만 보고 따라치는건 아무 의미없다.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="alert" class="alert-box" >
        알림창
        <button onclick="document.getElementById('alert').style.display = 'none'">닫기</button>
    </div>
    <button onclick="document.getElementById('alert').style.display = 'block'">알림창을 보여줘!</button>
</body>

</html>
```









