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><link> 태그로 스타일 파일 불러오기</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><@import>로 외부 스타일 불러오기</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 |
댓글