2일차 - 선택자 잡아내기

밀레·2022년 9월 23일
0

코딩공부

목록 보기
2/135

_VsCode에 필수 패키지 설치

  • 컴파일러 설치 Live Sass Compiler / Glenn Marks
  • Sass / Syler
  • 서버접속 SFTP / Natizyskunk_

CSS / javascript 연결

<html>
<head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <script src="js/common.js"></script>
</body>
</html>

선택자 잡아내기 - DOM을 조작하는 자바스크립트

html

<body>
    <div id="box">지워지면 안돼</div>

    <script src="js/common.js"></script>
</body>

javascript

HTML 영역에 "조작성공!" 텍스트 대입

<script>
	document.getElementById("box").innerHTML = "<h2>조작성공!</h2>";
</script>

javascript

HTML 영역에 "조작성공!" 텍스트 '추가' 대입

<script>
	document.getElementById("box").innerHTML += "<h2>조작성공!</h2>";
</script>

html

<body>
    <div id="box">지워지면 안돼</div>
    <div id="bby">
        <p></p>
    </div>
    <script src="js/common.js"></script>
</body>

javascript

<script>
    document.getElementById("box").innerHTML += "<h2>조작성공!</h2>";

    document.querySelector("#bby p").innerHTML = "오 나왔다";
</script>

CSS 스타일링 추가

<style>
    body{
        font-size: 40px !important;
    }

    div{
        color:white;
        background-color: black;
        font-size: 15px;
    }

    #bby{
        color: yellow;
        font-size: 30px;
    }

    #box h2{
        background-color:yellow;
        color: black;
    }
</style>

0개의 댓글