HTML5 & CSS3 배워보자 (7화 : 캐스캐이딩 스타일 시트 우선순위)

스타일 시트는 보통 CSS라고 더 잘 알려져 있습니다. CSS와 스타일 시트는 비슷하지만 약간의 차이가 있습니다. CSS는 '스타일 시트'라는 용어에 '캐스캐이딩(Cascading)'이라는 용어가 추가된 것인데, 그래서 CSS에는 캐스캐이딩이라는 개념이 포함돼 있습니다.. 이 개념이 무엇을 의미하고 어떤 역할을 하는지 알아볼겠습니다.

 

 

 

1.캐스캐이딩(Cascading)의 의미

캐스캐이딩은 CSS에서 스타일을 적용할 때 스타일 규칙들이 서로 다른 출처로부터 올 수 있고, 이 규칙들이 겹쳐서 적용될 때 어떻게 처리될지를 결정하는 방식입니다. 예를 들어, 동일한 요소에 대해 여러 스타일이 적용될 수 있는데, 이때 캐스캐이딩은 이러한 스타일들 중 어떤 것이 우선되는지를 정하는 규칙을 말합니다. 보통 가장 구체적이고 우선순위가 높은 스타일이 적용되지만, 이 역시도 다양한 요인에 따라 달라질 수 있습니다. 즉, 캐스캐이딩은 여러 스타일이 겹칠 때 어떤 스타일이 적용될지를 결정하는 방식을 말합니다.

 

스타일 간의 충돌을 막기 위한 방법에는

 

  ① 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위 결정

  ② 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달

 

이렇게 두가지 원칙이 있습니다. 아래에서 자세하게 다뤄보겠습니다.

 

 

 

2.스타일 우선순위

'스타일 우선순위'는 캐스캐이딩에서 가장 중요합니다. 이때 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말합니다. 그리고 우선순위는 다음에 세가지 개념에 따라 지정됩니다.

 

  ■ 중요도 (Importance) : 스타일이 얼마나 중요한지를 나타내며, 중요도에는 다음과 같은 것들이 있습니다.

    ㉮ User style sheet : 사용자가 직접 정의한 스타일로 가장 높은 중요도를 갖습니다.

사용자 스타일 시트는 특별한 조건이 필요한 사용자가 직접 작성하거나 설정하여 웹 페이지에 적용되는 스타일 시트를 말합니다. 이는 사용자의 개인적인 취향에 따라 웹 페이지의 모양과 느낌을 변경하는 데 사용될 수 있습니다. 예를 들어, 사용자 스타일 시트를 사용하여 글꼴, 글자 크기, 배경색 및 링크 색상 등을 사용자가 원하는 대로 설정할 수 있습니다. 이러한 사용자 지정 스타일은 사용자가 모든 웹 페이지에서 일관된 시각적 경험을 유지하거나 특정 웹 사이트의 디자인을 개선하는 데 도움이 될 수 있습니다.

 

    ㉯ Author style sheet : 웹 페이지의 제작자가 정의한 스타일로 두 번째로 높은 중요도를 갖습니다.

제작자 스타일 시트는 웹 페이지나 애플리케이션의 디자이너 또는 개발자가 작성한 스타일 시트를 가리킵니다. 이 스타일 시트는 해당 웹 페이지나 앱의 디자인, 레이아웃, 색상, 글꼴 등을 결정합니다. 일반적으로 CSS 제작자 스타일 시트는 외부 CSS 파일에 저장되며, HTML 문서의 <link> 요소를 사용하여 해당 문서에 연결됩니다. 이를 통해 여러 웹 페이지나 앱에서 동일한 스타일 시트를 사용할 수 있고, 일관된 디자인을 유지할 수 있습니다.
CSS 제작자 스타일 시트는 웹 페이지의 구조를 나타내는 HTML이나 다른 마크업 언어와 분리되어 있습니다. 이것은 스타일을 쉽게 수정하고 유지보수할 수 있도록 도와줍니다. 또한, CSS의 기능을 활용하여 선택자, 속성, 값 등을 사용하여 원하는 디자인을 정의할 수 있습니다. 이러한 제작자 스타일 시트는 사용자 스타일 시트와 함께 브라우저가 웹 페이지를 렌더링하는 데 사용됩니다. 사용자 스타일 시트는 사용자가 웹 페이지의 스타일을 사용자 지정할 수 있는 반면, 제작자 스타일 시트는 디자이너나 개발자가 웹 페이지의 초기 디자인을 결정하는 데 사용됩니다.

 

    ㉰ Browser default style sheet : 브라우저에서 정의한 기본 스타일로 가장 낮은 중요도를 갖습니다.

