css 파일, js 파일을 html에 불러와 적용하기

html 파일 내에서 style 태그와 script 태그를 사용할 수 있다.

하지만 그렇게 되면 코드가 너무 길어지므로 스타일과 관련된 것은 css 파일로,

자바스크립트 코드를 js 파일로 분리해서 사용하는 경우가 많다.

 

css, js 파일 html에 불러와 적용

 

별도의 css 파일에 있는 스타일을
html 파일에 적용하는 방법? 

<link rel="stylesheet" href="경로">

html 파일의 head 태그 내에 위와 같이 작성해주면 된다.

경로라고 적어둔 부분에 css 파일이 있는 경로를 작성해주면 된다.

 

별도의 js 파일에 있는 스크립트를
html 파일에 적용하는 방법?

<script src="경로"></script>

html 파일의 head 태그 내에 위와 같이 작성해주면 된다.

경로라고 적어둔 부분에 js 파일이 있는 경로를 작성해주면 된다.

 

---

 

경로

경로에는 크게 절대경로와 상대경로가 있다.

우리가 html 파일에서 쓸 것은 주로 상대경로이다.

 

- 절대경로

• 파일의 root부터 해당 파일까지의 전체 경로
• 다른 사람의 문서나 파일을 이용할 때 사용함
• 장점: 어느 곳에서든 경로에 접근할 수 있음
• 단점: 경로가 변경되면 경로를 일일이 수정해야 함

 

- 상대경로

• 현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로를 적는 것
• 장점: 주소나 프로젝트 디렉토리 위치가 바뀌어도 내부 구조만 그대로라면 수정없이 그대로 사용할 수 있음
• 단점: 자기 자신이 기준이기 때문에 자기 자신의 위치가 바뀌는 것에 취약함

기호	의미
/	root - 가장 토대가 되는 경로 선택
./	현재 위치 - 현재 위치 ./는 보통 생략함
../	상위 경로 - 현재 폴더가 속한 폴더

쉽게 말하자면, ../는 뒤로 가기라고 생각하면 된다.

문서.html 파일이 html이라는 폴더 안에 있고, style.css 파일이 style이라는 폴더 안에 있으며
script.js 파일이 js라는 폴더 안에 있고, html 폴더, style 폴더, js 폴더가 병렬적으로 있는 상태라면

문서.html 파일의 head 태그 내에 경로를 아래와 같이 적어주면 되는 것이다.

<link rel="stylesheet" href="../style/style.css">
<script src="../js/script.js"></script>