[참고자료] 외부 CSS, JS 파일을 HTML 문서에 연결하는 방법

HTML 파일에서 CSS와 Javascript를 분리해서 관리하자

기존에는 HTML 문서에서 CSS(Head의 Style 영역)와 Javascript(Body의 Script 영역)를 함께 작성했었는데요. 규모가 작은 경우 이렇게 작성해도 크게 문제되지는 않지만, 규모가 큰 프로젝트에서는 코드의 전체 길이가 점점 늘어나게 되고 유지보수가 어려워집니다. 코드를 수정하기 위해 같은 문서를 이리저리 왔다갔다 해야 하는 것이죠.

 

그래서 이 경우에는 HTML 문서가 있는 프로젝트 폴더에 css와 js 폴더를 따로 만든 뒤 여기에 HTML 문서에 대한 css 파일과 js 파일을 생성합니다. 그리고 이 파일들을 HTML문서에 연결해주면 CSS와 Javascript가 한 번에 있는 기존의 HTML 문서와 똑같이 동작하게 됩니다.

 

이렇게 외부에 CSS와 JS를 분리해 두면, CSS 요소 수정이 필요할 때 CSS 파일을 보고 수정하면 되고, JS 요소 수정이 필요할 때 JS 파일에서 수정할 수 있어 편리합니다.

 

그리고 VSCode 코드 편집기 같은 경우 여러 개의 파일을 한 화면에 띄울 수 있는데요. 화면의 반을 나눠 왼쪽에는 HTML 문서, 오른쪽에는 CSS 파일과 JS 파일을 띄워놓고 작업할 수도 있습니다. 이러면 작업 효율성이 굉장히 올라가겠죠.

 

 

외부 CSS 파일 연결

일반적인 외부 CSS 파일 연결하기

Head 영역 내 link 태그를 통해 외부 CSS를 연결할 수 있습니다. rel 속성으로 css파일임을 명시하고, href 속성을 통해 해당 css 파일의 경로를 명시하면 되는데요. HTML 문서가 있는 디렉터리에 css 폴더가 있는 경우 아래와 같이 작성하면 됩니다.

<link rel="stylesheet" href="css/파일명.css">

Flask에서 외부 CSS 파일 연결하기

지금 설명하는 내용은 Flask를 다 배우고 난 뒤, 웹페이지를 만들 때 참고하면 됩니다.

보통 static 폴더에 css 폴더를 만든 뒤 그 안에 css 파일을 위치시키게 됩니다. 그 뒤 HTML 문서에 line 태그를 만들고 그 경로를 href 속성 값에 명시하면 되는데, 기존에 우리가 알고 있는 " " 안에 경로를 적는 것이 아니라 살짝 다르게 작성합니다.

<link rel="stylesheet" href=" {{ url_for('static', filename='css/파일명.css') }}">

 

 

외부 JS 파일 연결하기

일반적인 외부 JS 파일 연결하기

Body 영역 내 기존과 동일하게 script 태그를 사용하는데, script 태그 사이에 내용을 작성하지 않고 src 속성을 통해 js 파일의 경로를 명시합니다. 위의 일반적인 CSS 파일을 연결할 때와 마찬가지로 HTML 문서가 있는 디렉터리에 js 폴더가 있는 경우 아래와 같이 작성하면 됩니다.

<script src="js/파일명.js"></script>

Flask에서 외부 JS 파일 연결하기

Flask에서 외부 JS 파일 연결 역시 외부 CSS파일과 동일하게 static 폴더에 js 폴더를 만든 뒤 그 안에 js 파일을 위치시킵니다. 그 다음 HTML 문서에 script 태그를 만들고 경로를 src 속성 값에 명시하면 됩니다. 이때 값 역시 " " 안에 경로를 적지 않고 아래와 같이 다르게 작성합니다.

<script src=" {{ url_for('static', filename='js/파일명.js') }}"></script>

 

 

마치면서

지금까지 HTML 문서에서 CSS와 JS를 외부에 분리해서 관리하는 방법에 대해 알아보았습니다. css 파일이라고 해서 Style 태그를 열고 쓰지 않고, 바로 css 요소를 적으면 되는데요. 마찬가지로 js 파일 또한 Script 태그를 만들지 않고 바로 코드를 적으면 됩니다. 마치 Style 태그의 내부와 Script 태그의 내부를 분리했다고 생각하면 편할 것 같습니다.

 

다만 입학 시험 코드 제출 같은 경우에는 HTML코드, CSS코드, JS코드를 다 따로 받지 않고 하나의 HTML 문서 코드만을 제출하게 됩니다. 이 경우에는 HTML 문서에서 외부 CSS, JS 파일을 연결한 태그들을 삭제하고, 다시 Style 태그와 Script 태그를 만든 뒤 css 파일의 내용과 js 파일의 내용을 복사해서 각각의 태그 내부에 붙여넣기하면 됩니다. CSS 코드와 JS 코드를 따로 제출하는 부분이 없다고 해서 당황하지 않으셨으면 좋겠습니다.

 

그리고 큰 그림을 그리는 포스트가 아니라 이번 글같이 참고할 만한 것들을 따로 분리해서 종종 작성할 예정인데요. 제가 입학 시험을 치르면서 실제로 계속 참고했던 내용들을 뽑아서 다룰 예정이기 때문에 이 내용들을 숙지해 가신다면 입학 시험을 치루는 데 큰 도움이 될 것이라 생각합니다. 감사합니다.