_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>
