css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기

네 안녕하세요, 이번 포스팅에서는 외부에서 스타일 시트를 불러오는 방법에 대하여 알아보도록 하겠습니다.

보통 css 스타일 시트를 적용하는 방법이 크게 2가지가 있습니다.

html 본 파일 내부에 style 태그를 써서 직접 입력하기
css 파일을 따로 작성하여 본 html 파일에 호출하기

이번 포스팅에서는 밑에 있는 방법에 대하여 배워보도록 하겠습니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 외부 스타일 시트 파일 불러오기

외부에서 파일을 호출하여 쓰는 방법은 실제로 프로그래밍을 할 때 가장 많이 사용하는 방법입니다.

우리가 하나의 본 파일 안에 스타일 시트를 직접 작성하게 되면

필요에 따라서 다시 그걸 똑같이 써야 하는 불편함이 생깁니다.

그래서 실제로 웹 개발을 할 때 html, css, 자바스크립트를 분리를 하여

본인이 넣고자 하는 파일을 html로 불러오는 방법을 채택합니다.

그렇게 하게 되면 코드 자체가 간결해져서 오류를 개선하는 디버깅 작업도 훨씬 편해지고,

구성 자체가 훨씬 더 직관적으로 변하게 됩니다.

그리고 이러한 방법을 우리는 '웹을 모듈화 시킨다'라고 하며,

외부 파일을 호출하는 방법은 크게 두 가지가 있습니다.

link 태그와 href 속성 이용하기
@import문 이용하기

이 중에 link 태그와 href 속성을 이용하는 방법을 먼저 설명드리도록 하겠습니다.

예제를 통해 같이 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>&lt;link&gt; 태그로 스타일 파일 불러오기</title>
    <link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h3>손연재</h3>
    <hr>
    <p>저는 체조 선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>

이렇게 한 번 작성을 해봤습니다.

여기서 link 라는 태그를 이용하여 그 속에 href 속성을 넣어서 css파일을 불러왔습니다.

css 파일은 이렇게 작성을 했습니다.

body {
    background-color: linen;
    color: blueviolet;
    margin-left: 30px;
    margin-right: 30px;
}

h3 {
    text-align: center;
    color: darkred;
}

이렇게 작성을 했습니다.

그럼 결과 화면이 어떻게 나오는지 한 번 봅시다.

이렇게 잘 나옴을 보실 수 있습니다.

1 - 1. @import문 사용하여 외부 파일 불러오기

이번에는 @import 문을 이용하는 방법입니다.

이걸 이용하면 css 파일을 불러오는 태그에 대한 코드 분량을 더 줄여서 가져올 수 있습니다.

그럼 이것도 간단한 예제를 통하여 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>&lt;@import&gt;로 외부 스타일 불러오기</title>
    <style>
        @import url(mystyle.css);
    </style>
</head>
<body>
    <h3>손연재</h3>
    <hr>
    <p>저는 체조 선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>

css 파일은 똑같이 작성을 했습니다.

@import문은 css와 자바스크립트에서 사용하는 문법인데,

보통 외부 파일을 가져올 때 사용을 합니다.

그리고 본 html 파일에 불러 올 css 파일은 이렇게 작성을 했습니다.

body {
    background-color: linen;
    color: blueviolet;
    margin-left: 30px;
    margin-right: 30px;
}

h3 {
    text-align: center;
    color: darkred;
}

이렇게 작성을 했습니다.

그럼 결과 화면은 어떻게 나오는지 한 번 봅시다.

이렇게 똑같이 아무런 이상 없이 잘 나옵니다.

2. 외부 파일을 불러올 때 주의사항

우리가 실제 개발을 하게 되면 해당 웹에 대한 폴더를 만들어서 거기에 여러 가지 파일을 넣어서 작성을 하게 될 겁니다.

그걸 도와주는 프로그램을 api 프로그램이라 부르고,

웹을 가지고서 틀을 작성하고 완전한 하나의 웹 사이트로 완성시키는 것을 도와주는 프로그램을 웹 프레임워크라 합니다.

이 웹 프레임워크, 또는 웹 관련 폴더 내에 같이 들어있어야만 불러올 수 있으니,

그 부분에 대하여 꼭 인지하고 계셔야 합니다.

여기까지 외부 파일을 불러오는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 css의 규칙에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 클래스 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 태그 이름 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 규칙에 대하여 알아보기 (0)	2023.03.13
css style 태그로 스타일 시트 만들기 (0)	2023.03.13
css 기초 맛보기 (0)	2023.03.10

개발러 L의 뻔fun한 코딩

css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기