vsc(Visual Studio Code)를 기준으로 작성되었습니다.
1. HTML - '!'를 쳐서 기본양식을 불러옵니다.
(2022.7.20일 기준 vsc 최신버전에서는 [!] + [ctrl] + [space] 를 해야 자동완성 양식이 보입니다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
|
cs |
(HTML 기본양식)
2. html - css 연결 : head 부분에 <link rel = "stylesheet" href = "style.css(css파일이름)"> 를 적습니다.
('link:css' 라고 치면 자동완성)
3.html - JS 연결 : body 마지막부분에 <script src="(JS파일 이름)"></script> 를 적습니다.
('scr'또는 'script:src'라고 치면 자동완성)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"> <!-- CSS를 추가한곳 -->
</head>
<body>
<script src="js/todo.js"></script> <!-- JS를 추가한곳 -->
</body>
</html>
|
cs |
Html - css - JS 연결완료!
'코딩이야기 > JS 기초 문법정리' 카테고리의 다른 글
| #6.자바스크립트(JavaScript) - 조건문(if문) (0) | 2022.06.25 |
|---|---|
| #5.자바스크립트(JavaScript) - 오브젝트(객체) 안에 function(함수) 넣기 (0) | 2022.06.24 |
| #4.자바스크립트(JavaScript) - 기본 함수(function, return) (0) | 2022.06.24 |
| #3.자바스크립트(JavaScript) - 오브젝트(객체) 만들기 (0) | 2022.06.23 |
| #2.자바스크립트(JavaScript) - JS 기초 용어 (0) | 2022.06.22 |
