웹 사이트를 운영하다보면, 방문객들에게 이런 저런 안내가 필요해집니다. 아주 아주 예전에는 '팝업창'이라는 형식으로 사실상 브라우저 창을 작은 크기로 새로 띄우는 방식을 이용하곤 했었지만(← 요즘 시대에서는 공부할 필요 없는 내용) 최근 웹환경에서는 브라우저 창을 새로 띄우는 팝업은 보안취약 등의 이유로 거의 사용하지 않습니다.
요즘은 보통 Modal 이라고 부릅니다.
Javascript로 Alert 띄우기
자바스크립트로 띄우는 브라우저에 기본 내장되어 있는 Alert은 모양이 별로 예쁘지 않습니다. 그래서 주로 개발자들이 테스트를 위해서 주로 사용하고, 웹사이트 방문객들에게 보여질 내용은 보통 그렇게 띄우지 않습니다.
크롬 개발자모드(F12) → Console 창에 다음과 같이 타이핑하고 Enter를 눌러봅니다.
alert("나는 기본 얼럿창 입니다!");
그러면 위와 같은 모습의 Alert 창으로 표시가 됩니다.(저 정도면 생각보다 예쁜거 같습니다. ㅡ,.ㅡ;)
저 얼럿창 안에 TEXT 이외로 아이콘도 넣고, 이미지도 넣는 등 자유자재로 구서해서 사용하려면 아무래도 기본 얼럿창보다는, 직접 코딩을 해서 사용하는 게 좋습니다.
커스텀 알림창 원리(Custom Alert)
보통 사용자들이 클릭하면 뾰로롱~ 보여주는 알림창은 사실, 아주 작은 HTML 코드의 조각이라고 보면 됩니다. 주로 div로 둘러싸여 있죠. HTML로 미리 다 만들어 놓은 후 보였다 안보였다하는 것은 CSS에서 display 속성을 이용해주는 겁니다.
display : none; 하면 안보이고 display : block; 하면 보이고
(※ block, inline, inline-block 속성에 대해서는 따로 한번 찾아보세요^^)
그러면 display 속성을 손 안대고 none 또는 block로 변경시키는 조작을하려면 어떻게 해야 할까요?
맞습니다! Javascript를 사용하면 되는거죠!
다음과 같이 연습 코드를 만들어보았습니다.(이전 포스팅에서 사용한 부트스트랩용 템플릿 그대로 사용했습니다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap - Study</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
background-color: #333333;
}
p {
font-size: 24px;
}
.noticeBox {
background-color: dodgerblue;
padding: 30px;
color: white;
border-radius: 10px;
display: none;
}
</style>
</head>
<body>
<div class="container text-center">
<h1 id="name" class="text-center mt-5 mb-5 text-white">알림창 열기</h1>
<button class="btn btn-secondary mt-5" onclick="alertOn()">알림창 열기</button>
</div>
<div class="noticeBox text-center mt-5">
<p class="alert mt-5">알림창 뾰로롱!</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
브라우저에서 열어 보면 다음과 같습니다.
CSS에서 display : none;을 display : block; 으로 변경해서 브라우저를 새로고침 해보면, 하단에 알림창을 코딩해둔 부분이 나타난 상태입니다.
즉, 이렇게 알림창 뾰로롱 부분을 미리 만들어 둔 후, display : none;을 적용해두면 최초에 웹페이지가 로딩될 때는 알림창 부분이 숨겨져서 보이지 않는 상태가 됩니다.
이후 자바스크립트로 조작을 해서, display 속성을 block으로 바꿔주기만 하면, 만들어두었던 얼럿창이 나타나게 되는 원리죠. 알고 보면 아주 간단하지 않은가요?
Button 기능 구현하기
버튼을 클릭하면 함수를 호출해서 작동하도록하기 위해 일단 함수를 하나 만들고, 버튼에는 다음과 같은 자바스크립트 코드를 추가로 적용해보았습니다.
<button class="btn btn-secondary mt-5" onclick="alertOn()">알림창 열기</button>function alertOn() {
document.querySelector(".noticeBox").style.display = "block";
}
버튼을 클릭하면, 알림창 뾰로롱! 이 잘 나타납니다.
잠깐, 매우 중요한 TMI
class명이나, Javascript 변수명, 함수명 등을 직접 사용할 때는, 2단어 이상으로 조합하는 습관을 들이는 게 좋습니다. 예를 들어 alert 이라고 쓰는 것보다는 alertOn이 좋고, notice라고 사용하는 것보다는 noticeBox라고 사용하는 게 좋습니다.
만약에 class 명에 modal이라고 사용을 했다면, modal 이라는 클래스명은 이미 Bootstrap에서 사용하고 있기 때문에 부트스트랩이 이미 정의해 놓은 영향을 받을 수 있습니다. 그래서 이미 만들어둔 모달창이 안보이게 될 것입니다.
자바스크립트의 경우에도 미리 정의되어 사용하는 명령어 들이 존재하기 때문에, 내가 만들어서 사용하는 이름들과 서로 충돌할 가능성이 간혹 존재합니다. 그냥 초보자들은 Camel Case에도 익숙해질 겸, 2개 단어 이상씩 묶어서 사용할 것을 권장해드리는 바입니다.
알림창에 버튼을 하나 더 만들고 닫기 기능 적용하기
[알림창 열기] 버튼으로 띄운 모달창에는 닫기 버튼이 마련되어 있지 않습니다.
닫기 버튼을 하나 만들어 넣고, 클릭하면 모달창이 닫히게 하려면 어떻게 코딩하면 좋을까요?
알림창 열기 함수를 만들었으니, 닫기 함수를 하나 더 만들면 되는거죠 뭐.
<body>
<div class="container text-center">
<h1 id="name" class="text-center mt-5 mb-5 text-white">알림창 열기</h1>
<button class="btn btn-secondary mt-5" onclick="alertOn()">알림창 열기</button>
</div>
<div class="noticeBox text-center mt-5">
<p class="alert mt-5">알림창 뾰로롱!</p>
<button class="btn btn-secondary" onclick="alertOff()">알림창 닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function alertOn() {
document.querySelector(".noticeBox").style.display = "block";
}
function alertOff() {
document.querySelector(".noticeBox").style.display = "none";
}
</script>
</body>
제대로 잘 동작하는 것 같습니다.
일단 이 정도만 이해를 해두면, 실무에서도 얼마든지 미리 만들어둔 알림창을 보였다~ 안보였다~ 해줄 수가 있게 됩니다. 다만, 예쁘게 꾸미는 일이 좀 남아 있긴 합니다.
코드작성 활용 팁
여기서 코딩학습을 위해 한발 더 나가보자면, 앞에서 사용한 2개의 서로 다른 함수를 1개의 함수로 만들수가 있습니다. 초보자인 경우 비록 지금 당장은 잘 그려지지 않더라도 이상한 일은 아닙니다. 저도 그랬으니까요.
함수명을 alertToggle() 정도로 작명한 다음, 2개의 버튼에서는 모두 이 함수를 호출하게 되는데요, 함수 안에서 IF 조건문을 사용해줌으로써 분기하는 방식을 한번 생각해볼 수 있겠습니다.
다양한 방법이 존재하겠지만 저는 이렇게 한번 구성해보았습니다.
<script>
let switchNow = false; //스위치 상태 기억할 변수
function alertToggle() {
if (switchNow == false) { //스위치가 꺼져 있으면
document.querySelector(".noticeBox").style.display = "block"; // 보여주고
switchNow = true; // 스위치는 켠 상태로 바꿈
} else {
document.querySelector(".noticeBox").style.display = "none"; // 숨겨주고
switchNow = false; //스위차는 끈 상태로 바꿈
}
}
</script>
잘 작동하니 기부니가 좋습니다.^^
마치며
몇 차례에 걸쳐 HTML / CSS / Javascript 기초 사용법을 정리해보고 있습니다. 너무 쉬운 내용이라, Web 자원을 낭비하는 것 같기도 하지만, 저도 완전 초보였던 시절이 있었는데 대부분의 개발 블로그에 있는 내용으로는 설명 수준이 높아 이해가 어려웠던 것들이 많았습니다.
나중에라도 코딩에 흥미를 가지고 깨작거리게 될 아들놈 1, 2호를 위해 아주 기초적인 내용부터 기록해둬야 겠다는 생각으로 작성해보고 있습니다. 물론 저도 언젠가 미래의 꿈나무인 아이들에게 코딩을 가르쳐주는 일을 만나게 될 지도 모를 일이구요. 누군가에서 쉽게 설명을 한다는 게 결코 쉬운 일이 아님을 또 하나씩 배우고 있습니다.^^
즐거운 코딩 생활, 즐코딩.
KINcodin.
'Javascript' 카테고리의 다른 글
| forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) (0) | 2023.01.04 |
|---|---|
| 이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리 (0) | 2023.01.03 |
| Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까? (0) | 2022.12.30 |
| getElementById를 쓸까, querySelector를 쓸까? (0) | 2022.12.27 |
| Javascript 완전 기초 - 자바스크립트는 무엇에 쓰는 물건인고? (0) | 2022.12.25 |
댓글