cascading 의미
CSS :
-Cascading style sheet의 약자로 웹 페이지의 디자인, 레이아웃, 스타일링을 정의하기 위해 사용하는 스타일 시트 언어.
-여기서 첫번째 단어 Cascading은 '폭포, 위에서 아래로 쏟아지는'이라는 단어 뜻을 가짐
-언어 특성 상 하나의 tag에 중첩해서 동일한 속성 적용되어야 할때 어떤 속성을 우선순위로 보여줄지를 표현
우선순위
:3가지에 의해 결정된다.
1.중요도(Important)
2.명시도(Specificity)
3.코드 순서
1.중요도(Important)
스타일이 선언된 위치에 따라 우선순위 결정
기본적으로 프로그래머의 스타일 시트에 우선권을 부여하고 사용자와 브라우저의 스타일 시트 우선순위 낮음
[브라우저 CSS < 사용자 CSS < 프로그래머 CSS]
** !important
동일 <h1> 이라고 가정시
<head>
<style>
h1 {
color:blue !important;
}
h1 {
color:red;
}
</style>
</head>
<body>
<h1> cascading은 우선순위를 결정한다. </h1>
</body>
=> 해당하는 h1 부분 글 색상 : blue 적용
=> 의도적으로 중요도를 끌어올리지만 스타일 시트 내 정해진 우선순위를 깨버려 디버깅을 어렵게 하기에 좋지 않은 습관
2.명시도(Specificity)
선택자(selector)에 따라 우선순위 다름
포괄적일수록 우선순위가 낮아지고 명시적이고 구체적인 속성일수록 우선순위가 높아짐.
[태그 < class < id < 인라인(style 내부 존재)]
*인라인은 하나의 태그 안에서만 적용되므로 가장 높은 순위
<a href=" " style="color:gray"> 3. 코드순서
같은 속성이 선언된다면 마지막에 나온 코드를 최우선으로 적용
<style>
p {
color: blue;
color: red;
</style>
=>글 색상 : red 적용
