特集講座

15151 ワード
js html CSS テキストリンク
22.04.19

JS


VSCDE 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>
    TIL(04.19)
    lstm予測テストバージョン