UI 만들기

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

  <script>
        document.getElementById('hello').style.color = "red";
        document.getElementById('hello').style.background = "rgb(0,0,0)";
        document.getElementById('hello').style.background = "#000000";
  </script>

✨실습. 폰트와 폰트사이즈 변경

UI 만드는 스텝

HTML / CSS 로 미리 디자인
필요할 때 호출

main.css

.alert-box {
    background-color: cornflowerblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none;
}
/* css 파일생성  */

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

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

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

<!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>

Previous개발환경 세팅과 자바스크립트 근본 Nextfunction

Last updated 2 years ago