CSS style.css 파일 불러오기와 적용 - css link 방법과 css @import 방법
페이지 정보
조회 2,207회 작성일 22-04-09 13:51
본문
style.css 파일 불러오기와 적용
css link 방법과 css @import 방법
스타일을 적용하는 방법은 세 가지가 있다.
본 파일 안에 <style>로 넣는 방법, <link>로 부르는 방법, 그리고 @import로 부르는 방법이다.
그 중에서 link 방식과 import 방식을 설명한다.
style.css 파일 불러오기와 적용 - css link 방법과 css @import 방법
link 방식으로 CSS 파일 불러오기
기본 구조는 아래와 같다.
[code]
<link rel="stylesheet" href="경로/파일이름">
[/code]
예를 들어, css라는 디렉토리에 style.css라는 스타일 파일이 있다면 아래처럼 부르면 된다.
<link rel="stylesheet" href="http://www.kiss7.kr/css/1.css">
<link rel="stylesheet" href="http://www.kiss7.kr/css/2.css">
이렇게 하면 홈페이지 파일을 불러들일 때 모양 설정 파일인 스타일 CSS 파일도 함께 불러와서, 브라우저가 조합해서 보여준다.
그러기 위해서는 두 가지 준비할 것이 있다.
당연하게도 불러올 스타일 CSS파일을 먼저 만들어놔야 한다는 것이다.
또 하나는 위의 코드를 적용할 홈페이지 파일에 입력해야 하는 것이다.
대체로는 <head>부분에 저 코드를 넣어서 파일을 불러들인다.
@import 방식으로 CSS 파일 불러오기
기본 구조는 아래와 같다.
[code]
<style type="text/css">
@import url("경로/파일이름");
</style>
[/code]
예를 들어, css라는 디렉토리에 style.css라는 스타일 파일이 있다면 아래처럼 부르면 된다.
<style type="text/css">
@import url("http://www.kiss7.kr/css/1.css");
@import url("http://www.kiss7.kr/css/2.css");
</style>
역시 link 방식과 마찬가지로 브라우저가 불러와서 조합해 준다.
링크 방식과 임포트 방식의 차이점이라면....
link 방식은 html이나 php 등에서 그냥 외부파일을 불러오는 방식이고, import 방식은 css 파일에서 또 css파일을 불러온다는 것이다.
CSS 불러오기, 어떤 것이 더 나은가?
먼저 @import 방식과 link 방식의 차이점을 말하자면 이렇다.
- 링크 방식은 html 파일에서 필요할 때마다 CSS 파일을 불러오는 방식이다.
- 임포트 방식은 html 파일에서 A.css파일을 불러오면, A.css파일이 또 다른 B.css를 불러오는 것이다.
편리성에서는 임포트 방식이 더 편하다.
만약 여러 개의 css파일 불러오기를 한다면, link 방식은 불러올 css 파일 개수만큼 계속 반복해서 link태그를 적어야 한다.
하지만 import 방식은 style.css 파일 안에서 계속 추가만 하면 되기 때문이다. 즉, 관리가 쉽다.
알아두면 좋을 CSS 로딩 방법
하지만 편리성에서 우수한 대신 @import 방법은 단점도 있다.
link로 CSS 파일을 불러오기하면, css 파일이 여러 개라도 동시에 불러온다.
그러나 import로 CSS 파일을 불러오기하면, 그 속에 들어 있는 여러 개의 css 파일은 순서를 기다렸다가 차례로 불러들여진다.
즉, 속도면에서는 손해라는 점이다.
결국, link 방식과 @import 방식의 차이점은 속도를 우선하느냐와 편리성을 우선하느냐에 있다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그러므로 한꺼번에 불러들일 파일이 몇 개 정도라면 편리성에서 우수한 @import 방식을 사용하면 되고, 그때 그때 다른 곳에서도 불러와야 해서 개수가 많아질 수 있다면 link 방식이 더 좋다는 결론을 내본다.