우리가 눈으로 보는 웹 브라우저 화면은 html, css, js로 이루어져있다. html파일에 script 태그를 사용해 한꺼번에 작성해도 된다. 하지만 그러기엔 코드의 가독성도 떨어지고 수정할때 복잡하기에 css, js문서는 따로 작성하고 연결하는게 일반적인 경우다.
각 언어의 특징을 말해보자면, html은 화면의 전체적인 구조를 잡아주고, css는 화면을 이루고 있는 각 요소의 위치와 모양등을 꾸며주고, js는 이것들을 역동적으로 움직여주는 역할을 한다.
html 파일에 각각의 문서를 연결하는 방법은 간단하다.
css파일 연결 방법
<link rel = "stylesheet" href = "./파일 이름">js파일 연결 방법
<script src = "./파일 이름"></script>간단한 예시를 들고 마무리를 짓겠다.
index.html
<html>
<head>
<link rel = "stylesheet" href = "index.css"/>
<script src = "index.js"></script>
</head>
<body>
<h2>이 문장은 html에서 작성됨.</h2>
</body>
</html>index.js
function aaa() {
document.write("wecode");
}index.css
h2 {
color : red;
}위의 코드를 실행시키면, "이 문장은 html에서 작성됨"은 css로인해 붉은색으로 화면에 나오게 되고, 그 아래에 "wecode"가 js에서 호출되서 출력된다.
