js 특강

14953 단어 jshtmlCSSCSS

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>
  1. HTML으로 요소를 만듭니다.
  2. CSS로 숨깁니다.
  3. 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>

좋은 웹페이지 즐겨찾기