HTML 문서에서 CSS 를 로드하는 2가지 방법(link, @import)

🕓2017.11.11 📈77

[[HTML]] 문서를 작성하면서 HTML 문서의 디자인을 담당할 스타일시트(CSS) 파일을 로드 하는 방법은 link 태그를 사용하는 방법과 @import 를 사용하는 방법 등 두가지가 있습니다.

사실 HTML 문서 내부에 자체적으로 style 을 정의해 사용할 수 있지만, 관리적인 측면에서 아무래도 [[CSS]] 파일을 외부에 따로 로드 하는 방법이 좋습니다. 아래는 HTML 문서 외부에 존재하는 CSS 파일을 로드하는 방법입니다.

link 태그를 이용해 CSS 파일 로드하기

link 태그를 이용해 CSS 파일을 로드하는 방법은 아래와 같습니다.

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

link 태그는 기본적으로 외부에 있는 리소스를 가져오는 태그입니다. head 섹션에 들어가 있어야 합니다. rel 을 stylesheet 로 지정하고 href 에 해당 CSS 파일의 절대주소 혹은 상대주소를 넣어주면 CSS 파일을 로드 할 수 있습니다.

더욱 자세한 내용은 HTML Tag – w3schools.org 을 참고하세요.

@import 를 이용해 CSS 파일 로드하기

@import 로 CSS 파일을 로드 하기 위해서는 아래와 같이 사용할 수 있습니다.

<style type="text/css">
    @import url("css/style.css");
</style>

link 태그와 마찬가지로 head 섹션에 들어가 있어야 하며, head 섹션 내부에 style 태그를 만들고 그 안에서 @import 를 사용해야 합니다.

위 예제에서 볼 수 있듯이 기본적으로 @import 는 style 태그 안에 들어가 있습니다. 이를 다른 말로 하면 CSS 파일 내부에서도 @import 를 사용할 수 있다는 것입니다.

@import 에 대한 자세한 내용은 @import – mozilla 를 참고하세요.

link 태그와 @import 동시에 사용하기

위에서 언급한 내용을 잘 생각해보면 link 태그와 @import 를 동시에 사용할 수도 있음을 알 수 있습니다.

/* html 문서 */
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
</html>

먼저 HTML 문서에서 style.css 파일을 로드하고,

/* style.css */
@import url("style-header.css");
@import url("style-main.css");
@import url("style-footer.css");
@import url("style-sidebar.css");

style.css 파일에서 또다른 외부의 CSS 파일을 로드 함으로써 복잡한 파일을 조금더 알아보기 쉽게 관리 할 수도 있습니다.

link 태그 vs @import

link 태그와 @import 의 사용은 비슷하지만, 속도의 측면에서 link 태그를 사용하는 것이 더 낫다고 합니다. 해당 내용은 @import를 사용하기 전에 알고 사용하자!! – seye2 님의 블로그를 참고하세요.

끝.

link 태그를 이용해 CSS 파일 로드하기

@import 를 이용해 CSS 파일 로드하기

link 태그와 @import 동시에 사용하기

link 태그 vs @import

댓글 남기기응답 취소