Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기)

Javascript로 알림창 보이기 / 숨기기

웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 display 속성 값을 'none' 이나 'block'으로 변경하는 방법을 사용하는 경우가 많습니다.

물론 이와 같은 방법은 알림창 뿐 만이 아니라, 모든 HTML의 엘리먼트 요소들에 적용이 가능합니다. 동작원리도 매우 간단하기 때문에 한번 들여다보고 이해를 해두면, 동적인 UI를 만드는데 아주 훌륭한 기초지식이 되어줄 것입니다.

간단한 HTML / CSS 예제 코드를 통해 함께 살펴보겠습니다.

<body>
   <div class="alert-box" id="notice">Notice</div>
   <button>버튼</button>
</body>

.alert-box {
  background-color: slategray;
  padding: 40px;
  color: white;
  border-radius: 5px;
}

브라우저에서 실행해보면, 아래와 같은 모습을 확인할 수 있습니다.

공지-알림창과-버튼으로-UI를-구성했습니다. — 공지 알림창과 버튼으로 UI를 구성했습니다.

공지 알림창을 숨겨 두자

위에서 디자인을 해서 만들어둔 Notice 공지 알림창을, 웹문서가 로딩되는 초기에 숨겨두기 위해서는 CSS에 display: none; 속성을 추가해주기만 하면 됩니다. 화면표시가 없다는 의미죠.

.alert-box {
  background-color: slategray;
  padding: 40px;
  color: white;
  border-radius: 5px;
  display: none;
}

브라우저가 새로고침 되면, 버튼 하나만 남아 있습니다. 그 위에 있던 Notice 공지창은 존재하기는 존재하는데 브라우저가 표시만 해주지 않고 있는 상태입니다.

버튼을 클릭하면 Notice 나타나게

버튼을 클릭하면 숨겨두었던 Notice 공지창을 화면에 표시되게 하려면, CSS의 display: none 부분을 display: block 으로 변경해주면 됩니다. 스타일 변경은 Javascript로 핸들링 하면 될 것 같죠?

일단 버튼을 클릭해야 할테니 버튼에서 onclick 속성을 사용해보겠습니다.

이전 포스팅에서 몇번 비슷한 패턴을 정리했더니, 아주 쉽게 눈에 들어오는 것 같습니다.

<body>
    <div class="alert-box" id="notice">Notice</div>
    <button onclick="document.querySelector('#notice').style.display = 'block';">버튼</button>
</body>

버튼을 클릭하면(onclick) 따옴표 안에 들어 있는 document.querySelector('#notice').style.display = 'block'; 자바스크립트 코드가 실행이 되는 방식입니다. 그러면 CSS의 display 속성이 block으로 변경되면서 화면에 나타나게 됩니다. 쉽죠?

버튼을-클릭하면-공지-알림창이-나타납니다. — 버튼을 클릭하면 공지 알림창이 나타납니다.

유의할 점

아주 조금은 유의할 점이 있습니다. 분명히 코드를 제대로 작성하 것 같은데, 정작 동작하지 않는... 초보자 일 때는 조금 당황스러운 경우가 될 수도 있거든요. 아래 2개의 코드를 유심히 살펴보세요.

첫번째 코드는 에러.

<button onclick="document.querySelector("#notice").style.display = "block";">버튼</button>

두번째 코드는 제대로 실행이 됩니다.

<button onclick="document.querySelector('#notice').style.display = 'block';">버튼</button>

