css, javascript 파일 분리 + 웹폰트 설치하는 방법

하나의 html 파일 안에, <style>과 <script>가 같이 들어가면, 페이지는 너무 길어진다. 간단한 페이지도 긴데, 실제 사이트를 운영하다보면, 페이지도 늘고, 점점 관리가 어려워진다.

 

이에 <style>부분은 css 파일로 분리하고, <script> 부분은 js 파일로 분리하여 관리하는 게 좋다.

 

1. 우선 나는 개발할 때, 아래 폴더 구조를 가장 먼저 만든다.

static 폴더에는 이미지, 폰트, css, js 파일을 관리하고,

templates 폴더에는 html 파일을 관리하고,

views 폴더에는 py(파이썬) 파일을 관리한다.

 

2. 파일을 분리하는 방법은 간단하다. 아래 표시한 영역의 스크립트를 각각 폴더에 파일을 생성해서 넣어주기만 하면 된다.

<style>안에 있는 내용은 .css 파일 안에 넣고,

<script>안에 있는 내용은 .js 파일 안에 넣는다.

파일명은 영문으로 아무거나 지정해도 상관은 없다. 관리하기 편하게 지정하면 된다. 그래서 보통 html명과 똑같이 만드는 경우가 많다.

예를 들면, todolist.html 파일이면, todolist.css, todolist.js 같은 형태로 파일을 만드는 것이다.

※ 단, 주의사항이 있다. <style>과 <script> 안에 있는 코드만 넣는 것이다.

 

3. 그 다음 아래 코드를 이미지처럼 head 영역에 넣으면 된다. 파일명은 만든 파일명을 넣으면 된다.

물론 폴더명이 다르면 href에 들어간 경로명도 다르니, 주의하자.

    <!-- css분리한 파일 경로 -->
    <link rel="stylesheet" type="text/css" href="/static/css/파일명.css">
    <link rel="stylesheet" type="text/css" href="/static/css/font.css">
    
    <!-- 자바스크립트 파일경로 -->
    <script type="text/javascript" src="/static/js/파일명.js"></script>

 

4. 폰트를 설치하는 것도 마찬가지로 같은 스크립트이다.

그런데 웹폰트가 아닌, 원하는 폰트를 설치하도록 하는 것은 다음과 같다.

4-1) font.css 파일을 만들고, 우측의 스크립트를 넣는다.

4-2) static 폴더 안에 font 폴더를 만들고, 원하는 폰트파일을 넣는다.

4-3) 일반 css 파일 경로 설정하듯 font.css 파일도 파일 경로 설정을 한다. (참고로 위에 스크립트 넣은 것에는 font.css파일도 포함되어 있다)

 

참고로 font-face는 해당 폰트를 다운받아서 보여주라는 명령어이기 때문에, 간혹 인터넷 환경에 따라 설치가 안되는 경우가 있다. 그럴 경우 웹폰트를 사용해서 설치하라는 명령어 font-family도 같이 넣어주는 것이다.

※ @font-face{} 를 여러개 만들어, 여러 폰트를 설치할 수 있다.

※ 여러 폰트를 body{}전체가 아닌, div{}, span{}처럼 특정 영역을 지정한 부분만 폰트를 바꿀 수도 있다.

※ 폰트는 otf, ttf, woff, eot, svg 등 여러 확장자가 있는데, 브라우저마다 호환되는 확장자가 다르기 때문이다. 모두 넣으면 좋지만, 사이트 느려질 수 있기 때문에 굳이 권장하지는 않는다. 브랜딩을 위해 특정 폰트를 고집하는 경우, 비슷한 웹폰트도 대비용으로 같이 설정해놓는 게 좋다.

 

 

아참!

images 폴더를 따로 만든건, 사이트를 운영하다보면 이미지를 넣어놓고, 그 이미지를 불러와서 사용하는 경우가 많은데.

그 경우 경로를 지정하기 위해 폴더를 만든것이다. 아무데나 넣어놓으면 찾기도 힘들테니 말이다.