동적 UI 만드는 방법에 대해서 알아보자.
웹페이지에선 탭, 모달창, 서브메뉴, 툴팅 등 수백개의 동적인 UI를 만들 수 있다.
하지만 수많은 UI들을 하나하나 다 외워서 만드는게 아니라 동적인 UI 만드는 방법을 알면 다 응용해서 만들 수 있다.
동적 UI 만드는 방법
1. HTML CSS로 미리 UI 디자인을 해놓는다. (필요없을땐 숨기기)
2. 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트 코드짜기
1. HTML CSS로 미리 디자인하기
<body>
<div class="alert-box">알림창임</div>
</body>.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}여기서 미리 html css로 디자인 해놓고 display: none 속성을 이용해 숨긴것을 볼 수 있다.
2. 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트 코드짜기
<body>
<div class="alert-box">
알림창임
<button
onclick="document.querySelector('.alert-box').style.display = 'none'"
>
닫기
</button>
</div>
<button
onclick="document.querySelector('.alert-box').style.display = 'block'"
>
열기
</button>
</body>거의 모든 html 태그 내에 onclick 이라는 속성을 넣을 수 있는데 이걸 넣게되면 해당 html을 클릭시 onclick 안의 자바스크립트를 실행해준다. 열기 버튼을 눌렀을때 display 속성을 block으로 바꾸면 알림창이 보일것이다. 추가로 닫기버튼도 구현하였다.
결과 화면
전체 코드
index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="alert-box">
알림창임<button
onclick="document.querySelector('.alert-box').style.display = 'none'"
>
닫기
</button>
</div>
<button
onclick="document.querySelector('.alert-box').style.display = 'block'"
>
버튼
</button>
</body>
</html>
main.css
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}'Front end > JavaScript' 카테고리의 다른 글
| 자바스크립트 function의 파라미터 문법 왜 쓰는가? (0) | 2023.03.26 |
|---|---|
| 자바스크립트 function 문법 왜 쓰는가? (1) | 2023.03.26 |
| 자바스크립트를 왜 쓰는가? (0) | 2023.03.26 |
| 참조, 얕은복사, 깊은복사 (0) | 2023.03.05 |
| 🔖 객체지향5. class를 복사하는 extends / super (1) | 2023.03.02 |
