[전자책] 스타일 시트의 우선 순위

스타일 시트의 우선순위

HTML에서 스타일시트의 우선순위는 다음과 같습니다:

인라인 스타일(Inline Styles): HTML 요소 내에 직접 작성된 스타일이 가장 높은 우선순위를 갖습니다. 예를 들어, <div style="color: red;">과 같이 태그 안에 직접 스타일을 지정합니다.
내부 스타일시트(Internal or Embedded Stylesheets): <style> 태그를 사용하여 HTML 문서 내에 정의된 스타일입니다. 문서의 <head> 섹션에 위치합니다. 예: <style> body {color: blue;} </style>
외부 스타일시트(External Stylesheets): 별도의 CSS 파일로 작성되고 HTML 문서에 링크됩니다. <link> 태그를 사용하여 연결하며, 주로 사이트 전반의 일관된 스타일을 정의하는 데 사용됩니다. 예: <link rel="stylesheet" href="styles.css">
브라우저 기본 스타일(Browser Default Styles): 모든 스타일 규칙이 적용되지 않을 때, 브라우저의 기본 스타일이 적용됩니다.

추가적으로, CSS의 중요도(Importance), 특수성(Specificity), 그리고 소스 순서(Source Order)도 우선순위에 영향을 미칩니다.

중요도(Importance): !important를 사용한 스타일 규칙이 다른 일반 규칙보다 우선시 됩니다.
특수성(Specificity): 선택자의 구체성에 따라 우선순위가 달라집니다. 예를 들어, ID 선택자는 클래스 선택자보다 높은 특수성을 가지며, 클래스 선택자는 태그 선택자보다 높은 특수성을 가집니다.
소스 순서(Source Order): HTML 문서에서 나중에 오는 스타일 규칙이 먼저 오는 규칙보다 우선됩니다.

이러한 규칙들을 이해하고 적절히 활용하면 웹 페이지의 스타일링을 보다 효과적으로 관리할 수 있습니다.