반응형
HTML, CSS, JavaScript 배치 예제
글. 수알치 오상문
1. HTML 파일에 모두 집어넣기
[예제 코드] test.html
<!doctype html>
<html lang="ko">
<head>
<title> Exam </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS 코드는 head 영역에 배치 -->
<style>
h1 {color: #999;}
</style>
</head>
<body>
<h1>환영합니다!!!</h1>
<h2>HTML, CSS, JavaScript 예제입니다.</h2>
<!-- JavaScript 코드는 body 영역에서 아래에 배치 -->
<script>
console.log("Hello, javascript!");
var el = document.querySelector("h1");
console.log(el); // <h1>환영합니다!!!</h1>
console.log(el.innerHTML); // 환영합니다!!!
</script>
</body>
</html>
[실행 화면] 웹 브라우저
[실행 화면] 콘솔
* 크롬/엣지 브라우저에서 'F12' 키를 누르고 개발자 모드 창의 '콘솔' 탭을 선택하면 볼 수 있다
2. CSS와 Javascript를 외부 파일에서 관리하기
html 파일이 있는 폴더에 css, js 폴더를 생성한다.
project ---- html 파일
|
+--- css ---- css 파일
|
+--- js ------ js 파일
예제에서 test.css와 test.js 파일을 해당 경로에 저장한다.
[예제 코드] test.css
h1 {color: #999;}
[예제 코드] test.js
console.log("Hello, javascript!");
var el = document.querySelector("h1");
console.log(el); // <h1>환영합니다!!!</h1>
console.log(el.innerHTML); // 환영합니다!!!
[예제 코드] test.html
<!doctype html>
<html lang="ko">
<head>
<title> Exam </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 외부 css 파일 가져오기 -->
<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<h1>환영합니다!!!</h1>
<h2>HTML, CSS, JavaScript 예제입니다.</h2>
<!-- 외부 자바스크립트 파일 가져오기 -->
<script src="./js/test.js"> </script>
</body>
</html>
실행 화면 결과는 이전과 같다.
반응형
'HTML, CSS' 카테고리의 다른 글
| 자바스크립트를 줄여야 하는 이유 (0) | 2022.06.16 |
|---|---|
| HTML, Jumbotron 이용해봐요 (0) | 2022.06.16 |
| XML 가이드 (TCP School) (0) | 2022.06.06 |
| CSS 가이드 (TCP School) (0) | 2022.06.06 |
| HTML 가이드 & 레퍼런스 (TCP School) (0) | 2022.06.06 |