동적 UI 만드는 스텝 (Alert 박스 만들기)

자바스크립트

by front-hyun 2024. 1. 27. 01:17

기본적인 UI 만드는 법칙

웹페이지에선 탭, 모달창, 서브메뉴, 툴팁 등 수백개의 동적인 UI를 만들 수 있습니다.

이런거 하나하나 다 가르치면 100강도 모자라기 때문에

UI 만드는 법을 알려드릴테니 이거 외워가시면 저런 UI는 알아서 다 만들 수 있습니다.

1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김

2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짬

이게 다임

step 1. Alert UI 디자인부터 하기

작업폴더에 main.css 이런거 하나 만들고

index.html <head> 태그 안에 <link href="main.css" rel="stylesheet"> 이렇게 첨부하면 css 이용가능합니다.

html 파일에는

<div class="alert-box">알림창임</div>

css 파일에는

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

추가하면 디자인 완성입니다.

UI를 평소에 숨기고 싶으면 display : none 주면 됩니다.

다시 보여주고 싶으면 display : block 넣으면 보입니다.

싫으면 visibility : hidden 이것도 있습니다.

step 2. 버튼 누르면 Alert UI 보여주기

거의 모든 html 태그 내에 onclick 이라는 속성을 넣을 수 있는데

이걸 넣게되면 해당 html 을 클릭시 onclick 안의 자바스크립트를 실행해줍니다.

그럼 버튼을 눌렀을 때 자바스크립트를 실행하고 싶으면

<button onclick="자바스크립트~~"> 버튼 </button>

이렇게 코드짜면 되는 것임

<button onclick="Alert 박스 보여주셈~~"> 버튼 </button>

onclick 속성 안에 이렇게 코드짜면 버튼누르면 Alert 박스가 보이지않을까요?

근데 "Alert 박스 보여주셈~" 이렇게 사람처럼 말하면 컴퓨터는 절대 못알아듣는다고 했습니다.

컴퓨터 바보 멍청이임

정확히 어떤걸 어떻게 수정해야 박스가 보일까요?

그냥 알려드리면 display : block 이렇게 수정하면 Alert 박스가 보입니다.

5분 드릴테니 빨리 자바스크립트 짜보십시오

html을 변경할 땐 항상 document 부터 시작하는 그거 쓰면 된다고 했습니다

그럼 "Alert 박스의 display : block 으로 바꿔라" 라고 코드를 작성하려면 어떻게 해야할까요.

고민해서 안나오는건 구글찾아보면 되는 것임

<button onclick="document.getElementById('어쩌구').style.display = 'block';"> 버튼 </button>

이러면 display가 block으로 바뀝니다.

어쩌구 자리에 Alert 박스의 id를 집어넣으면 되겠군요.

id가 없다고요? 하나 만드십시오

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main2.css" rel="stylesheet" />
  </head>
  <body>
    <div class="alert-box" id="alert">알림창임</div>
    <button onclick="document.getElementById('alert').style.display='block';">
      버튼
    </button>
  </body>
</html>

오늘의 숙제 :

Alert 박스 내에 닫기 버튼과 기능을 만들어보십시오

닫기 버튼을 누르면 Alert 박스가 뿅 사라져야합니다.

▲ 오늘은 이런 Alert UI를 만들어보면서 html 변경이나 더 해봅시다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main2.css" rel="stylesheet" />
  </head>
  <body>
    <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>
  </body>
</html>

'자바스크립트' 카테고리의 다른 글

서브메뉴 만들어보기와 classList 다루기 (0)	2024.01.29
자바스크립트 이벤트리스너 (0)	2024.01.27
자바스크립트의 근본 (0)	2024.01.27
[자바스크립트] 동기와 비동기, 콜백 함수, Promise, async, await (0)	2023.04.13
[자바스크립트] DOM, 이벤트 (0)	2023.04.13