HTML 문서에서 CSS를 적용하는 방법에는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트가 있다. 각각의 장단점과 특징을 이해하고 적절한 상황에 맞게 사용해야 한다!
인라인 스타일(Inline Style)
<h1 style="color: purple">Inline-style</h1>- HTML 요소에 직접
style속성을 사용해 스타일을 작성하는 방법이다.
특징
- 같은 태그라 하더라도 스타일을 공유할 수 없다. (복사를 해야함)
- 스타일을 수정하려면 일일이 찾아서 수정해줘야 한다.
- 유지보수성이 낮고, 코드가 지저분해지기 쉽다.
정리
- 좋은 방법이 아니다.
- 특정 요소 하나만 임시로 스타일을 지정해야 하는 경우 사용한다.
내부 스타일 시트(Internal Style Sheet)
<head>
<style>
h2 {
color: purple;
}
</style>
</head>
<body>
<!-- 세 개의 h2 태그에 모두 적용된다. -->
<h2>Internal-style</h2>
<h2>Internal-style</h2>
<h2>Internal-style</h2>
</body><style>태그를 사용해 문서의<head>내부에 CSS를 작성하는 방법이다.
특징
- 인라인 스타일보다는 더 나은 방법이다.
- 복사하지 않아도 동일한 태그에 스타일을 한 번에 적용할 수 있다.
- 하지만 여러 문서나 페이지에서 동일한 스타일을 적용하려면 각 문서마다
<style>태그를 복사해서 붙여넣어야 한다. - 특정 문서에만 사용되는 스타일을 정의할 때 적합하다.
정리
- 여러 문서에서 동일한 스타일을 적용해야 하는 경우에는 적합하지 않다.
외부 스타일 시트(External Style Sheet)
- 가장 좋은 방법이다.
.css확장자를 가진 별도의 파일을 생성한 뒤 CSS를 작성하는 방법이다.<link>태그를 사용해서 HTML 문서와 연결해야 한다.
외부 스타일 시트를 포함하는 방법
<head>
<link rel="stylesheet" href="my_style.css">
</head>특징
- 한 번 작성한 CSS를 여러 HTML 문서에서 재사용할 수 있다.
- 유지보수가 용이하다.
- HTML과 CSS가 분리되어 코드의 가독성이 높다.
정리
- 여러 페이지에 동일한 스타일을 적용해야 하는 경우/ 유지보수를 쉽게 하고 싶은 경우 외부 스타일 시트를 사용한다.
어떤 걸 사용해야 할까?
- 인라인 스타일 (추천 X) : 특정 요소 하나에만 스타일 적용
- 내부 스타일 시트 (추천 X) : 단일 HTML 문서에서만 사용하는 스타일 정의
- 외부 스타일 시트 (추천 O) : 여러 파일에 동일한 스타일 적용/ 유지보수 용이 (되도록 외부 스타일 시트 사용하기)
CSS 우선 순위
- 브라우저 기본 스타일
- 외부 스타일 시트
- 내부 스타일 시트
- 인라인 스타일 (가장 우선순위가 높다)
'기초 학습 > CSS' 카테고리의 다른 글
| [CSS] 가상 클래스 선택자 (0) | 2024.12.10 |
|---|---|
| [CSS] 선택자 (1) | 2024.12.09 |
| [CSS] 텍스트 속성 (text-align, font-weight) (0) | 2024.12.05 |
| [CSS] 텍스트 색 및 배경색 변경하기 (color, background-color) (0) | 2024.12.04 |
| [CSS] CSS란? (0) | 2024.12.04 |