HTML에 CSS, JavaScript 파일 연결하기

박예선·2022년 8월 1일
0

HTML / CSS

목록 보기
4/4

HTML에 CSS, JavaScript 파일을 연결하는데에는 두가지 방법이 있다.
1. html에 style, script태그를 넣어 직접코드 작성하기(본 포스팅에서는 다루지 않는다)
2. html과 css, javaScript 파일을 따로 만든 후 html에 연결하기

보통 2번의 HTML과 CSS, JavaScript 파일을 따로 관리하는 방법을 추천하는데 그 방법만 정리해보려고 한다!

과제를 하다가 열심히 CSS와 JavaScript 코드를 짜고 라이브서버로 확인했는데 적용이 안돼서 내가 잘못썼나하고 봤는데 알고보니 연결을 안했었다...
앞으로는 그러지 말자!


1. HTML파일에 CSS파일 연결하기

rel 속성 : 'stylesheet'
href 속성 : 'css파일경로'
type 속성 : 콘텐츠의 미디어 타입
( HTML5에서는 < style > 태그의 type 속성의 기본값이 “text/css”로 설정되기 때문에, type 속성을 반드시 명시할 필요는 없다.
그래도 EXPLICT 한 데이터 타입을 보일려면 쓰는게 좋다고는 한다. )

<!-- style.css라는 css파일을 연결 -->
<link rel="stylesheet" href="../style.css" (type="text/css")>

2. HTML파일에 JavaScript파일 연결하기

src 속성 : 파일경로

// index.js라는 javascript파일을 연결
<script src="index.js"></script>

처음 파일을 만들 때 까먹지 말고 연결하는 습관을 들이자!

profile
개발 좋아 lynn08082@gmail.com

0개의 댓글