박나겸
CSS란? 본문
CSS의 cascading에 대해 설명해주세요
CSS, Cascading Style Sheet의 약자입니다. Cascading은 위에서 아래로 떨어진다는 뜻을 가지고 있습니다. 이 캐스캐이딩은 CSS에서 가장 중요한 스타일 적용 규칙입니다.
CSS를 사용하다 보면 같은 요소에 대해 여러개의 스타일이 중복되는 경우가 있습니다.
<div style="color:#fff">
<p style="color:#fff"> cascading </p>
</div>
이 코드를 보면 p는 div의 하위 요소입니다. 하위요소들은 상위 요소에 적용된 스타일이 상속되어 적용되는데 p 태그에도 스타일을 사용자가 따로 지정을 해놨습니다. 이런 일들 때문에 CSS는 스타일링 규칙을 세웠습니다.
1. 스타일 우선순위
2. 스타일 상속
스타일 우선순위
실제 CSS에는 단순히 코드가 나열된 순서만 고려하는 것이 아니라 중요도, 명시도, 코드순서를 통해 우선순위를 정하고 그거에 맞게 스타일을 적용시킵니다.
- 중요도 : 스타일이 어디에서 선언되었는지
스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉘며, 사용자 > 작성자 > 사용자 도구 순으로 중요도를 높게 측정합니다.
- 사용자 스타일시트 - 사용자가 웹브라우저 확장 기능을 통해 지정하는 스타일
- 작성자 스타일시트 - visual과 같이 개발자가 작성하는 스타일시트 ( <head> 내부의 <style> 이 <link>로 연결된 css 파일보다 우선순위가 높음)
-명시도 : 셀렉터가 가리키는 것이 명확할 수록 우선순위가 높음
인라인>id>class> 태그 순으로 우선순위가 높게 측정됩니다.
- 인라인은 하나의 태그 내에서만 적용되므로 높은 우선순위를 갖습니다.
- id는 문서 내에서 한 번만 등장하므로 비교적 좁은 범위를 가지게됩니다.
- class는 여러번 쓰일 수 있기에 id보다는 넒은 범위를 갖습니다.
- 태그는 문서 내 모든 태그를 가리키므로 범위가 제일 넒습니다.
-코드 순서: 코드에 마지막에 등장한 속성을 최우선으로 적용
<h2>CSS</h2>
h2 {
color: red;
}
h2 {
color: green;
}
의 경우 h2의 색상은 초록색이 됩니다.
스타일 상속
태그들이 어떻게 포함되었는지에 따라서 스타일을 적용할 지 결정하는 원칩입니다.
<div style="color:blue">
부모 요소
<div>
자식요소
</div>
</div>
위 코드와 같이 바깥쪽 태그가 부모 요소, 안쪽 태그가 자식 요소 입니다.
스타일 상속이 되기 때문에 '부모 요소'라는 글자와 '자식 요소'라는 글자는 둘다 파랑색이 적용됩니다.
'코드잇' 카테고리의 다른 글
| [Git] Git-Flow 브랜치 전략 (1) | 2024.11.01 |
|---|---|
| [Git] branch merge에 대해서 (0) | 2024.11.01 |
| 시멘틱 태그의 장점 (0) | 2024.10.24 |
