이번에는 Alert 박스를 만들어보자!

닫기 버튼을 누르면 박스가 뿅 하고 사라지는 것까지 구현할 예정이다.

 

 

기본적인 UI 제작 법칙

  1. HTML CSS 로 미리 UI 디자인을 해놓고, 필요하면 평소엔 숨김
  2. 버튼을 누르거나 다른 행동을 할 경우 UI를 보여달라! 는 내용의 자바스크립트 코드 작성

 

1단계. Alert UI 디자인

  1. 작업폴더에 main.css 파일 생성
  2. css 연결하기
    방법 1) 직접 입력:  html 파일 <head> 태그 안에 <link href="main.css" rel="stylesheet"> 작성
    방법 2) 단축키 사용: link:css 입력하면 자동 완성됨
  3. UI 디자인 완성
    - UI를 평소에 숨기고 싶으면 display : none   (또는 visibility:hidden)
    - UI를 다시 보여주고 싶으면 display : block
<!-- HTML -->
<div class="alert-box">알림창임</div>
/* CSS */
.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}

 

 

2단계. 버튼 클릭 시 UI 보여주기

 

onclick = " "

HTML 태그 내에 onclick 속성을 넣으면,

클릭 시 onclick 안의 자바스크립트를 실행해준다

 

문제 1

문제) 버튼 클릭 시 Alert 박스를 보여주도록 JS 코드를 작성해보자

<div class="alert-box">알림창임</div>
<button onclick="Alert 박스 보여주셈~~"> 버튼 </button>

풀이)

- id 가 없다면 하나 부여해준다

- 현재 display: none 이다. 클릭 시 display: block 으로 변경해야 한다

<div class="alert-box" id="alert">알림창임</div>
<button onclick="document.getElementById('alert').style.display = 'block';"> 
버튼 </button>

 

문제 2

문제) Alert 박스 내에 닫기 버튼을 만들고, 클릭 시 박스가 사라지도록 만들자

정답 예시

풀이)

- 버튼 텍스트를 '닫기'로 바꾸고 색상을 변경한다

- 닫기는 반대로 현재 display: block 으로 설정해놓고, 클릭 시 display: none 으로 변경해주자

- 아까와 같이 보이게 하는 버튼도 추가해 최대한 위 예시와 유사하게 제작했다

- 전반적으로 코드가 좀 긴 것 같아서.. 줄여나가는 방향으로 해보자고 다짐했다. 그러기 위해서는 네이밍이나 전반적인 작동 원리를 더 잘 알고 있어야겠다는 생각이 들었다. alert 박스의 className을 open-btn 에서 일괄적으로 불러와서 display:block 을 시키니까 먹지 않아서.. 어쩔 수 없이 alert-top 만 id 로 불러와서 지정했다. 일괄적으로 삭제시킬 수 있는 방법을 차차 찾아나가자!

- 닫기 버튼의 위치를 .alert-box 내에서 display:flex 로 지정해주니 아예 적용이 되지 않았다.
각각 #alert-middle, #alert-bottom 에다가 flex를 적용해줬는데, 자꾸만 알 수 없는 이유로 한 개씩 어그러지는 현상이 나타났다.

코드의 길이도 전반적으로 너무 길고, 여기저기에 flex 관련 내용이 들어가있다보니 복잡한 모습이 되었다.
그런데 곰곰히 생각해보니 '꼭 flexbox 여야만 하나?'라는 생각이 들었다. 그래서 flex 관련 내용을 전부 지웠다.
이후 .close-btn 에 margin-left 를 설정해줬더니 길었던 코드를 한 줄로 줄일 수 있었다. (편-안)

<!-- HTML -->
	<div class="alert-box" id="alert-top">알림창 첫번째
        <button class="close-btn"
            onclick="document.getElementById('alert-top').style.display = 'none';">X
        </button>
    </div>
    <div class="alert-box" id="alert-middle">알림창 두번째
        <button class="close-btn"
            onclick="document.getElementById('alert-middle').style.display = 'none';">X
        </button>
    </div>
    <div class="alert-box" id="alert-bottom">알림창 세번째
        <button class="close-btn"
            onclick="document.getElementById('alert-bottom').style.display = 'none';">X
        </button>
    </div>
    <button class="open-btn" 
    	onclick="document.getElementById('alert-top').style.display = 'block';">열기
    </button>

 

/* CSS */
.alert-box {
    background-color: bisque;
    padding: 20px;
    color: rgb(155, 139, 119);
    border-radius: 5px;
    margin-bottom: 10px;
    display: block;
}

#alert-middle {
    background-color: powderblue;
    color: rgb(110, 135, 138);
}

#alert-bottom {
    background-color: pink;
    color: rgb(149, 112, 118);   
}

.open-btn {
    background-color: transparent;
    border: none;
    background-color: tomato;
    padding: 10px 20px;
    color: white;
    border-radius: 5px;
}

.close-btn {
    background-color: transparent;
    border: none;
    color: gray;
    font-weight: 600;
    margin-left: 70vw;
}

 

 

 

 

TIL 끝!

 

'Web > JavaScript' 카테고리의 다른 글

[JS] function에 구멍을 뚫어보자 🔫 파라미터  (2) 2022.10.04
[JS] 생소했던 function 문법 🔨 이해하기  (0) 2022.09.28
[JS] 복습 시작! ✨ (HTML 조작, 셀렉터, 메소드, 주석 처리)  (0) 2022.09.28
[JS] 브러쉬 생성, 배경 칠하기, 지우개 구현  (0) 2022.08.06
[JS] 이번엔 그림앱이다! Canvas  (0) 2022.08.01

티스토리툴바