CSS레벨과 계승을 알고 싶다"
CSS에는 한번 설정된 속성 값이 뒤에서 등장하거나 레벨이 높은 속성 값이 낮은 속성 값을 덮어쓰는 특징이 있습니다. 이 CSS의 덮어쓰기 규칙이라는 것을 캐스캐이드(Cascade)라고 합니다.
페이지 수가 많지 않고 레이아웃도 심플한 웹 사이트를 만들 때에는 이 덮어쓰기 규칙을 잘 몰라도 상관 없습니다. 하지만 페이지 수가 많아지거나 복잡한 레이아웃을 한다면 약간의 덮어쓰기 규칙만 알고 있어도 작업이 순조롭게 진행될 것입니다.
쵝근 WorldPress 등의 CMS를 사용하여 템플릿을 커스터마이즈하여 웹 사이트를 구축하는 사례가 많아지고 있어서 '원래 있었던 CSS 일부를 '새롭게 만든 CSS'로 덮어쓰는 경우가 있습니다.
대략적인 덮어쓰기 규칙
기본적으로 CSS의 속성은 '강한 속성이 약한 속성으로 덮어쓰기 한다'라는 것입니디. 이것은 여러가지 요인으로 결정됩니다.
- 가장 약한 CSS~ 기본 CSS
HTML의 각 태그에는 '기본 CSS'라는 브라우저에 장착된 프리셋이라는 CSS가 처음부터 적용되고 있습니다. 이 기본 CSS 덕분에 제목을 의미하는 <h1>태그에 포함된 텍스트는 아무런 CSS를 쓰지 않아도 커다란 크기의 글자로 표시되고 단락을 의미하는 <p> 태그는 앞뒤로 1행씩 여백을 만듭니다. 다만 기본 CSS는 아주 약한 CSS를 이용해서 페이지의 제작자가 쉽게 수정할 수 있습니다.
-기본 CSS 보다 강한 '제작자가 쓴 CSS'
웹 페이지의 제작자가 쓴 CSS는 기본 CSS보다 강력한 것입니다. 즉 제작자의 CSS는 기본 CSS를 덮어쓰기 시작합니다. 게다가 제작자가 쓴 CSS 중에서도 강한 CSS가 약한 CSS를 덮어쓰기 합니다. 이 힘은 기본적으로 '셀렉터의 글쓰기 방법'과 '글 쓰는 순서'에 의해 결정합니다. 이 CSS의 힘을 결정하는 것이 '레벨'입니다.
최강 ' !important' 규칙:
CSS 속성 값에
!important를 추가하면 해당 속성은 최강이 되어 다른 어떤 스타일 규칙보다도 높은 우선순위를 가집니다. 이는 레벨 점수를 무시하고 거의 모든 다른 규칙을 덮어씁니다.예시:
위 코드처럼 !important를 사용하면 img.beacon 요소의 너비가 1픽셀로 고정되며, 다른 어떤 스타일도 이를 덮어쓸 수 없게 됩니다. 하지만 !important는 스타일의 유연성을 떨어뜨리고 유지 보수를 어렵게 만들 수 있으므로, 특별한 경우가 아니라면 사용을 지양하는 것이 좋습니다.
레벨
CSS의 강.약은 사용된 셀렉터에 의해 결정됩니다. 예를 들어 다음 그림과 같은 CSS가 씌어 있을 때
먼저 표시된 스타일이 강하기 때문에 (셀렉터의 레벨이 높음) margin 속성의 값은 '0'이 됩니다.
스타일의 힘은 그 스타일에 사용되고 있는'셀렉터'의 점수로 결정됩니다. 이 점수를 '레벨'이라고 하며 점수가 높은 스타일이 낮은 스타일의 속성을 덮어씁니다.
레벨(Specificity)의 계산
CSS에 사용되는 셀렉터는 약 40 종류로 더 이산 분해하지 못하는 셀렉터로 조합하고 만듭니다. 더 이상 분해하지 못하는 셀렉터를 '단순 셀렉터'라고 하지만 이 단순 셀렉터에는 각각 레벨 점수를 가지고 있습니다. 그리고 사용된 단순 셀렉터의 점수 총점이 그 셀렉터의 '레벨'이 됩니다. 그림에서 셀렉터
'h1.page-title'의 점수가 11점, 'h1'의 점수가 1점이므로 'h1 page-title'에 설정된 스타일이 적용될 수 있다.
단순 셀렉터별 레벨 점수:
| 단순 셀렉터 유형 | 점수 (레벨) | 설명 |
|---|---|---|
전칭 셀렉터 (*) | 0점 | 모든 요소를 선택합니다. |
타입 셀렉터 (div), 의사 요소 (::before) | 1점 | 특정 태그나 요소의 특정 부분을 선택합니다. |
클래스 셀렉터 (.class), 속성 셀렉터 ([type="text"]), 의사 클래스 (:hover) | 10점 | 특정 클래스, 속성 또는 상태를 선택합니다. |
ID 셀렉터 (#id) | 100점 | 고유한 ID를 가진 요소를 선택합니다. |
인라인 스타일 (style="") | 1000점 | HTML 태그 내에 직접 작성된 스타일입니다. |
레벨 점수 계산 예시:
| 셀렉터 | 의미 | 계산식 | 레벨 (합계점) |
|---|---|---|---|
html * | <HTML>의 모든 자식, 자손 요소를 선택 | 1 (html) + 0 (*) | 1 |
h1 | <h1> 태그를 선택 | 1 | 1 |
.container | class="container" 속성이 붙은 태그를 선택 | 10 | 10 |
.nav li | class="nav" 태그 안의 <li> 태그를 선택 | 10 (nav) + 1 (li) | 11 |
p.lead | class="lead"가 붙은 <p> 태그를 선택 | 1 (p) + 10 (lead) | 11 |
#contact | id="contact"가 붙은 태그를 선택 | 100 | 100 |
<p style="..."> | style 속성이 붙은 태그 | 1000 | 1000 |
동일 레벨(Specificity) 스타일 처리
위 예시에서 .lead와 .thick은 모두 클래스 셀렉터로 레벨이 10점입니다. 이 경우, font-weight 속성은 .thick에 나중에 정의된 bold 값이 최종적으로 적용됩니다. 따라서 최종 스타일은 font-size: 16px; font-weight: bold;가 됩니다.
스타일이 적용되지 않을 때는 레벨을 확인
사용되는 셀렉터의 레벨을 최대한 낮춘다.
웹 사이트를 운영하고 있다면 페이지의 콘텐츠를 추가하는 것 뿐 아니라 CSS도 자주 업데이트 하게 됩니다. 운영할 때는 새로운 스타일을 추가하고 이미 있는 스타일을 수정하는 경우가 많기 때문에 관리가 편리한 CSS를 사용하기 위해서는 셀렉터의 레벨을 최대한 낮게하여 덮어쓰기 편리하도록 하는 것이 중요합니다. 그러기 위해서는 레벨이 높은 id 셀렉터나 태그 style 속성을 사용하지 않는 것이 좋습니다. 또는 자손 셀렉터를 사용하는 경우는 셀렉터의 수를 최대한 줄여서 작성합니다. 예를 들면 다음 HTML의 <a>에서 스타일을 적용할 경우 셀렉터는 'support li a' 로도 문제는 없지만 'support a'로도 문제가 없습니다. 그런 경우에는 레벨을 낮추기 위해서 사용하는 단순 셀렉터의 수를 최대한 줄이는 것입니다.
레벨이 낮은 스타일을 먼저 , 레벨이 높은 스타일을 나중에 쓴다.
레벨이 낮은 셀렉터, 예를 들어 타입 셀렉터 등을 사용한 스타일은 일반적으로 페이지 전체의 글자 색상 등을 변경하는 데 사용합니다. 페이지 전체의 디자인을 위한 낮은 레벨의 스타일은 가능한 CSS 파일 앞쪽에 작성합니다. 한편, 페이지 특정 부분에만 적용하는 스타일 (예를 들어 어떤 박스의 배경색을 바꾸거나 레이아웃을 변경하기 위한 스타일)은 일반적으로 레벨이 비교적 높은 등급의 셀렉터나 손자 셀렉터 등을 사용합니다. 그러한 스타일은 CSS 파일의 뒤에 작성합니다.
우선 페이지 전체의 디자인을 대충 가다듬고 세밀한 부분은 조정해 나가면서 작성하면 레벨을 개의치 않고 유지 보수가 뛰어난 CSS를 만들 수 있습니다.
CSS 상속 (Inheritance)
**상속(Inheritance)**은 CSS의 또 다른 중요한 특성으로, 부모 요소에 적용된 일부 스타일 속성들이 자동으로 자식 요소들에게도 적용되는 것을 의미합니다. 이는 코드의 양을 줄이고 일관된 디자인을 유지하는 데 도움을 줍니다.
예를 들어, <body> 태그에 font-family 속성을 지정하면, 특별히 다른 폰트가 지정되지 않은 한 <body> 안의 모든 텍스트 요소(예: p, h1, span)에 해당 폰트가 상속되어 적용됩니다.
주요 상속 속성 예시:
color(글자 색상)font-family(글꼴)font-size(글자 크기)line-height(줄 간격)text-align(텍스트 정렬)list-style(목록 스타일)
상속되지 않는 주요 속성 예시:
모든 속성이 상속되는 것은 아닙니다. 예를 들어, 박스 모델과 관련된 속성(테두리, 여백, 패딩 등)은 일반적으로 상속되지 않습니다.
border(테두리)margin(바깥 여백)padding(안쪽 여백)background-color(배경 색상)width,height(너비, 높이)
상속은 캐스케이드 규칙과 함께 작동합니다. 만약 자식 요소에 직접 적용된 스타일 규칙이 있다면, 그 규칙이 상속된 스타일보다 우선합니다. 즉, 캐스케이드 규칙에 따라 특정성(레벨)이 더 높은 규칙이 우선적으로 적용됩니다.
계승 여부를 판단하는 대략적인 기준
글꼴,텍스트 관계의 속성 (글꼴 패밀리, 글자의 크기, 텍스트의 줄 간격 등)은 계승한다.
배경색이나 배경 그림의 설정은 계승되지 않는다.
박스 모델 관계의 설정은 계승되지 않는다.
그 외의 많은 속성 값은 계승되지 않는다.
![[독후감] AGI, 천사인가 악마인가: 인류에게 주어진 마지막 골든 아워에 대한 성찰](https://blogger.googleusercontent.com/img/a/AVvXsEi2kTs1mAJ7TA6CXouzyvcZzkba7__Rf4PwZVQbDFELV-LKRDcEHHqO_SJ3IBA8Tcxu9PbPvNxXG2Cpzlg7iIKYwaMmLlDIJxZZkDQnLSoRpuIBk_ESHNam6b32slcjKE_5z_D6lndM8FgkoTsAmxmRz2EHPWocVwqMAKQe2t74OHLnQepFueBEjPrsHF9d=w72-h72-p-k-no-nu)
0 댓글