22.04.19
JS
VSCODE Editer 실행 - 폴더 생성(ex. FASTCAMPUS) - 파일 생성(ex. index.html)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="fastcampus">안녕하세요.</h1>
</body>
</html><script>
// 안녕하세요를 안녕 못한데로 바꿔줘!
document.getElementById("fastcampus").innerHTML = "안녕 못한데?";
</script>
- HTML으로 요소를 만듭니다.
- CSS로 숨깁니다.
- JS로 나타나게 합니다.
<!DOCTYPE html>
<html>
<head>
<style> 내부 스타일
#alertBox{
background-color: #c6c6c6;
border-radius: 10px;
font-weight: 800;
padding: 20px;
display: none;
}
</style>
</head>
<body>
<div id="alertBox">알림창임!</div>
<button class="show-alert" onclick="document.getElementById('alertBox').style.display = 'block
'">알림창을 보여줘!</button>
</body>
</html>
style.css - 외부스타일
#alertBox{
background-color: #c6c6c6;
border-radius: 10px;
font-weight: 800;
padding: 20px;
display: none;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="alertBox">알림창임!</div>
<button class="show-alert" onclick="document.getElementById('alertBox').style.display = 'block
'">알림창을 보여줘!</button>
</body>
</html>js 예제2
<button class="show-alert" onclick="모달창열어줘()">알림창을 보여줘!</button>
<script>
function 모달창열어줘() {
document.getElementById('alertBox').style.display = 'block';
}
</script>function 모달창닫아줘() {
document.getElementById('alertBox').style.display = 'none'
}
function 모달창열어줘() {
document.getElementById('alertBox').style.display = 'block'
} <div id="alertBox">
<p>
알림창임!
<br>
<span onclick="모달창여닫기('none')">이거 누르면 꺼짐</span>
</p>
</div>
<button class="show-alert" onclick="모달창여닫기('block')">알림창을 보여줘!</button>
<script>
function 모달창여닫기(열거나닫거나) {
document.getElementById('alertBox').style.display = 열거나닫거나;
}
</script>