반응형
CSS에서 외부 CSS 파일 가져오기
CSS에서 외부 스타일시트 파일을 가져오는 방법은 간단합니다. HTML 문서의 <head> 부분에 <link> 태그를 사용하여 외부 CSS 파일을 참조하면 됩니다. 이 방법은 웹 페이지 전체에 일관된 스타일을 적용하고자 할 때 매우 유용합니다. 아래는 외부 CSS 파일을 가져오는 방법에 대한 예시입니다.
CSS 파일 링크하기
먼저, CSS 스타일을 정의한 외부 파일을 준비합니다. 이 파일은 .css 확장자를 가지고 있어야 합니다. 예를 들어, style.css라는 이름의 파일을 만들 수 있습니다.
style.css (CSS 파일 예시)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
color: #333;
}이제, 이 CSS 파일을 HTML 문서에 연결해야 합니다. 이를 위해 <link> 태그를 사용하며, 이 태그는 <head> 태그 내에 위치해야 합니다.
HTML 문서 예시:
<!DOCTYPE html>
<html>
<head>
<title>Sample Web Page</title>
<!-- 여기에 외부 CSS 파일을 링크합니다 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph in the sample web page.</p>
</body>
</html>중요 포인트
<link>태그에는rel="stylesheet"속성이 포함되어야 하며, 이는 해당 파일이 스타일시트임을 나타냅니다.href속성은 외부 CSS 파일의 경로를 지정합니다. 이 경로는 절대 경로나 상대 경로일 수 있습니다.- CSS 파일은 서버에 업로드되어 있어야 웹 페이지에서 정상적으로 작동합니다.
이 방법을 통해 HTML 문서에서 외부 CSS 파일을 가져오면, CSS 파일에서 정의한 스타일이 해당 HTML 문서에 적용됩니다. 이렇게 분리된 구조는 웹 페이지의 유지보수를 용이하게 하고, 스타일 변경 시 여러 페이지에 걸쳐 일관된 수정을 가능하게 합니다.
반응형
'온라인 멘토와 함께하는 공부 > HTML' 카테고리의 다른 글
| [HTML] CSS에서 아이디와 클래스 (22) | 2023.12.29 |
|---|---|
| [HTML] CSS에서 인라인 스타일에 대한 것 (31) | 2023.12.28 |
| [HTML] CSS에 대하여 (28) | 2023.12.26 |
| [HTML] HTML과 XHTML 비교 (23) | 2023.12.25 |
| [HTML] 태그로 보는 DOM 구조 (27) | 2023.12.24 |
