자바스크립트가 없는 브라우저는 보기 힘들다. (그만큼 많다.)
자바스크립트 제대로 배워 놓으면 나중에 편하다.
시작하기 전에
HTML과 CSS는 조금 할 줄 알아야한다.
HTML이랑 CSS가 뭐고 어떤게 있는지만 알면 된다. 너무 자세하게 알 필요는 없다.
자바스크립트를 다루는 방법은 브라우저의 console을 사용하면 된다.
어떻게 하냐면
어디든지 웹 페이지에서 우클릭을 하고 제일 하단에 있는 검사를 누르면
이런 화면이 뜨는데 저기서 빨간색으로 동그라미 한 곳을 들어가면 된다.
참고로 여기서 검은색 네모칸이 HTML 부분이고 노란색 네모칸이 CSS부분이다.
console에 들어가면 이렇게 나오는데 여기서 코딩을 할 수는 있지만 한 줄씩 해야해서 번거롭다.
그러니 VS code를 사용해서 하면 된다.
그럼 자바스크립트를 사용한 예시를 한번 보자.
<!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">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>여기서 특징을 2가지 발견할 수 있다.
<link rel="stylesheet" href="style.css">> 미리 만들어둔 style.css를 html로 가져온다는 뜻이다.
<script src="app.js"></script>> 미리 만들어둔 app.js을 html로 가져온다는 뜻이다.
vs code 전체로 보면
요런 식으로 되어 있다.
이렇게 하고 자바스크립트 본격적인 걸로 넘어간다.
'웹 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(3-1, HTML과 Javascript의 상호작용) (0) | 2023.05.23 |
|---|---|
| 자바스크립트 (2-3 return, prompt, if) (0) | 2023.03.16 |
| 자바스크립트 (2 - 2 object, function) (2) | 2023.03.16 |
| 자바스크립트 (2 - 1) (2) | 2023.03.16 |