CSS(스타일 시트, Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 결정하는 데 중요한 역할을 합니다. 이 중에서도 “상속”은 스타일 속성이 부모 요소에서 자식 요소로 전달되는 메커니즘을 의미합니다. 오늘은 가볍게 여길수 있는 CSS 상속에 대한 고찰로 CSS 상속과 관련된 이야기를 해보고자 합니다.
1. CSS 상속이란?
CSS 상속은 부모 요소에 적용된 스타일 속성이 자식 요소에게도 자동으로 적용되는 메커니즘입니다. 이로써 개발자는 각 요소에 일일이 스타일을 적용하지 않아도 되며, 일관성 있는 디자인을 쉽게 적용할 수 있도록 해줍니다.
가령 body 요소에 글자색을 지정하면 하위의 모든 요소들의 글자색이 상속되어 같이 지정이 됩니다.
이러한 상속의 속성이 폭포의 떨어지는 모양과 같다고 하여 Cascading(캐스케이딩) 즉, 폭포 위에서 아래로 쏟아지는 이라는 뜻을 가짐니다. 이는 상속이라는 개념이 CSS 핵심이기도 합니다.
2. CSS 속성에서의 상속
상속이 CSS의 핵심 메카니즘이기는 하지만 모든 CSS 속성이 상속이 되지는 않습니다.
주로 글자와 관련된 속성들은 상속이 되고 레이아웃 관련 속성들은 상속이 되지않습니다.
상속이 되는 CSS 속성
글자관련 속성
- font-family
- font-size
- color
- line-height
- text-align
배경 관련 속성
- background-color
- background-image
- background-repeat
- background-size
- background-position
리스트 관련 속성
- list-style-type
- list-style-position
- list-style-image
공간 및 레이아웃 관련 속성
- margin
- padding
- text-indent
테두리 관련 속성
- border 속성의 일부 값들도 상속될 수 있습니다.
텍스트 관련 속성
- text-transform
- text-shadow
출력 관련 속성
- page-break-before
- page-break-after
- page-break-inside
커서 속성
- cursor
리스트 관련 속성
- list-style
상속이 되지 않는 CSS 속성
레이아웃과 위치
- width
- height
- margin
- padding
- border
- position
- display
- float
- clear
- top
- right
- bottom
- left
- z-index
시각적 효과와 변형
- background
- transform
- opacity
- box-sizing
- list-style
- cursor
- visibility
텍스트와 레이아웃 조절
- overflow
- vertical-align
- table-layout
인쇄와 페이지 설정
- page-break
3. 요소의 특성으로 상속 여부가 다른 경우
위에서 언급한 것과 같이 상속은 기본적으로 CSS 속성에 따라 결정됩니다.
다만 예외의 요소들이 있습니다. 상속이 되는 특정 CSS 상속이라 할지라도 요소의 특성으로 상속이 되지 않거나 또는 반대의 경우도 있을수 있습니다. 다음은 특수성을 가지는 요소 예시입니다.
상속을 받는 태그:
<em>태그와<strong>태그: 텍스트 강조 요소인<em>과<strong>은 부모 요소의 스타일을 상속합니다.<span>태그: 대부분의 스타일 속성들을 부모 요소에서 상속받을 수 있습니다.
상속을 받지 않는 태그
<img>태그: 이미지의 크기 관련 속성인width와height는 부모 요소에서 상속되지 않습니다.<input>태그:border,padding,margin등의 속성은 부모 요소에서 상속되지 않습니다.<button>태그: 대부분의 스타일 속성들이 부모 요소에서 상속되지 않습니다.<iframe>태그: 내부 콘텐츠와 관련된 스타일 속성들이 상속되지 않을 수 있습니다.
이러한 예외적인 상황을 고려하여 스타일을 적용할 때에는 각 요소의 특성을 확인하고 필요한 스타일을 직접 설정해야 합니다.
4. 상속을 올바르게 활용하는 방법
적절한 상속을 위해서는 상속되는 속성과 그렇지 않은 속성을 구분하여 스타일을 설계해야 합니다. 상속이 필요한 속성에 집중하여 효율적으로 스타일링하고, 상속되지 않는 속성은 개별적으로 설정합니다.
모든 태그들의 특수성을 외우고 있다는 것은 쉽지가 않습니다.
물론 경험이 많아지면 자연스레 특수성있는 속성과 요소에 대해 잘 대처하게 되지만 크로스브라우징과 특정 환경에서 모양이 다르게 보이게 된다면 그 원인이 브라우저 탓인지 속성의 상속여부 탓인지 아니면 요소의 특수성인지는 쉽게 알아보기가 힘들기 때문입니다.
이에 크로스브라우징에 민감하게 광범위하게 적용하는 프로젝트에는 다음과 같은 것을 지켜 스타일링 합니다.
스타일 리셋
크로스 브라우징 설계의 핵심은 스타일 리셋입니다. 보통 기본값이 브라우저마다 다른 경우에 초기화를 목적으로 설정해 주는것을 리셋이라고 하는데요. 이 항목에 상속의 여부를 설정하는 것입니다.
흔히 접합수 있는 속성으로 예를 들면 a 요소에서의 color 속성은 상속을 받지 않습니다. 상속여부를 변경하려면 값에 inherit을 주면 됩니다.
a {
color: inherit; /* 부모로 부터 상속을 받는 경우 */
color: initial; /* 컬러속성의 초기값으로 상속을 결정하고자 하는 경우 */
}
참고로 상속을 받지 않는 값은 뭐로 하냐고 묻는 분들이 있는데 받지 않는다는 값은 따로 없습니다. 그냥 해당 값을 주면 됩니다… color:red
명시적인 스타일링
명시적인 스타일링이란 속성에 의한 CSS 속성이 중복 적용이 되는 경우가 많은데 이 경우 다른 속성보다 우선순위를 높게 주는 것을 뜻합니다. 비슷한 용어로 구체성, 명시도등이 있습니다.
명시적인 스타일링은 브라우저와 플랫폼등의 여러환경이 다른경우에도 영향력이 크므로 평시 구체성을 고려한 스타일링이 있어야 하겠습니다. 구체성에 관련된 포스팅은 본 블로그에도 올라올 예정이니 자세한 설명이 필요하신 분은 검색을 한번 해주세요~
5. 상속과 우선순위
CSS에서 상속된 스타일의 우선순위는 다음과 같은 순서로 결정됩니다:
- 인라인 스타일 (Inline Styles): HTML 요소의
style속성을 통해 직접 지정된 인라인 스타일은 최우선적으로 적용됩니다. 이 스타일은 다른 모든 스타일을 덮어씁니다. - 아이디 선택자 (ID Selectors): 아이디 선택자로 지정된 스타일이 인라인 스타일을 덮어씁니다. ID 선택자의 구체성이 매우 높기 때문에 다른 선택자들보다 우선합니다.
- 클래스 및 속성 선택자 (Class & Attribute Selectors): 클래스 선택자나 속성 선택자에 의해 지정된 스타일은 아이디 선택자를 제외한 다른 선택자보다 우선합니다.
- 태그 선택자 (Tag Selectors): 일반적인 태그 선택자로 지정된 스타일은 클래스와 속성 선택자를 제외한 다른 선택자보다 우선합니다.
- 전체 선택자 (Universal Selector):
*기호를 사용한 전체 선택자의 스타일은 일반적인 태그 선택자보다 우선합니다. - 상속 스타일 (Inherited Styles): 부모 요소에서 상속된 스타일은 선택자에 의한 스타일링보다 우선 순위가 낮습니다.
- 기본 스타일 (Default Styles): 브라우저에서 제공하는 기본 스타일은 선택자나 상속된 스타일보다 우선순위가 낮습니다.
이러한 스타일 우선순위 규칙을 이해하면 스타일이 어떻게 결정되는지 이해하고, 원하는 스타일을 올바르게 적용할 수 있습니다.
6. 최신 CSS 트렌드와 상속의 관계
최신 CSS 트렌드와 상속의 관계는 다양한 방면에서 영향을 미치고 있습니다. 아래는 최신 CSS 트렌드와 상속의 관계에 대한 몇 가지 예시입니다:
- CSS-in-JS와 Atomic CSS
최근에는 CSS-in-JS와 Atomic CSS와 같은 접근 방식이 트렌드로 부각되고 있습니다. 이들 접근 방식은 컴포넌트 스타일을 자체적으로 캡슐화하고 컴포넌트 간 스타일 충돌을 방지함으로써 상속에 의한 스타일 오염을 줄일 수 있습니다. - CSS Custom Properties (Variables)
CSS Custom Properties(변수)는 최신 CSS 기능 중 하나로, 변수를 사용하여 동적으로 스타일을 조작할 수 있습니다. 이를 활용하면 부모 요소에서 정의한 변수를 자식 요소에서 상속받아 사용할 수 있습니다. - CSS Grid와 Flexbox
CSS Grid와 Flexbox는 레이아웃을 구축하는데 널리 사용되는 트렌드입니다. 이들 레이아웃 모델은 부모-자식 관계에서 스타일을 상속하지 않고도 레이아웃을 정의하고 배치할 수 있는 강력한 기능을 제공합니다. - Dark Mode 스타일링
다크 모드 트렌드에 따라 다양한 웹사이트와 앱이 어두운 테마를 제공하고 있습니다. 이때 상속을 활용하여 기존 스타일을 어두운 테마에 맞게 조정하거나 재사용할 수 있습니다. - 모션과 애니메이션
모션 및 애니메이션은 사용자 경험을 향상시키는 중요한 요소로, 상속을 이용하여 움직임과 변화를 일관성 있게 적용할 수 있습니다.
이러한 최신 CSS 트렌드들은 상속을 이용하여 일관성 있는 디자인을 유지하고 코드를 효율적으로 관리하는데 도움을 줄 수 있습니다. 하지만 새로운 기술이나 패턴을 적용할 때에는 기존 스타일의 상속 여부를 고려하여 적절한 조치를 취하는 것이 중요합니다.
7. SEO 측면에서의 상속의 중요성
SEO(Search Engine Optimization) 측면에서의 상속은 웹 페이지의 구조와 콘텐츠를 검색 엔진에서 올바르게 인식하고 색인하는데 중요한 역할을 합니다. 아래는 SEO 관점에서의 상속의 중요성에 대한 몇 가지 포인트입니다:
- 일관된 구조
상속을 통해 웹 페이지의 구조가 일관성 있게 유지되면 검색 엔진은 페이지의 중요한 부분을 더 쉽게 파악할 수 있습니다. 일관된 구조는 웹 페이지의 가독성과 사용자 경험을 향상시키며, 검색 엔진 봇이 페이지를 크롤링하고 인덱싱하는 데 도움을 줍니다. - 키워드의 의미전달
부모 요소에서 자식 요소로 상속되는 텍스트 콘텐츠는 해당 페이지의 주요 키워드와 관련된 의미를 더 명확하게 전달할 수 있습니다. 이는 검색 엔진이 페이지의 내용을 이해하고 적절한 검색 결과에 나타내는 데 도움을 줍니다. - 링크 및 앵커 텍스트
링크 및 앵커 텍스트 역시 상속을 통해 페이지 간의 연결성을 구축할 수 있습니다. 적절한 링크와 앵커 텍스트를 사용하면 검색 엔진은 페이지의 내용과 관련된 다른 페이지들을 더 잘 이해하고 색인화할 수 있습니다. - 메타 데이터 상속
부모 페이지의 메타 데이터가 자식 페이지로 상속되면, 자식 페이지의 메타 데이터가 부모 페이지와 일치하게 됩니다. 이는 검색 결과에서 표시되는 제목과 설명 등이 일관성 있게 나타나도록 도와줍니다. - 콘텐츠 구조 분석
상속을 통해 페이지의 콘텐츠가 구조적으로 잘 나누어져 있으면 검색 엔진은 페이지의 섹션과 내용을 구분하여 분석할 수 있습니다. 이는 검색 결과에서 특정 부분의 콘텐츠가 강조되어 표시될 수 있는 기회를 제공합니다. - 모바일 최적화
모바일 퍼스트 인덱싱에서는 모바일 페이지의 구조와 콘텐츠가 더욱 중요해집니다. 상속을 이용하여 모바일 페이지에서도 일관된 구조와 콘텐츠를 제공하면 검색 엔진에서 모바일 페이지를 올바르게 평가하고 색인화할 수 있습니다.
이처럼 상속을 활용하여 웹 페이지의 구조, 콘텐츠, 링크 등을 일관성 있게 관리하면 SEO 측면에서 페이지의 가시성과 검색 결과에 나타날 확률을 향상시킬 수 있습니다.
8. CSS 상속으로 보는 프레임워크(React, Vue)
자바스크립트 프레임워크의 대표라 할 수 있는 React와 Vue를 들수 있습니다.
이러한 프레임워크 기반 개발을 하는 경우 CSS 상속 관리가 많이 달라지게 됩니다. 앞서 말한 것과 같이 CSS 상속을 최적화 할 때 많은 이점이 있는데 프레임워크를 사용하는 경우 CSS 상속에는 상당히 부적합한 생태계가 되기 때문인데요.
프레임워크를 사용하면 여러가지 장점이 많습니다. 이에 비해 CSS 상속 설계에 있는 어떤 단점이 있는지 알아보겠습니다.
React의 단점
- 스타일 충돌: React에서 컴포넌트 간 스타일을 상속하려면 상위 컴포넌트의 스타일이 하위 컴포넌트로 전달되어야 합니다. 이런 상황에서 스타일 충돌이 발생할 수 있으며, 예상치 못한 스타일 변경이 일어날 수 있습니다.
- 유지보수의 어려움: React의 컴포넌트 기반 구조에서 스타일을 관리하다 보면, 컴포넌트 수가 많아지면서 스타일의 관리가 복잡해질 수 있습니다. 특히 다수의 컴포넌트에서 스타일을 상속받고 조작하는 것은 유지보수를 어렵게 만들 수 있습니다.
- 오버라이딩 어려움: React에서 스타일을 상속하면 부모 컴포넌트에서 정의한 스타일을 자식 컴포넌트에서 오버라이딩하기 어려울 수 있습니다. 특정 컴포넌트에서 일부 스타일만 변경하고 싶을 때 복잡한 스타일 조작이 필요할 수 있습니다.
- 네스트된 스타일: React에서 중첩된 컴포넌트의 스타일을 상속하려면 각각의 컴포넌트에서 스타일을 전달하거나 관리해야 합니다. 이로 인해 컴포넌트 간의 의존성이 증가하고, 복잡한 스타일 구조가 형성될 수 있습니다.
- 적용 우선순위 제어 어려움: React에서 스타일을 상속하면 스타일 적용 우선순위를 제어하기 어려울 수 있습니다. 특히 미디어 쿼리나 다양한 상황에 따라 스타일을 동적으로 조작하는 경우에 제어가 복잡해질 수 있습니다.
이러한 단점들을 고려하여 React에서 CSS 상속을 활용할 때에는 스타일 관리의 복잡성과 충돌 가능성을 주의깊게 고려하고, 필요한 경우 별도의 스타일 관리 방식을 도입하여 이러한 문제를 완화할 수 있습니다.
Vue의 단점
Vue.js에서 CSS 상속을 활용하는데 있어 발생할 수 있는 단점은 다음과 같습니다:
- 컴포넌트 구조의 복잡성: Vue.js의 컴포넌트 기반 구조는 재사용성과 모듈화를 높이는 장점이 있지만, 복잡한 컴포넌트 계층 구조에서 CSS 상속을 관리하기 어려울 수 있습니다. 특히 중첩된 컴포넌트에서 스타일을 상속하고 조작하는 것은 복잡성을 증가시킬 수 있습니다.
- 스타일 충돌과 우선순위: Vue.js에서 컴포넌트 간 스타일을 상속하려면 상위 컴포넌트에서 정의한 스타일을 하위 컴포넌트로 전달해야 합니다. 이로 인해 스타일 충돌이 발생할 수 있으며, 스타일 우선순위를 조절하기 어려울 수 있습니다.
- Scoped 스타일의 한계: Vue.js에서 제공하는 Scoped 스타일은 각 컴포넌트의 스타일을 지역적으로 유지할 수 있게 해줍니다. 하지만 이로 인해 부모 컴포넌트에서 정의한 스타일을 자식 컴포넌트에서 상속하거나 오버라이딩하기 어려울 수 있습니다.
- 선택자의 제한: Vue.js의 Scoped 스타일은 컴포넌트 내부에서만 작동하므로 외부에서 컴포넌트의 스타일을 선택적으로 조작하기 어렵습니다. 따라서 특정 컴포넌트의 스타일을 동적으로 변경하거나 조작하기가 제한적일 수 있습니다.
- 동적 스타일링의 어려움: Vue.js에서 동적으로 스타일을 변경하려면 다양한 방법과 디렉티브를 사용해야 합니다. 이로 인해 동적 스타일링을 구현하는데 있어서 어려움을 겪을 수 있습니다.
이러한 단점들을 고려하여 Vue.js에서 CSS 상속을 활용하는 경우, 컴포넌트 구조와 스타일 관리의 복잡성을 최소화하기 위해 명확한 스타일 가이드와 패턴을 정의하고 관리하는 것이 중요합니다.
기존의 마크업을 형태를 변형하여 컴포넌트를 사용하는 React가 좀더 CSS 상속에 있어 부적절한 관계를 만들고 있는거 같습니다.
FAQs
Q1: 모든 CSS 속성이 상속될까요?
아니요, 모든 CSS 속성이 상속되는 것은 아닙니다. 텍스트와 관련된 속성 및 몇 가지 레이아웃 속성만이 상속됩니다.
Q2: 상속이 겹치면 어떻게 동작하나요?
두 개 이상의 부모 요소에서 동일한 속성이 상속된 경우, 가장 가까운 부모 요소의 값이 우선적으로 적용됩니다.
Q3: 모바일 환경에서 상속을 고려해야 하나요?
네, 모바일 환경에서도 상속은 중요합니다. 그러나 화면 크기와 터치 인터페이스를 고려하여 적절히 조정해야 합니다.
Q4: CSS 프레임워크를 사용하는 것이 좋을까요?
CSS 프레임워크는 일관성 있는 디자인을 위해 유용합니다. 그러나 프로젝트의 특성에 따라 적절하게 선택해야 합니다.
Q5: 상속을 과도하게 사용하면 어떤 문제가 발생할 수 있나요?
과도한 상속 사용은 예상치 못한 스타일 충돌을 초래할 수 있습니다. 따라서 상속을 사용할 때는 주의가 필요합니다.