JavaScript (Alert)
경고창과 같이 화면에 특정 행동을 했을 때 뜨는 창을 자바스크립트로 만들어 보아요~
※ UI 만드는 법
1. 미리 디자인을 해놓고 숨긴다.
2. 버튼을 누르거나 특정 행동을 할 때 볼 수 있게 구현한다.
UI 만드는 방법의 순서대로 Alert 기능을 구현해 보겠습니다.
1. 미리 디자인 하기!
① html 파일 생성 : alert.html (보여지는 디자인)
<!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">Alert 박스</div>
<button>버튼</button>
</body>
</html><link rel="stylesheet" href="main.css">
: css 파일을 html에 적용시키기 위해 링크로 불러오는 것입니다.
href=""부분에 해당 css 파일의 이름과 경로를 작성하면 됩니다.
<div class="alert-box" id="alert"> Alert 박스</div>
: Alert로 띄울 박스를 먼저 생성해 줍니다.
② css 파일 생성 : main.css (css로 숨기기)
.alert-box {
background: #c4c4ed;
color: #318831;
padding: 20px;
border-radius: 5px;
display: none; /* 숨기기 */
}.alert-box : class가 alert-box 인 요소를 지칭함
(.은 class를 의미, #은 id를 의미)
background : 배경 색 (원하시는 색상 코드 작성해주시면 됩니다.)
color : 글씨 색상 (원하시는 색상 코드 작성해주시면 됩니다.)
padding : 상자와 글씨 사이의 여백영역입니다.
border-radius
: border(테두리, 가장자리), radius(둥글게) -> 박스의 모서리를 둥글게 만드는 명령어입니다.
* display : 해당 요소의 보여지는 상태를 의미합니다.
none으로 하면 숨겨지고, block으로 하면 보여지게 됩니다.
2. 버튼을 누르면 보여지게 하기
ⓛ alert.html의 <button>부분에 기능을 추가해봅시다~
<!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">Alert 박스</div>
<button onclick="">버튼</button>
</body>
</html>앞서 Selector를 보고 오신 분이라면 ""안에 작성해야 하는 기능이 어떤 식일지 감이 올 것 입니다.
onclick 은 클릭 했을 때 ""안에 적은 자바스크립트를 실행하게 해주는 기능입니다.
한번 작성해 보시고 아래 풀이를 확인해주세요~
Hint! style.display를 none 에서 block으로 바꾸어주면 됩니다.
<button onclick="document.getElementById('alert').style.display='block';">버튼</div>
작성 완료 하시고 실행해 보시면 버튼 클릭 시 Alert 박스가 보여지는 것을 확인하실 수 있습니다.
이러한 Alert 기능을 활용하여 메뉴 이미지 클릭 시 보여지는 메뉴, 팝업 등을 구현하실 수 있습니다.
< 연습문제 >
닫기 버튼에 기능을 추가하여 열린 Alert 박스를 닫아봅시다.
<!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">Alert 박스<button>닫기</button></div>
<button onclick="document.getElementById('alert').style.display='block';">버튼</button>
</body>
</html>풀이
<div class="alert-box" id="alert">Alert 박스
<button onclick="document.getElementById('alert').style.display='none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display='block';">버튼</button>
보통은 html 안에 자바스크립트 기능을 직접 사용하지는 않습니다.
너무 길어서 보기 않좋기 때문에 다른 방법을 사용하여서 자바스크립트 기능을 구현할 수 있습니다.
다른 방법은 다음 포스팅에서~
NEXT > JavaScript (Function)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript (EventListener) (0) | 2021.08.06 |
|---|---|
| JavaScript (Parameter) (0) | 2021.08.05 |
| JavaScript (Function) (0) | 2021.08.04 |
| JavaScript (Selector) (0) | 2021.08.01 |
| Ajax Tutorial (0) | 2021.07.13 |
