CSS의 Cascading(계단식)에 대해서 알려드리겠습니다!
[ 목차 ]
1. Cascading 스타일 시트 정의
2. Cascading 원리 및 예시
3. Cascading 스타일 시트 장점
4. 결론
CSS의 Cascading이란?
CSS는 Cascading Style Sheets의 약자입니다. 이때, cascading의 사전적 의미는 아래와 같습니다.
Cascading: 계단식의 ; 단계적으로
따라서 Cascading Style Sheet는 단계적으로 적용되는 스타일 시트라고 생각하시면 됩니다~
CSS(Cascading Style Sheets)는 HTML 요소들의 스타일을 정의하는 언어입니다.
하지만 CSS의 주된 기능 중 하나는 바로 'Cascading'입니다.
이는 여러 스타일 규칙이 중첩될 때 어떤 규칙이 우선 적용될지를 결정하는 메커니즘을 의미합니다.
Cascading 원리
CSS는 '계단식'이라는 이름처럼, 여러 스타일 규칙을 단계적으로 적용합니다. 이 과정은 세 가지 주요 원칙을 따릅니다!
우선순위 / 명시성 / 소스 순서
1. 우선순위 CSS
스타일 규칙의 우선순위를 고려합니다.
예를 들어, 브라우저 기본 스타일, 사용자 정의 스타일, 개발자 정의 스타일 중 가장 우선되는 것이 적용됩니다.
2. 명시성(Specificity)
명시성은 선택자의 구체성을 기준으로 스타일을 적용합니다. 선택자가 더 구체적일수록 그 스타일이 우선합니다.
1. 인라인 스타일: 가장 높은 우선순위 (ex. style="color: red;")
2. ID 선택자: 두 번째로 높음 (ex. #header)
3. 클래스, 속성, 가상 클래스 선택자: 세 번째로 높음 (ex. .nav, [type="text"],)
4. 요소 선택자: 가장 낮음 (ex. h1, p)
1번에서 4번 순으로 명시성이 점점 낮아집니다! 즉, 인라인 스타일 때가 가장 높다는 것이죠!
3. 소스 순서
동일한 우선순위와 명시성을 가진 규칙이 충돌하면, CSS는 나중에 작성된 규칙을 적용합니다.
즉, 소스 코드에서 더 아래에 있는 스타일이 우선합니다.
Cascading 명시성 예시 코드를 통해 Cascading의 원리를 더 명확히 이해해봅시다!
<!DOCTYPE html>
<html>
<head>
<style>
/* 요소 선택자 */
p { color: blue; }
/* 클래스 선택자 */
.highlight { color: green; }
/* ID 선택자 */
#special { color: red; }
/* 인라인 스타일 */
</style>
</head>
<body>
<p class="highlight" id="special" style="color: yellow;">이 문장의 색은?</p>
</body>
</html>
요소 선택자인 p / 클래스 선택자인 .highlight / 아이디 선택자인 #special / 인라인 스타일인 style = ""
모든 것이 적용되었을 때 문장의 색상은 무엇일까요??
정답은!
p 요소의 색상은 yellow로 설정됩니다. 이는 인라인 스타일이 가장 높은 우선순위를 가지기 때문입니다.
만약 style="color: yellow" 가 없었다면?
ID 선택자인 red로 설정이 되겠죠!
CSS는 다양한 장점을 제공합니다!
가독성 up! 코드가 예뻐져요
CSS의 계단식 적용 원리를 이용하면 코드가 명확해지고, 여러 스타일 규칙을 관리하기 쉽습니다.
각 스타일 규칙의 적용 범위와 우선순위를 이해하기 쉽게 할 수 있어, 코드의 가독성이 높아집니다.
유지보수 용이
CSS의 Cascading 원리 덕분에 스타일 변경이 간편합니다.
특정 요소의 스타일을 변경하고자 할 때, 해당 요소의 스타일 규칙만 수정하면 됩니다.
이는 프로젝트의 유지보수를 크게 용이하게 만듭니다.
재사용성 증가
CSS 클래스와 ID를 사용하면 동일한 스타일을 여러 요소에 적용할 수 있어, 스타일의 재사용성이 증가합니다.
이는 코드의 중복을 줄이고, 효율적인 스타일 관리가 가능합니다.
결론
요약하자면, CSS의 Cascading(계단식) 스타일 시트는 단계적으로 스타일을 적용하여 웹 페이지의 스타일을 관리하고, 코드의 가독성과 유지보수성을 높이며, 재사용성을 증가시킵니다. Cascading 원리를 잘 이해하고 활용함으로써, 우리는 더욱 명확하고 효율적인 style sheet를 작성할 수 있습니다.
CSS의 Cascading 스타일 시트는 단순한 스타일 적용이 아닌, 웹 페이지의 스타일을 체계적으로 관리하는 중요한 기술이므로 적절하고 알맞게 사용하면 좋답니다!
'위클리페이퍼' 카테고리의 다른 글
| React: 렌더링, Virtual DOM, Component (0) | 2024.08.25 |
|---|---|
| 렉시컬 스코프(Lexical Scope): 코드 유효 범위 이해하기 (0) | 2024.08.18 |
| JS에서는 var는 왜 이제 안 쓰일까? 그리고 this는 무엇을 가리킬까? (0) | 2024.08.18 |
| 브라우저(browser)가 어떻게 동작하는지 알아보자! (0) | 2024.08.11 |
| 개발자가 알아야 할 '시맨틱 태그'의 장점 (0) | 2024.08.03 |