코딩을 배우기 시작한 초보 개발자라면 대부분 인라인 스타일(inline style)부터 CSS를 웹 페이지에 적용하게 됩니다. style 속성을 사용해 HTML 요소에 직접 CSS를 삽입하는 가장 기본적인 방식입니다.
<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>
사이트가 점점 복잡해지면 내부 CSS(Internal CSS) 방식으로 전환하게 됩니다. 이는 HTML 문서의 <head> 섹션에 있는 <style> 태그 사이에 모든 CSS 코드를 작성하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1, h4 {
text-align: center;
}
h1 {
color: blue;
}
h4 {
color: red;
}
</style>
</head>
<body>
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html>
이렇게 하면 HTML이 한결 깔끔해집니다. 하지만 만약 CSS 코드가 500줄에 달한다면 어떨까요? 파일은 금방 읽고 관리하기 어려워질 것입니다. 다행히 외부 스타일시트(external stylesheet)를 따로 만들어 HTML 파일에 연결할 수 있습니다!
외부 스타일시트 설정 방법
- index.html 파일이 있는 메인 프로젝트 폴더에 index.css라는 새 파일을 생성합니다. index.css 파일에는 index.html에 적용할 모든 CSS가 담깁니다. 관리 편의를 위해 스타일을 적용할 HTML 파일과 같은 이름으로 CSS 파일을 짓는 것이 좋지만, 어떤 파일인지만 명확하다면 원하는 이름을 사용해도 무방합니다.
- HTML 파일의 <head> 안 <style> 태그 사이에 CSS 코드가 있다면, 태그를 제외한 CSS 코드만 잘라내 해당 CSS 파일에 붙여넣습니다.
- HTML 파일의 <head> 안에 CSS 파일을 가리키는 <link> 태그를 작성합니다.
<link rel="stylesheet" type="text/css" href="./index.css">
<link> 태그는 세 가지 속성으로 구성됩니다.
- rel 속성: 현재 문서와 연결된 파일 사이에 관계가 있음을 나타냅니다. 여기서는 스타일시트임을 의미합니다.
- type 속성: 연결된 파일과 HTML 파일 사이의 관계 유형을 설명합니다. CSS 파일의 경우 text/css로 지정합니다.
- href 속성: HTML 파일 위치를 기준으로 한 CSS 파일까지의 상대 경로, 즉 파일의 위치를 나타냅니다.
CSS 파일을 HTML 파일과 분리하더라도 CSS의 캐스케이딩(cascading, 계단식 적용) 특성은 여전히 유효하다는 점을 기억하세요. 즉, 여러 개의 CSS 파일을 사용하는 경우 다음 두 가지를 반드시 확인해야 합니다.
1. 각각의 CSS 파일을 가리키는 <link> 태그를 모두 작성해야 합니다.
2. 의도한 스타일이 제대로 적용되도록 파일들이 필요한 순서대로 배치되어 있는지 확인해야 합니다. 순서가 잘못되면 스타일이 예상과 다르게 적용될 수 있습니다.
이것으로 끝입니다! 이제 여러분도 프로젝트에 외부 스타일시트를 적용할 준비가 되었습니다.