JavaScript ep.2

이번에는 Alert 박스를 만들어 보려고 한다.

특별한거 없이 그냥 "열기" 누르면 열리고 "닫기" 누르면 닫히는 그런 Alert 박스를 만들어보자.

강의를 보니 뭐든 일단 만들어 놓고 안보기에 했다가 누르면 보이게하거나 처음부터 보이게하거나 하면 된다고한다;;;

일단 있어야 보여주든 안보여주든 하니 만들어 봤다.

<div class="alert-box">
  알림! 
<button>닫기</button>
</div>
<button>열기</button>

CSS는 그냥 강의에서 나온대로 그대로 사용했다...

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

이제 이렇게 하니 "alert-box"가 안보인다.
"display: none;" 이기 때문이다.

그럼 보여줄라면 어떻게 해야할까?
"display: none;" 을 "display: block;"으로 바꿔주면 짜잔하고 나올 것 같다.

저번 ep.1에서 했던 내용을 응용하면 쌉가눙하지 않을까?

하지만 조건이 있다... "열기" 버튼을 눌렀을때 보여주고 "닫기"누르면 사라지고 이걸 가능하게 해주는게 "onclick"이라는 친구다.

"onclick"이라는 친구는 HTML 태그 안에 사용하는 친구로 거의 모든 태그에 사용할 수 있다고 한다.

사용방법은 아래와 같다.

<div class="alert-box">
  알림! 
<button>닫기</button>
</div>
<button onclick="JavaScript코드">열기</button>

그럼 방법을 알았으니 사용해보자.

<div class = "alert-box" id = "alert">
  알림! 
<button>닫기</button>
</div>
<button onclick = "document.getElementById('alert').style.display = 'block';">열기</button>

ep.1에서 알게된 자바스크립트를 활용해서 적어줬다.
위 코드를 보면 "onclick" 클릭을 했을 때 "document.getElementById" 문서의 Id중 'alert'이라는 Id를 가진 애의 "style.display" 스타일의 디스플레이 "="를 'block'으로 바꿔줘! 라는 뜻으로 해석이 가능하다.

그럼 닫기는 'block'을 'none'으로만 바꿔주면!?
바로 해보자.

<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>

이렇게 하면 "열기", "닫기"가 완성됐다.ㅋㅋ

3줄 요약

1. onclick을 알았고 Alert 창을 열고 닫을 수 있도록 배웠다.
2. 가만 보니 뭔가 지저분하고 더 쉽게할 수 있는 방법이 있을 것 같다.
3. 아직까지는 재밌다.

끝!