CSS를 적용하는 방법은 크게 세 가지로 나눌 수 있다.
1. 인라인 스타일 (Inline Style)
HTML 태그 내에 style 속성을 사용하여 직접 CSS 코드를 작성하는 방법.
HTML
<p style="color: blue; font-size: 16px;">This is a paragraph.</p>
장점
- 간단하고 빠르게 특정 요소에 스타일을 적용할 수 있다.
단점
- 코드의 재사용성이 떨어지고, 유지 보수가 어렵다.
- HTML 구조와 스타일이 혼합되어 가독성이 나빠진다.
활용
- 단순한 스타일 변경이나 테스트를 위해 일시적으로 사용하기에 적합.
2. 내부 스타일 시트 (Internal Style Sheet)
HTML 문서의 <head> 섹션 안에 <style> 태그를 사용하여 CSS 코드를 작성하는 방법.
HTML
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
장점
- HTML 문서 내에서 스타일을 관리할 수 있어 편리하다.
- 인라인 스타일에 비해 코드 재사용성이 높다.
단점
- HTML 문서의 크기가 커지고, 여러 페이지에서 동일한 스타일을 적용하기 어렵다.
활용
- 특정 HTML 문서에만 적용되는 스타일을 정의할 때 유용.
3. 외부 스타일 시트 (External Style Sheet)
별도의 CSS 파일(.css)을 만들고, HTML 문서의 <head> 섹션에서 <link> 태그를 사용하여 CSS 파일을 연결하는 방법.
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
장점
- 코드 재사용성이 높고, 유지 보수가 용이하다.
- 여러 HTML 페이지에서 동일한 스타일을 공유할 수 있다.
- HTML 파일 크기를 줄여 웹 페이지 로딩 속도를 향상시킨다.
단점
- 별도의 CSS 파일을 관리해야 합니다.
활용
- 대규모 웹 사이트나 여러 페이지에서 공유하는 스타일을 정의할 때 가장 효과적이다.
'개발 > CSS' 카테고리의 다른 글
| Display 속성 (0) | 2025.02.17 |
|---|---|
| CSS 속성과 값의 카테고리 (0) | 2025.02.17 |
| box-sizing 속성 (0) | 2025.02.17 |
| CSS의 기본 구조 (0) | 2025.02.17 |
| css 변수 사용법 (0) | 2025.02.17 |