[CSS] CSS의 상속(Inheritance)

19922 단어 상속revertunsetinitialInheritall: unset;

1. CSS의 상속(Inheritance)

CSS에서의 상속이란, 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻한다.

2. 상속되는 CSS 속성

  • quotes // 인용문의 큰따옴표를 꾸미는 속성
  • text-align
  • text-indent
  • text-transform
  • visibility
  • white-space //요소가 공백 문자를 처리하는 법을 지정하는 속성
  • word-spacing
  • azimuth // 수평전 공간의 각도를 설정하는 속성
  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • elevation // 텍스트 방향을 지정
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant // 소문자를 소문자 크기의 대문자로 변경하는 속성
  • font-weight
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans // 이전 페이지 에서 분할된 단락의 최소 줄 수 설정하는 속성
  • widows // 페이지 상단에 혼자 나타나는 단락의 마지막 줄

aural 관련 속성

  • pitch-range // 평균 pitch(주파수)의 변화를 지정하는 속성
  • pitch // 말하는 음성 평균의 pitch (주파수)를 지정할 수 있는 속성
  • richness
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speak
  • speech-rate
  • stress
  • voice-family
  • volume

2. 상속되지않는 CSS 속성

위의 리스트를 보면 폰트와 관련된 속성은 대부분 상속되는 것을 알 수 있다. 그러나 모든 속성이 상속되는 것은 아니며, 예를들면 width, margin과 같은 너비를 설정하는 속성은 상속되지 않는다.

(부모의 너비가 모든 자식 엘리먼트에 상속되는 것을 상상하면 레이아웃이 엉망이 될 것이다.)

<a> 태그도 역시 부모태그의 상속을 받지 않는데, 아래 예시에서 <h1>의 color 를 orange로 설정해 자식태그인 <p>태그는 그대로 폰트컬러를 상속 받지만 <a> 태그는 상속받지 않는 것을 알 수 있다.

 
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    h1 {
      color : orange
    }
  </style>
</head>
<body>
  <h1>
    <p>쓴 맛을 느끼는 미각은 유전된다.</p>
    <a href="#">인생의 쓴맛도 유전일까?</a>
  </h1>
</body>
</html>

3. 상속 제어하기

user agent stylesheet에서 디폴트로 설정된 <a>를 그대로 쓰는 경우는 거의 없다. 대부분의 경우 다른 태그와 마찬가지로<a> 태그도 스타일링된다. 이 때 <a>는 css에서 제공하는 특수 범용 속성 값을 이용해 이미 부모태그에서 선언된 규칙을 그대로 상속받을수 있다.

  • inherit

    선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정한다.

  • initial

    선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정한다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 inherit 되도록 설정된다.

  • unset

    속성을 natural 값으로 재설정한다. 즉, 속성이 자연적으로 상속되면 inherit 된 것처럼 작동하고 그렇지 않으면 initial 처럼 작동합니다.

  • revert

    revert 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터 style origin (en-US) 으로 되돌린다. 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것이다. 이 속성은 css 단축 속성all을 포함한 어떤 속성에도 적용할 수 있다.

<a>태그 역시 부모 요소의 속성을 강제로 상속받게 하는 키워드 inherit을 사용해 부모 요소에게 선언된 속성을 가지고 올 수 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    h1 {
      color : orange
    }
    a {
      color : inherit;

    }
  </style>
</head>
<body>
  <h1>
    <p>쓴 맛을 느끼는 미각은 유전된다.</p>
    <a href="#">인생의 쓴맛도 유전일까?</a>
  </h1>
</body>
</html>

4. all: unset;

unset 키워드는 속성이 선언되어있지 않는 이상 해당 속성을 initial 상태로 만든다. 그래서 이 키워드를 이용해 이미 정의된 user agent stylesheet가 있는 태그를 리셋시키는 역할을 한다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    button {
      all:unset;
    }
  </style>
</head>
<body>
  <button>Button</button>
</body>
</html>

이렇게 all: unset; 을 사용하여 버튼을 reset 상태로 만들 수 있다.

5. Revert vs unset

revert 와 unset 은 비슷하지만 user agent style로 돌아가느냐 혹은 유저가 지정한 스타일로 돌아가느냐에 따라 그 속성을 달리한다.

unset은 부모 요소로부터 상속할 값이 존재하면 상속값을 적용 (inherit)하고, 부모 요소로부터 상속할 값이 존재하지 않는다면 초기 값을 적용 (initial) 하는 속성을 가진다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    h1 {
      font-weight : normal;
      color : green;
    }
    .revert {
      all : revert;
    }
    .unset {
      all : unset;
    }
  </style>
</head>
<body>
  
  <h1 class="revert">revert</h1>
  <h1 class="unset">unset</h1>
 </body>
</html>

결과는 위와같다. revert는 user agent style에서 적용된 디폴트 상태로 돌아가며, unset은 natural 값으로 재설정된다.

[210318][백준/BOJ] 5397번 키로거
[ TIL ] Generics

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage