본문 바로가기
JavaScript

[JavaScript] - Alert 박스 만들기

by nam_ji 2023. 10. 21.

동적 UI 만들기

Alert 박스

  • 기본적인 UI 만드는 법칙
    웹 페이지에서는 탭, 모달창, 서브메뉴 등 여러가지의 동적인 UI를 만들 수 있습니다.
    1. HTML, CSS로 미리 UI 디자인을 해둡니다. (평소에 숨겨둡니다.)
    2. 버튼을 누르거나 할 때 UI를 보여질 수 있도록 코드를 구성합니다.
  • Alert UI 디자인
  • 작업폴더에 작업할 html파일과 css 파일을 만들고 밑에 있는 코드를 작성합니다.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <div class="alert-box" id="alert">
            알림창
            <button onclick="document.getElementById('alert').style.display= 'none'">
                닫기
            </button>
        </div>
        <button onclick="document.getElementById('alert').style.display = 'block'">
            버튼
        </button>

    </body>
</html>
  • HTML 코드
.alert-box {
    background-color: skyblue;
    padding: 20px;
    color: black;
    border-radius: 5px;
    display: none;
}
  • CSS 코드
  • 평소에 UI를 숨기고 싶으면 display : none으로 해두고 보여주고 싶으면 display : block으로 해두면 됩니다.
  • 버튼을 눌렀을 때 Alert UI 보여주기
  • 버튼을 누르면 UI를 보여주기 위해서는 html 태그 내에 onclick 속성을 사용하면 됩니다.
  • 위의 코드에서 
    <button onclick="document.getElementById('alert').style.display = 'block'">
    여기 부분이 css로 display : none 상태를 block 상태로 변경시켜주는 코드입니다.
    html 내에 id가 alert인 스타일 코드를 display가 none 상태에서 block 상태로 바꿔주겠다는 의미입니다.
  • alert UI가 보여지면 닫기 버튼과 같이 생성이 되는데 여기서 닫기 버튼도 같은 의미로 block 상태인 display를 none으로 바꾸겠다는 의미입니다.

'JavaScript' 카테고리의 다른 글

[JavaScript] - 비교문 / 분기문 / 반복문 / 문자열  (0) 2023.10.25
[JavaScript] - 자바스크립트 기본 문법 정리  (0) 2023.10.25
[JavaScript] - 콜백함수 (Callback Function)  (0) 2023.10.25
[JavaScript] - 자바스크립트 작성방법  (0) 2023.10.20
[JavaScript] - 변수 / 자료형 / 대화상자 / 형변환  (1) 2023.10.17

관련글

티스토리툴바