728x90
반응형
📌 CSS 스타일 적용 방법
CSS에서 스타일을 적용하는 방법은 크게 3가지가 있습니다.
| 스타일 | 유형적용방식 | 우선순위 |
| 1. 인라인 스타일 (Inline Style) | 요소에 직접 style="..." 속성을 사용 | 우선순위 가장 높음 (1000점) |
| 2. 내부 스타일 (Internal CSS) | <style> 태그를 사용하여 HTML 문서 내에서 정의 | 중간 (클래스, 태그 선택자 적용 가능) |
| 3. 외부 스타일 (External CSS) | 별도의 .css 파일을 만들고 <link> 태그로 연결 | 유지보수 용이, 우선순위 낮음 |
✅ 1. 인라인 스타일 (Inline Style)
✅ HTML 요소 내부에서 직접 style 속성을 사용하여 스타일을 지정하는 방식.
<p style="color: red; font-size: 20px;">인라인 스타일 예제</p>
✅ 특징
- 우선순위 가장 높음 (ID, 클래스보다 강력함)
- HTML과 CSS가 섞여 유지보수가 어려움
- 재사용 불가능 (모든 요소에 일일이 적용해야 함)
🚫 비추천: 코드가 지저분해지고 유지보수 어려움.
✅ 2. 내부 스타일 (Internal CSS)
✅ HTML 문서 내 <style> 태그를 사용하여 스타일을 정의하는 방식.
<!DOCTYPE html> <html lang="ko"> <head> <style> p { color: blue; font-size: 18px; } </style> </head> <body> <p>내부 스타일 예제</p> </body> </html>
✅ 특징
- 특정 HTML 문서에만 적용 가능 (외부 스타일보다 높은 우선순위)
- 재사용 가능하지만, 여러 문서에서 유지보수 어려움
- CSS 코드가 길어지면 HTML 문서가 복잡해짐
✅ 추천 상황:
- 작은 프로젝트 또는 한 페이지 웹사이트
- 테스트용 스타일 적용 시
✅ 3. 외부 스타일 (External CSS)
✅ 별도의 .css 파일을 만들고 <link> 태그로 연결하는 방식.
html
<!-- HTML 파일 --> <!DOCTYPE html> <html lang="ko"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>외부 스타일 예제</p> </body> </html>
css
/* style.css */ p { color: green; font-size: 16px; }
✅ 특징
- 여러 HTML 문서에서 동일한 스타일을 적용 가능 (유지보수 용이)
- 가장 추천되는 방식 (CSS를 모듈화하여 관리 가능)
- 우선순위가 낮지만, 관리가 쉬움
- 캐싱 가능 → 브라우저가 한 번 다운로드 후 저장하여 로딩 속도 최적화
✅ 추천 상황:
- 규모가 큰 웹사이트
- 반복적으로 같은 스타일을 적용해야 할 경우
📌 4. 세 가지 스타일의 우선순위
✅ 같은 스타일이 적용될 경우 우선순위는 다음과 같습니다.
1️⃣ 인라인 스타일 (style="...") → (1000점)
2️⃣ ID 선택자 (#id) → (100점)
3️⃣ 클래스, 가상 클래스 (.class, :hover) → (10점)
4️⃣ 태그 선택자 (p, h1) → (1점)
5️⃣ 외부 스타일 (External CSS) → 우선순위 가장 낮음
예제 (우선순위 적용 비교):
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
#text { color: blue; }
.text { color: green; } p { color: red; }
</style>
</head>
<body>
<p id="text" class="text" style="color: orange;"> 우선순위 테스트 </p>
</body>
</html>
✅ 최종적으로 color: orange; (인라인 스타일이 적용됨).
📌 결론
✔ 인라인 스타일 (style="...") → 우선순위 높지만 유지보수 어려움 ❌
✔ 내부 스타일 (<style> 태그) → 특정 페이지에만 적용할 때 사용 🟡
✔ 외부 스타일 (.css 파일 연결) → 가장 추천되는 방법 (재사용 가능 & 유지보수 용이) ✅
✅ CSS 적용 시, 가급적 "외부 스타일"을 사용하여 관리하는 것이 가장 좋은 방법! 🚀
728x90
반응형
'IT공부' 카테고리의 다른 글
| AI 개발자의 종류 및 차이점 정리 (0) | 2025.02.05 |
|---|---|
| [지식루프의 웹개발공부] <a> 태그의 target 속성 (0) | 2025.02.01 |
| [지식루프의 IT공부] shell은 컴파일러일까 인터프리터일까? (0) | 2025.01.06 |
| [지식루프의 IT공부] VirtualBox 화면 조정 문제 해결하기 (0) | 2025.01.06 |
| [지식루프의 웹개발공부] CSS 선택자 (0) | 2025.01.05 |