차이점은 홑따옴표(')를 사용한 부분 때문입니다.

Javascript는 따옴표 안에 같은 따옴표를 중복해서 포함할 수가 없습니다. 즉,

"배가고프다. 그래서 나는 "라면"을 끓여 먹었다" 라는 표현식은,

"배가고프다. 그래서 나는 '라면'을 끓여 먹었다"라고 써준던가

'배가고프다. 그래서 나는 "라면"을 끓여 먹었다'라고 써줘야 합니다.

겹따옴표와 홑따옴표의 Nesting 형태를 살펴보시면 금방 이해가 갈 것입니다.

복잡한 코드는 함수로 만들어 사용

곁다리로, 함수를 만들어 사용하는 방법까지 살펴보기로 합니다. HTML 태그의 속성 위치에, 쭈루륵~ 긴 문장의 자바스크립트 코드를 그냥 사용을 하는 것보다 함수로 따로 빼서 사용하는 것이 가독성면에서도 유리하기 때문입니다.

그리고, 해당 기능은 필요한 시기에 따라 보였다, 숨겼다 하면서 반복적으로 사용될 것이기 때문에 별도의 함수로 만들어 놓고 사용하는 것이 효율적이기 때문입니다.

버튼 태그가 onclick="noticeShow()" 형태로 매우 간결해졌습니다. 코드 내용이 한눈에 잘 들어옵니다.

<!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>JavaScript Study</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="alert-box" id="notice">Notice</div>
    <button onclick="noticeShow()">버튼</button>
  </body>

  <script>
    function noticeShow() {
      document.querySelector("#notice").style.display = "block";
    }
  </script>
</html>

닫기 버튼 만들고 + 닫기 기능 함수 추가

열기 기능을 만들었으니, 반대로 닫기 기능도 만들어서 적용해두면 좀 더 완벽하게 동작할 것 같습니다.

공지 Notice 아래에 버튼을 하나 더 만들고 noticeHide라는 이름으로 숨기기 기능 함수를 만들어 적용해봅니다.

<!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>JavaScript Study</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="alert-box" id="notice">
      <p>Notice</p>
      <button onclick="noticeHide()">닫기</button>
    </div>
    <button onclick="noticeShow()">버튼</button>
  </body>

  <script>
    function noticeShow() {
      document.querySelector("#notice").style.display = "block";
    }
    function noticeHide() {
      document.querySelector("#notice").style.display = "none";
    }
  </script>
</html>

보이기 기능의 응용판이라, 간단하게 복습할 수 있어서 좋군요. Notice 아래에 있는 [닫기] 버튼을 클릭하면 Notice 창이 다시 숨김처리가 잘 작동됨을 알 수 있습니다.

함수 개선하기(파라미터 사용)

가만히 살펴보니 닫기, 열기 각각 기능하고 있는 2개의 함수를 1개의 함수로 줄일 수 있지 않을까? 하는 생각이 듭니다. noticeShow() 함수나 noticeHide() 함수나 거의 비슷하게 생겼잖아요?

함수를 호출할 때 "값 전달"을 할 수 가 있는데요, 바로 파라미터라고 불리는 매개변수를 이용하여 함수에 값을 넘겨줄 수 있습니다. toggleNotice(전달)라는 함수를 만들어서, 값을 주고 받을 수 있게 했습니다.

none과-block를-toggleNotice함수-실행시-전달하고-있습니다 — none과 block를 toggleNotice함수 실행시 전달하고 있습니다

최종 완성 코드

최종 완성된 코드는 다음과 같습니다.

<!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>JavaScript Study</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="alert-box" id="notice">
      <p>Notice</p>
      <button onclick="toggleNotice('none')">닫기</button>
    </div>
    <button onclick="toggleNotice('block')">버튼</button>
  </body>

  <script>
    function toggleNotice(전달) {
      document.querySelector("#notice").style.display = 전달;
    }
  </script>
</html>

마치며

Javascript를 이용해서 CSS를 변경하는 방법을 알아보면서, 반복되는 긴 코드를 함수로 축약하여 활용하는 방법까지 더불어 살펴봤습니다. 함수를 잘 사용하면 어째 뭔가 점점 더 코딩을 잘 하게 되는 것 같은 기분 마저 들게 되는 것 같습니다.

함수(function)에서 파라미터를 이용하는 방법은 완전 초보일 때는 활용방법이 잘 떠오르지 않을 때가 많더라구요. 그런데 코딩을 조금씩 점점 더 배워나가다 보면, 파라미터를 활용하는 방법을 스스로 찾아서 발전하게 되는 것 같습니다.

프로그래밍의 세계에는 머리 복잡한 '알고리즘'의 영역도 존재하지만, 기본적인 측면에서 중요한 점은 이렇게 서로 정의되고 약속된 내용을 이해하고 사용하는 데 있는 것 같습니다.

약속 잘 지키는 사람이 코딩도 잘 합니다.^^

즐거운 코딩생활, 즐코딩.

KINcoding.

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

정규식, 정규표현식, Regular Expression, RegExp 완전 기초 정리 (0)	2023.01.23
JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter) (0)	2023.01.16
CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 (0)	2023.01.14
Node.js + Express로 초간단 서버 만들기, 3분 컷 (0)	2023.01.08
switch 구문? - 가끔 사용되니 if와 비교하여 이 참에 정리 (0)	2023.01.06

즐코딩 - KINcoding

Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기)