반응형
안녕하세요, 토스트데브입니다!
지난 시간에 CSS란 무엇인지, CSS의 역할에 대해 알아봤죠?
오늘은 CSS를 실전에서 어떻게 적용하는지를 배워볼 차례입니다.
즉, HTML 문서에 CSS를 어떤 방식으로 연결하고 적용하는가에 대한 내용이에요.
1️⃣ CSS 적용 방법이란?
HTML은 구조(태그)를 만들고, CSS는 스타일을 입힙니다.
그런데 CSS를 HTML에 적용하는 방법은 3가지가 있습니다:
- 인라인(Inline) 스타일
- 내부(Internal) 스타일시트
- 외부(External) 스타일시트
각 방법은 사용 목적과 상황에 따라 적절하게 선택됩니다.
자, 하나씩 살펴볼까요?
2️⃣ 인라인 스타일 (Inline Style)
📌 정의
HTML 요소의 style 속성 안에 직접 CSS를 작성하는 방식입니다.
✅ 예시
<p style="color: red; font-size: 18px;">이 문장은 인라인 스타일입니다.</p>👍 장점
- 특정 요소만 빠르게 스타일을 적용할 때 편리함
- 디버깅 시 유용
👎 단점
- 재사용 불가, 유지보수가 어려움
- HTML과 CSS가 섞여 있어 코드 가독성 저하
🚫 언제 쓰지 말아야 하나?
- 많은 요소에 반복 적용할 경우
- 프로젝트 규모가 커질 경우
3️⃣ 내부 스타일시트 (Internal StyleSheet)
📌 정의
HTML 문서 <head> 태그 안에 <style> 태그를 사용하여 CSS를 작성하는 방식입니다.
✅ 예시
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>내부 스타일 적용 예시</h1>
</body>
</html>👍 장점
- 하나의 HTML 문서에만 적용되므로 간단한 프로젝트에 적합
- HTML과 CSS가 같은 파일에 있어 구조 파악이 쉬움
👎 단점
- 다른 HTML 파일에서는 재사용 불가
- CSS 코드가 많아질 경우 문서가 복잡해짐
4️⃣ 외부 스타일시트 (External StyleSheet)
📌 정의
CSS를 별도의 .css 파일로 분리하여 <link> 태그를 통해 연결하는 방식입니다.
실무에서 가장 널리 쓰이는 방식입니다.
✅ 예시
style.css
body {
background-color: #f0f0f0;
}
p {
font-size: 16px;
color: #333;
}index.html
<head>
<link rel="stylesheet" href="style.css">
</head>👍 장점
- 여러 HTML 페이지에서 공통 스타일 재사용 가능
- 코드 분리가 되어 가독성, 유지보수성 우수
- 팀 프로젝트, 실무에서 표준 방식
👎 단점
- CSS 파일을 따로 관리해야 함
- CSS 파일을 불러오는 데 시간이 걸릴 수 있음 (초기 로딩 지연)
5️⃣ 세 가지 방식 비교 요약
| 구분 | 위치 | 재사용성 | 유지보수 | 실무사용 |
| 인라인 | 요소 내부 | X | 매우 낮음 | 거의 없음 |
| 내부 | <head>의 <style> | X | 중간 | 소규모 또는 실습용 |
| 외부 | 별도 .css 파일 | O | 매우 높음 | ✅ 실무 표준 |
6️⃣ 어떤 방식을 사용해야 할까?
| 상황 | 추천방식 |
| 빠른 테스트나 디버깅 | 인라인 |
| 단일 HTML 파일, 간단한 예제 | 내부 스타일 |
| 여러 페이지에 적용, 실무 프로젝트 | 외부 스타일시트 (추천!) ✅ |
7️⃣ 정리하며…
CSS는 단순히 스타일을 입히는 것을 넘어서 적절한 방식으로 적용하는 것이 유지보수와 확장성 측면에서 매우 중요합니다.
외부 스타일시트를 기본으로 사용하고, 필요할 때 내부 또는 인라인을 상황에 맞게 사용해보세요.
#CSS기초 #CSS적용방법 #인라인스타일 #내부스타일시트 #외부스타일시트 #웹개발기초 #HTML과CSS #프론트엔드기초 #웹표준 #CSS강의
반응형
'Web Front > CSS' 카테고리의 다른 글
| [CSS] #04 CSS 기초이해, CSS 주석 작성법 완벽 가이드! 협업과 유지보수를 위한 필수 스킬 (1) | 2025.08.14 |
|---|---|
| [CSS] #03 CSS 기초이해, CSS 선택자 완벽 정리! 기본 선택자부터 가상 클래스까지 한 번에 배우기 (2) | 2025.08.13 |
| [CSS] #01 CSS 기초이해, CSS란? 웹 디자인의 시작, CSS의 개념과 역할 완전 정복! (0) | 2025.08.11 |