[HTML5] CSS & Javascript 파일 연결하기

---

알고있으면 좋은 HTML5 Tip✨

---

HTML5에 CSS, Javascript 파일을 연결하는 두가지 방법은?

• HTML 파일에 style, script 태그를 넣어 직접 코드를 작성하는 방법이 있다.
• HTML과 CSS, Javascript 파일을 분리하여 작성한 후 HTML에 연결하는 방법이 있다.

 

(1) HTML 파일에 CSS 파일 연결하기

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

• rel : 스타일시트(stylesheet)
• href : CSS 파일 경로
• type : 콘텐츠의 미디어 타입 (기본값이 설정되어 있기 때문에 반드시 명시할 필요는 없다.)

 

(2) HTML 파일에 Javascript 파일 연결하기

<script src="index.js" defer></script>
<script src="index.js" async></script>

• src : Javascript 파일 경로
• type : 콘텐츠의 미디어 타입 (기본값이 설정되어 있기 때문에 반드시 명시할 필요는 없다.)
• defer : 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행된다.
• async : 스크립트가 나머지 페이지와는 비동기적으로 실행됨을 나타내며, 브라우저를 파싱하는 동안 스크립트가 사용가능해지면 곧바로 실행된다.

 

(3) Django templates 폴더에 존재하는 HTML 파일에 Javascript 연결하기

<script type="module">
    import * as allAPI from "{% static 'frontend_b/js/api.js' %}";
    import $alarmPage from "{% static 'frontend_b/js/page/alarmPage.js' %}";

    async function alarm(){
        const $buildings = await allAPI.getBuilgingsFuction();

        $alarmPage($buildings);
    }

    alarm();
</script>

• type : module (브라우저에서 모듈 스크립트를 사용하기 위해 정의 한다.)