지난 포스트의 후반에 생활코딩 CSS 수업 영상 중 'Stylish' 익스텐션을 소개하는 영상을 올렸었다.
거기서 "뒤에서 캐스케이딩이란 걸 배우면 그때 이해할 수 있습니다."라는 멘트가 나왔었는데, 이번에는 그 캐스케이딩Cascading이라는 것에 대해 알아보겠다.
이전 포스트
CSS 상속: 상속되는 속성과 안 되는 속성 구분하기 (inherit 속성 활용법)
부모의 스타일을 자식이 물려받는 CSS 상속, 왜 필요할까요? 텍스트 관련 속성은 상속되고 박스 모델 속성은 상속되지 않는 이유를 정리했습니다. 강제 상속 키워드 inherit 활용 팁, 그리고 브라우저 디자인을 바꾸는 Stylus 익스텐션 이야기까지 확인해 보세요.
생활코딩 CSS 수업 영상: 캐스케이딩
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red !important;}
#idsel{color:blue;}
.classsel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel" style="color:powderblue">css</li>
<li>javascript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>위의 생활코딩 수업 영상에서 사용한 코드다.
Cascading
Cascading을 사전에서 검색해 보면 "(폭포처럼) 떨어져 내리는"이라는 뜻이라고 나온다.
이 폭포라는 뜻처럼 CSS의 캐스케이딩은 여러 스타일 규칙이 충돌할 때, 어떤 규칙을 우선적으로 적용할지 결정하는 우선순위 체계를 말한다.
캐스케이딩은 크게 3가지 기준에 따라 우선순위를 결정한다.
1. 중요도 (Importance)
스타일이 어디서 선언되었느냐에 따라 힘의 크기가 달라진다.
!important: 모든 규칙을 무시하고 최우선으로 적용된다. 하지만 남용하면 나중에 수정이 힘들어지니 주의해야 한다.- 브라우저의 인라인 스타일: HTML 태그 안에 직접 쓴
style="..."속성 - 제작자 스타일: 우리가 작성한 CSS 코드
- 브라우저 기본 스타일: 크롬이나 파이어폭스가 기본적으로 가진 스타일
2. 명시도 (Specificity)
선택자가 얼마나 구체적인가를 따지는 점수제다. 점수가 높을수록 우선순위가 높다.
- 1000점: 인라인 스타일 (
style="...") - 100점: 아이디 선택자 (
#id) - 10점: 클래스 선택자 (
.class), 가상 클래스 선택자 (:hover) - 1점: 태그 선택자 (
li,div)
예를 들어 div.content는 1점(div) + 10점(.content) = 11점이고, #main은 100점이므로 아이디 선택자가 이긴다.
3. 코드 순서
중요도와 명시도가 완전히 같다면, 가장 마지막에 작성된 코드가 이전 코드를 덮어쓴다.
폭포수가 위에서 아래로 흐르듯, 아래쪽에 있는 코드가 최종 승자가 되는 셈이다.
#idsel { color: blue; }
#idsel { color: yellow; } /* 명시도가 같으므로 나중에 쓴 노란색이 적용됨 */생활코딩 CSS 수업 영상: Bracket 코드 에디터
생활코딩 CSS 수업 재생목록에 있는 영상이라 가져왔지만 중요하지 않으니 넘어가도록 하자.
Bracket이라는 코드 에디터를 소개하는 영상인데, VSCode를 사용 중이라면 이미 같은 기능을 대부분 가지고 있을 거다.
다음 포스트
CSS 레이아웃 기초: 블록과 인라인, 박스 모델(Padding과 Margin), box-sizing 속성 정리
CSS 레이아웃의 뼈대, '박스'를 마스터해 보세요! 화면 전체를 쓰는 블록(Block)과 글자처럼 흐르는 인라인(Inline)의 차이점부터 패딩(Padding), 마진(Margin)의 명확한 구분법, 그리고 box-sizing 속성까지 정리했습니다.
이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요.
(비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