코드잇 스프린트 4기
1주 차 위클리 페이퍼
CSS: Cascading Style Sheets
CSS에서 캐스케이딩(Cascading)은 폭포의 의미를 가진다.
하나의 요소에 스타일 상속 및 중복된 스타일 선언이 있을 때 단 하나의 스타일이 적용된다.
위 폭포 이미지에서 위에서부터 물이 흘러내려와 결국 바닥에 닿는 물은 하나라는 의미를 떠올리면 된다.
그렇다면 요소에 적용되는 스타일은 어떤 기준으로 적용되는가
우선순위
나중에 선언된 스타일이 우선순위가 높다.
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
<p>파란색입니다.</p>
더 명확한 선택자를 사용하면 우선순위가 높다.
<style>
#my-id {
color: red;
}
.my-class {
color: green;
}
p {
color: blue;
}
</style>
<p id="my-id" class="my-class">빨간색입니다.</p>
CSS 적용 방법에서 인라인(Inline) CSS의 우선순위가 가장 높다.
내부(Internal) CSS와 외부(External) CSS는 나중에 선언된 스타일이 우선순위가 높다.
일반적으로 브라우저 기본 CSS의 우선순위가 가장 낮다.
· 인라인(Inline) CSS: 요소안에 style 속성으로 스타일 선언
· 내부(Internal) CSS: <head>의 <style>안에 스타일 선언
· 외부(External) CSS: <head>의 <link>를 이용한 스타일 선언
style.css
#my-id {
color: yellow;
}
<style>
#my-id {
color: red;
}
.my-class {
color: green;
}
p {
color: blue;
}
</style>
<link rel="stylesheet" href="./style.css" />
<p id="my-id" class="my-class" style="color: pink">분홍색입니다.</p>
!important를 사용하면 우선순위가 높다.
<style>
#my-id {
color: red;
}
.my-class {
color: green;
}
p {
color: blue !important;
}
</style>
<p id="my-id" class="my-class" style="color: pink">파란색입니다.</p>
상속이 가능한 스타일은 가까운 조상에게 물려받은 스타일의 우선순위가 높다.
<style>
a {
color: red;
}
p {
color: green;
}
div {
color: blue;
}
</style>
<div>
<p>
<a>
<span>빨간색입니다.</span>
</a>
</p>
</div>
감사합니다.
'코드잇 스프린트 4기 > 위클리 페이퍼' 카테고리의 다른 글
| [JavaScript] 얕은 복사, 깊은 복사 (0) | 2024.01.20 |
|---|---|
| [Git] Git-flow (0) | 2024.01.12 |
| [Git] 머지(merge) (0) | 2024.01.12 |
| [CSS] 포지션(Position) (0) | 2024.01.07 |
| [HTML] 시맨틱 태그(Semantic Tag) (0) | 2024.01.07 |
댓글