[CSS 기초] 2. HTML에 스타일을 적용하는 방식
1. 개요
HTML 문서에 스타일을 적용하는 방식은 3가지가 있습니다.
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
각각을 하나씩 알아보고, HTML 문서 내에서 스타일을 적용하는 방식(인라인, 내부)과 CSS 파일을 별도로 만들어 적용하는 방식(외부)을 비교해보도록 하겠습니다.
2. 인라인 스타일
HTML 태그에 style 속성을 적용하는 방법입니다. 해당하는 태그에만 스타일이 적용됩니다.
<body>
<h1 style="color: blue">스타일 적용</h1>
<h1>스타일 적용</h1>
</body>
3. 내부 스타일 시트
HTML 파일에서 <style> 태그를 이용하는 방식입니다. <head>태그 안에 작성합니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>스타일 적용</h1>
<h1>스타일 적용</h1>
</body>
</html>
4. 외부 스타일 시트
CSS 파일을 별도로 만들어 HTML 문서와 연결해주는 방식입니다.
HTML 파일에서 <link> 태그를 이용해 외부의 CSS 파일을 연결합니다. <head> 태그 안에 작성합니다.
style.css
h1 {
color: blue;
}ndex.html
<!DOCTYPE html>
<html lang="en">
<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" />
<link href="./style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<h1>스타일 적용</h1>
<h1>스타일 적용</h1>
</body>
</html>
5. 세 가지 방식 비교
스타일 우선순위
위 세 가지 방식 중 하나를 선택해 스타일링해도 되고, 모두 사용해 스타일을 적용할 수도 있습니다. 만약 세 가지 모두 사용할 경우 어떤 방식이 우선적으로 적용될까요?
인라인 > 내부 > 외부 순으로 적용됩니다. 인라인으로 작성된 스타일이 가장 높은 우선순위를 가지며, 외부 링크로 연결된 스타일이 가장 낮은 순위를 가집니다. 즉, 인라인으로 스타일이 작성된 태그에 대해 외부 스타일 시트에서 스타일을 변경해도 아무런 변화가 일어나지 않습니다.
무엇을 사용할까?
세 가지 방식 중 어떤 것을 사용하는 것이 좋을까요? 우선 인라인 방식은 지양하는 것이 좋습니다. 하나의 태그에 스타일을 적용하는 방식은 반복적인 작업에 효율적이지 못하며, 콘텐츠의 내용과 스타일이 함께 있으면 보기에도 좋지 않고 유지보수에 어려움이 있기 때문입니다.
그럼 내부 스타일 시트는 어떨까요? 위 예시를 보면 사실상 외부 스타일 시트와 다른 것이 없어 보입니다. 두 방식 모두 내용과 스타일이 분리되어 있고 결과도 동일하기 때문입니다. 하지만 HTML 문서가 여러 개일 경우에 이야기가 달라집니다. 동일한 스타일을 여러 HTML 문서에 적용해야 하는 경우 내부 스타일 시트를 사용한다면 각 HTML 파일에 모든 스타일 코드를 작성해줘야 합니다. 반면, 외부 스타일 시트를 사용한다면 <link> 태그를 통해 한 줄만 작성하면 각 HTML 파일에 동일한 스타일을 적용할 수 있습니다.
따라서 HTML 문서가 하나라면 아무거나 사용하고, 문서가 여러 개라면 외부 스타일 시트를 사용하는 것을 추천합니다.
'프론트엔드 입문 가이드 > CSS 기초' 카테고리의 다른 글
| [CSS 기초] 3. CSS 문법 & 선택자 (0) | 2022.03.29 |
|---|---|
| [CSS 기초] 1. CSS란? (0) | 2022.03.23 |
| [CSS 기초] 0. 소개 (0) | 2022.03.22 |
