1. HTML, CSS로 미리 디자인
- HTML 구조:
- .alert-box 클래스를 가진 <div> 요소는 알림창을 감싸는 컨테이너 역할을 합니다.
- <p> 요소에 id="alert-text"가 지정되어 있으며, 이 부분은 알림창에 표시될 텍스트를 나타냅니다.
- 닫기 버튼은 <button> 요소로 표현되고, id="close"로 식별됩니다. 이 버튼을 클릭하면 알림창이 닫히게 됩니다.
- 두 개의 버튼(ID와 P/W)은 각각 알림창열기() 함수를 호출하면서 알림창을 보여줍니다.
- CSS 스타일:
- .alert-box 클래스는 알림창의 스타일을 지정합니다.
- padding: 20px;: 알림창의 내부 여백(padding)을 20px로 설정합니다. 이렇게 함으로써 텍스트와 경계 사이의 공간을 제공합니다.
- color: white;: 알림창 내부의 텍스트 색상을 흰색(white)으로 설정합니다. 이렇게 하면 하늘색 배경에 흰색 텍스트가 잘 보이게 됩니다.
- border-radius: 5px;: 알림창의 테두리를 둥글게 만듭니다. 이렇게 함으로써 알림창이 더욱 부드러운 느낌을 가집니다.
- display: none;: 알림창의 초기 상태를 보이지 않도록 처리합니다. 즉, 평소에는 알림창이 화면에 표시되지 않습니다. 알림창이 필요할 때만 display: block;을 통해 화면에 나타낼 수 있습니다.
// CSS/main.css 파일
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 평소에는 보이지 않게 처리하고, 보이게 하려면 none 대신 block */
}
2. <script>버튼 누르면 보여주셈</script>
- JavaScript 기능:
- document.getElementById('close').addEventListener('click', function() { ... });: 닫기 버튼(X 버튼)에 클릭 이벤트 리스너를 추가합니다. 이 리스너는 닫기 버튼이 클릭되었을 때 실행되며, 알림창을 닫는 역할을 합니다. 즉, display: none;으로 설정하여 알림창을 감춥니다.
- function 알림창열기(displayStyle, text) { ... }: 알림창을 보여주는 함수입니다. displayStyle은 알림창의 스타일을 설정하며, text는 알림창 내부의 텍스트를 설정합니다. 이 함수는 두 개의 매개변수를 받아와서 알림창의 스타일과 텍스트를 변경하고, 알림창을 화면에 표시합니다.
- 사용된 문법
1) document.getElementById('close')
: DOM(Document Object Model)을 사용하여 id가 'close'인 HTML 요소를 찾습니다. 이는 닫기 버튼(X 버튼)을 가리킵니다.
2) addEventListener('click', function() { ... })
: addEventListener 함수를 사용하여 클릭 이벤트를 감지하는 이벤트 리스너를 추가합니다. 이벤트 리스너는 'click'이라는 이벤트(마우스로 클릭하는 동작)를 기다리며, 클릭이 발생하면 함수 내부의 코드를 실행합니다.
3) function() { ... }
: 이벤트 리스너에 전달되는 콜백 함수입니다. 클릭 이벤트가 발생하면 실행되는 코드를 이 부분에 작성합니다.
4) 알림창닫기()
: 이벤트 리스너 함수 내에서 호출하는 함수입니다. 알림창닫기() 함수를 호출하여 알림창을 닫는 기능을 구현합니다
5) function 알림창열기(displayStyle, text) { ... }
: 알림창열기라는 이름의 함수를 선언합니다. 이 함수는 displayStyle과 text라는 두 개의 매개변수를 받습니다.
6) document.getElementById('alert').style.display = displayStyle;
: document.getElementById('alert')를 사용하여 id가 'alert'인 HTML 요소를 찾고, 해당 요소의 스타일 속성 display를 displayStyle로 설정합니다. 이를 통해 알림창을 보이게 하거나 숨길 수 있습니다.
7) document.getElementById('alert-text').innerText = text;
: document.getElementById('alert-text')를 사용하여 id가 'alert-text'인 HTML 요소를 찾고, 해당 요소의 내부 텍스트를 text로 설정합니다. 이를 통해 알림창 내용을 변경할 수 있습니다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>alert Box UI</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="alert-text">알림창</p>
<!-- <button onClick="알림창열기('none');">X</button></p> -->
<button id="close">X</button>
</div>
<button onClick="알림창열기('block', '아이디를 입력하세요')">ID</button>
<button onClick="알림창열기('block', '비밀번호를 입력하세요')">P/W</button>
<!-- onClick은 버튼클릭 시 이 줄을 실행시켜주는 속성 -->
<script>
document.getElementById('close').addEventListener('click', function() {
// click 이벤트와 close라는 id를 가진 html 요소를 연결해서 콜백함수내 코드 실행
document.getElementById('alert').style.display = 'none'; // 알림창을 닫음
});
function 알림창열기 (displayStyle, text) {
document.getElementById('alert').style.display = displayStyle;
document.getElementById('alert-text').innerText = text;
}
</script>
</body>
</html>