CSS 스타일 충돌? 걱정 마세요! 우선순위가 해결해 줄 거예요! 😎🦸♀️🦸♂️
CSS 스타일을 작성하다 보면 외부 스타일시트, HTML 내부 스타일, 인라인 스타일이 서로 충돌하는 경우가 발생할 수 있습니다. 😱 이럴 때 어떤 스타일이 적용될지 헷갈리시죠? CSS에는 이러한 충돌을 해결하기 위한 우선순위라는 규칙이 있습니다! ✨
CSS 우선순위 4단계! 🪜
CSS 스타일 우선순위는 다음과 같은 4단계로 나뉘며, 숫자가 높을수록 우선순위가 높습니다.
1️⃣ 인라인 스타일 (Inline Style): HTML 태그에 직접 style 속성으로 작성된 스타일이 가장 높은 우선순위를 가집니다.
<p style="color: red;">빨간색 텍스트!</p>
2️⃣ 내부 스타일 (Internal Style): HTML 문서의 <head> 태그 안에 <style> 태그로 작성된 스타일입니다.
<style>
p { color: blue; }
</style>
3️⃣ 외부 스타일 (External Style): 외부 CSS 파일에 작성된 스타일입니다. <link> 태그를 사용하여 HTML 문서에 연결합니다.
<link rel="stylesheet" href="style.css">
4️⃣ 브라우저 기본 스타일 (User Agent Stylesheet): 웹 브라우저가 기본적으로 제공하는 스타일입니다. 가장 낮은 우선순위를 가집니다.
같은 우선순위라면? 🤔
만약 같은 우선순위를 가진 스타일 규칙들이 충돌한다면, 다음과 같은 순서로 적용됩니다.
- 나중에 선언된 스타일: CSS 파일이나 <style> 태그에서 나중에 작성된 스타일이 우선 적용됩니다.
- 더 구체적인 선택자: #id > .class > 태그 이름 순으로 더 구체적인 선택자를 사용한 스타일이 우선 적용됩니다.
!important: 최후의 보루! 🚨
!important 규칙을 사용하면 모든 우선순위를 무시하고 해당 스타일을 적용할 수 있습니다. 하지만 남용하면 CSS 관리가 어려워지므로 신중하게 사용해야 합니다.
p { color: red !important; }
CSS 우선순위, 이제 걱정 끝! 😉
CSS 우선순위 규칙을 이해하면 스타일 충돌 문제를 쉽게 해결할 수 있습니다. 다양한 스타일 규칙을 적절히 조합하여 원하는 웹 페이지 디자인을 완성해 보세요!
'Coding 공부 > HTML+CSS' 카테고리의 다른 글
| [ThymeleaThymeleaf Layout Dialect : 웹 페이지 레이아웃 (2) | 2024.06.13 |
|---|---|
| [HTML+CSS_Summary] 총 정리 (0) | 2024.02.16 |
| [HTML+CSS_Summary] 웹 호스팅, 닷홈, Filezila, Just홈쇼핑 연습문제 (2) | 2024.02.08 |
| [HTML+CSS] 리트리버 과제, just쇼핑몰 예제, position 추가부분 (2) | 2024.02.05 |
| [HTML+CSS_Summary] position, 이미지 삽입, 로고 삽입, i class, 동영상 삽입 (0) | 2024.01.29 |
댓글