브라우저 기본 스타일 시트는 브라우저가 웹 페이지를 표시하는 데 사용하는 내부 스타일 시트입니다. 이 스타일 시트는 브라우저가 웹 페이지를 렌더링할 때 기본적인 스타일을 적용하는 데 중요한 역할을 합니다.
브라우저 기본 스타일 시트에는 HTML 요소의 기본 스타일이 포함되어 있습니다. 이러한 스타일은 웹 페이지의 요소를 브라우저 창에 렌더링하는 데 필요한 레이아웃, 텍스트 스타일, 링크 스타일, 테이블 스타일 등을 정의합니다.
이 스타일 시트는 사용자가 별도로 정의하지 않아도 브라우저가 제공하는 기본 스타일을 사용하여 웹 페이지를 렌더링할 수 있도록 합니다. 또한, 개발자가 사용자 정의 스타일을 추가할 때 브라우저 기본 스타일과 상호 작용하며, 이를 통해 일관된 사용자 경험을 제공합니다. 이러한 기본 스타일 시트는 각 브라우저마다 약간의 차이가 있을 수 있으며, 이를 통해 브라우저 간의 일관성을 유지하면서도 플랫폼에 따라 적절한 스타일을 적용할 수 있습니다.

  ■ 명시도 (Specificity) : 스타일 선택자가 얼마나 구체적인지를 나타내며, 명시도가 높은 스타일이 더 우선됩니다. 명시도는 선택자에 사용된 요소의 개수와 유형에 따라 결정됩니다. 일반적으로 인라인, ID 선택자가 가장 높은 명시도를 갖고, 클래스 선택자가 다음이며, 태그 선택자가 가장 낮은 명시도를 갖습니다.

 

    ㉮ 인라인 스타일 - 태그안에 Style 속성을 사용해 해당 태그에만 스타일을 적용

    ㉯ id 스타일 - 지정한 부분에만 적용되는 스타일이지만 한 문서 안에 한번만 적용할 수 있음. #기호를 붙여 표시

    ㉰ 클래스 스타일 - 지정한 부분에만 적용되는 스타일로 한 문서에서 여러번 적용 가능. 마침표(.)를 붙여 표시

    ㉱ 태그 스타일 - 특정 태그에 똑같이 적용되는 스타일. 예를 들어 p 선택자를 사용한 스타일이면 다 같은 스타일 적용

    
  ■ 선언 순서 (Declaration Order) : 스타일이 선언된 순서에 따라 뒤에 선언된 스타일이 우선됩니다. 즉, 나중에 선언된 스타일이 더 우선순위가 높습니다.

 

 

 

3.스타일 상속

'스타일 상속'은 한 요소의 스타일이 다른 요소에도 영향을 미치는 것을 의미합니다. 부모 요소에 적용된 스타일이 자식 요소에게도 적용되며, HTML 요소들이 부모-자식 관계를 가질 때 중요합니다.

예를 들어, <div> 요소 안에 <p> 요소가 있으면, <div>에 적용된 스타일이 <p>에도 적용될 수 있습니다. 부모 요소에 스타일을 적용하면 자식 요소들이 그 스타일을 상속받아 그대로 사용할 수 있게 되는 구조입니다. 이건 코드를 간결하게 만들어주고, 유지보수를 쉽게 해줍니다. 하지만 모든 스타일이 상속되는 건 아니며, 몇몇 속성들은 상속되지 않습니다. 예를 들면 배경 이미지나 너비 같은 것들이 상속되지 않습니다.

CSS의 상속 개념을 이해하면 스타일을 효율적으로 관리하고 요소들 간에 일관성을 유지할 수 있습니다. 이는 코드를 작성하고 유지보수하는 데 큰 도움이 됩니다.

 

 

※ 다음화에서는 "CSS3 폰트 관련 스타일"에 대해서 공부하겠습니다!!

https://zzangdis.tistory.com/39

HTML5 & CSS3 배워보자 (8화 : 폰트 관련 스타일)