JavaScript 입문과 웹 UI개발(2)-동적 UI 만드는 스텝(Alert 박스 만들기)
2022. 9. 30. 09:37ㆍ애플코딩 javascript 강의
반응형
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--
$ 표시는 jquery 관련된것
주석처리는 ctrl + /, command + /
UI 만드는 step
1) html/css 미리 디자인(미리하면 미리 숨김)
2)필요할 때 보여달라고 코드 짬 (자바스크립트로)
-->
<div class="alert-box" id="alert">알림창임<button onclick="document.getElementById('alert').style.display='none'">닫기</button></div>
<button onclick="document.getElementById('alert').style.display='block'">버튼1</button>
<button onclick="showbox()">버튼2</button>
<script>
function showbox(){
// document.getElementsByClass("alert-box").style.display="block";
document.getElementById("alert").style.display="block";
}
// 숙제!!!
//알림창에 닫기 버튼을 만들어서 클릭시 알림창을 숨겨라
//답
//<div class="alert-box" id="alert">알림창임<button onclick="document.getElementById('alert').style.display='none'">닫기</button></div>
</script>
</body>
</html>main.css
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}알림창임
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |
|---|---|
| JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(4)-function의 파라미터 문법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(3)- JavaScript function 문법 사용법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(1)-강의소개와 자바스크립트의 근본 (2) | 2022.09.29 |