DEVELOPE/CSS

CSS 외부파일 불러오기

소찾나 2017. 10. 27. 09:59

CSS 외부파일 불러오기

CSS 외부파일 불러오기



웹페이지를 작성시 스타일시트의 위치는 <head> 태그 내에 존재해야 하며 이를 페이지에서 정의하게되면 


css 정의의 관리가 힘들어 외부에 css 파일을 만들어서 정의하고 관리하면 웹페이지 제작을 편리하게 작업을 할 수 있다.


원래 css가 만들어진 취지 자체가 html 문서와 디자인적인 요소 css(스타일시트) 를 분리하여 웹페이지


의 간소화하고 디자인적인 요소를 따로 관리하기 쉽게하기 위한 것이기 때문에 외부파일로 처리하는 것을


추천한다. 물론 간단한 스타일 이라면 html 내에 정의해도 상관은 없겠다.





1 외부에 css 파일을 불러오는방법


스타일 css 태그의 정의를 한 파일(확장자 css) 를 작성후 특정한 폴더에 넣어두고 해당 파일의 url 로 불러오는 방식


1
2
3
<head>
<link rel="StyleSheet" type="text/css" href="/css.css">                                               
</head>                                               
cs



2 import 로 삽입하는 방법


@import 명령어로 css 파일을 <head> 태그내에 삽입하거나 css 파일내에 정의해서 사용함 유의할점은 다른 스타일보다


 먼저 정의되어야 함


1
2
3
4
5
6
7
8
9
10
<head>
<style type="text/css">
<![CDATA[
    @import 파일의 url; or @import "파일명";                                                             
//]]>
 
</style>
</head>                                 
cs


1
2
3
4
5
6
7
8
9
10
<head>
<style type="text/css">
   @import url('style.css'); /* 절대경로와 상대경로 모두 가능                                             
</style>
</head>
cs



이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^