【CSS】 상속의 의미 ⋆ Our Small Joy

CSS에서 상속이란

CSS는 Cascading Style Sheet의 줄임말입니다. 여기서 Cascading의 뜻은 상위 요소에서 하위 요소로 스타일이 내려가는 것을 의미하는데, 상속의 개념으로 이해하면 되겠습니다. CSS 프로퍼티들마다 상속이 가능한 것도 있고 불가능한 것들도 있는데, 이것이 어떤 의미인지 알아보겠습니다.

[1] 상속 가능

상속 가능하다는 의미는, 특정 요소에 (상속 가능한) CSS 프로퍼티를 설정했을 때, 그 프로퍼티가 자식 요소들에게도 자동으로 설정된다는 뜻입니다. 상속 가능한 대표적인 프로퍼티인 color를 예로 들어 상속 가능하다는 것이 무엇인지 알아보겠습니다. 참고로 color는 글자색을 지정할 때 사용하는 프로퍼티입니다.

<style>
    .wrapper {
        margin: 0 auto;
        max-width: 1180px;
    }
    .parent {
        color: red;
    }
</style>
<div class=“wrapper”>
    <div class=“parent”>
        부모 요소 – 빨간색
        <div class=“first”>
            1세대 자식 요소 – 빨간색
            <div class=“second”>2세대 자식 요소 – 빨간색</div>
        </div>
    </div>
</div>

부모 요소 – 빨간색

1세대 자식 요소 – 빨간색

2세대 자식 요소 – 빨간색

목표
- 상속의 개념을 color 프로퍼티를 이용하여 이해해 보겠습니다.
코드 분석
- HTML 파트
  - 먼저 코드 아래에 위치한 HTML 파트를 먼저 보겠습니다.
  - ■ <div class=”wrapper”></div> 먼저 래퍼(div.wrapper) 요소를 생성하고, 그 안에 작성하고자 하는 HTML을 넣습니다. 래퍼를 이용하게 되면, 복잡한 코드에서 요소들을 정렬할 때 편리해집니다. 해당 내용은 [CSS] Wrapper 포스트에서 자세히 다룹니다.
  - ■ <div class=”parent”>부모 요소 – 빨간색<div class=”parent”> 래퍼 요소 아래 div.parent 요소를 생성하고, 안에 “부모 요소 – 빨간색”이라는 글자를 넣습니다. CSS 파트에서 글자색을 빨간색으로 지정할 예정입니다.
  - ■ <div class=”first”> 1세대 자식 요소 – 빨간색 </div> div.parent 요소 안에 div.first 요소를 생성하고, 안에 “1세대 자식 요소 – 빨간색”이라는 글자를 넣습니다. 나중에 결과에서 확인하겠지만, 부모 요소(div.parent)로부터 글자색을 상속 받아 빨간색이 됩니다.
  - ■ <div class=”second”> 2세대 자식 요소 – 빨간색 </div> div.first 요소 안에 div.second 요소를 생성하고, 안에 “2세대 자식 요소 – 빨간색”이라는 글자를 넣습니다. 나중에 결과에서 확인하겠지만, 부모 요소(div.first)로부터 글자색을 상속 받아 빨간색이 됩니다.
- CSS 파트
  - .wrapper의 CSS
    - ■ margin: 0 auto; 래퍼 요소를 가로 가운데 정렬을 합니다. auto의 의미는 좌/우 여백의 크기를 같게 하라는 것으로 결론적으로 가운데 정렬을 하게 됩니다.
    - ■ max-width: 1180px; 최대로 커질 수 있는 너비(width)를 1180px로 지정합니다. 큰 모니터나 큰 디바이스에서 결과를 출력할 때, 너비가 너무 넓어지면 글자가 옆으로 길게 나열되면서 가독성이 떨어지게 됩니다. 이런 상황을 방지하기 위해 래퍼요소의 최대 너비를 1180px로 지정해 주었습니다. 래퍼에 지정하는 다른 프로퍼티가 궁금하신 분들은 [CSS] Wrapper 포스트를 읽어주시기 바랍니다.
  - .parent의 CSS
    - ■ color: red; div.parent 요소의 글자색을 빨간색으로 지정합니다.
출력 결과
- 결과를 보시면 모든 글자 색깔이 빨간색임을 확인할 수 있습니다. div.parent 요소에만 글자색을 빨간색으로 지정하였기 때문에, 만약 상속이 불가능하다면, 1세대 자식요소와 2세대 자식요소들은 기본 글자색인 검정색이 나와야 할 것입니다. 하지만 1세대 자식 요소(div.first)는 부모 요소(div.parent)로부터 글자 색깔을 상속 받고, 2세대 자식 요소(div.second)도 부모 요소(div.first)로부터 글자 색깔을 상속 받아서 모두 빨간색이 됩니다.

[2] 상속 불가능

상속 불가능하다는 의미는, 특정 요소에 (상속 불가능한) CSS 프로퍼티를 지정했을 때, 그 요소에게만 적용되고 자식 요소들에게는 적용되지 않는 것을 뜻합니다. 상속 불가능한 대표적인 프로퍼티인 margin-left를 예를 들어 상속 불가능의 의미를 알아보겠습니다. 참고로, margin-left는 왼쪽 여백의 크기를 정할 때 사용합니다.

<style>
    .wrapper {
        margin: 0 auto;
        max-width: 1180px;
        border: 1px solid black;
    }
    .wrapper div {
        border: 2px solid lightblue;
        background-color: beige;
    }
    .parent {
        margin-left: 50px;
    }
</style>
<div class=“wrapper”>
    <div class=“parent”>부모 요소
        <div class=“first”>1세대 자식 요소
            <div class=“second”>2세대 자식 요소</div>
        </div>
    </div>
</div>

부모 요소

1세대 자식 요소

2세대 자식 요소

목표
- 상속 불가능의 의미를 margin-left 프로퍼티를 이용하여 이해해 보겠습니다.
코드 분석
- HTML 파트
  - 먼저 코드 아래에 위치한 HTML 파트를 먼저 보겠습니다.
  - ■ <div class=”wrapper”></div> 먼저 래퍼(div.wrapper) 요소를 생성하고, 그 안에 작성하고자 하는 HTML을 넣습니다. 이렇게 하면 복잡한 코드에서 요소들을 정렬할 때 편리해집니다. 해당 내용은 [CSS] Wrapper 포스트에서 자세히 다룹니다.
  - ■ <div class=”parent”> 부모 요소 </div> 래퍼 요소 아래 div.parent 요소를 생성하고, 안에 “부모 요소”이라는 글자를 넣습니다. CSS 파트에서 margin-left를 50px로 지정할 예정입니다.
  - ■ <div class=”first”> 1세대 자식 요소 </div> div.parent 요소 안에 div.first 요소를 생성하고, 안에 “1세대 자식 요소”이라는 글자를 넣습니다. 부모 요소(div.parent)로 부터 margin-left를 상속 받아지는지 확인할 예정입니다.
  - ■ <div class=”second”> 2세대 자식 요소 </div> div.first 요소 안에 div.second 요소를 생성하고, 안에 “2세대 자식 요소”이라는 글자를 넣습니다. 부모 요소(div.first)로 부터 margin-left를 상속 받아지는지 확인할 예정입니다.
- CSS 파트
  - .wrapper의 CSS
    - ■ margin: 0 auto; 래퍼 요소를 가로 가운데 정렬을 합니다. auto의 의미는 좌/우 여백의 크기를 같게 하라는 것으로 결론적으로 가운데 정렬을 하게 됩니다.
    - ■ max-width: 1180px; 최대로 커질 수 있는 너비(width)를 1180px로 지정합니다. 큰 모니터나 큰 디바이스에서 결과를 출력할 때, 너비가 너무 넓어지면 글자가 옆으로 길게 나열되면서 가독성이 떨어지게 됩니다. 이런 상황을 방지하기 위해 래퍼요소의 최대 너비를 1180px로 지정해 주었습니다. 래퍼에 지정하는 다른 프로퍼티가 궁금하신 분들은 [CSS] Wrapper 포스트를 읽어주시기 바랍니다.
    - ■ border: 1px solid black; div.wrapper의 테두리선을 1px 두께의 검정색으로 지정합니다. 아래에서 div.first 요소의 margin-left를 50px로 지정할 예정인데, 왼쪽 여백을 조금 더 가시화 하기 위해 테두리선을 지정하였습니다.
  - .wrapper div의 CSS
    - 후손 선택자(빈칸)를 사용하여 div.wrapper 안에 들어간 모든 div의 스타일을 설정합니다.
    - ■ border: 2px solid lightblue; 모든 div의 테두리선은 2px 두께의 하늘색 실선으로 설정합니다.
    - ■ background: beige; 모든 div의 배경색을 베이지로 설정합니다.
  - .parent의 CSS
    - ■ margin-left: 50px; div.first 요소의 왼쪽 여백을 50px로 설정합니다.
출력 결과
- div.parent의 왼쪽 여백(margin-left)이 50px로 설정되었음을 확인할 수 있습니다. 하지만 margin-left는 상속되지 않는 프로퍼티이기 때문에, 그 자식 요소인 div.first의 왼쪽 여백은 기본값 0으로 설정되어집니다. 그리고 div.second 또한 기본값 0으로 설정되어, 왼쪽여백이 없음을 볼 수 있습니다. 상속 불가능이란 의미는 이렇게 해당 요소에만 프로퍼티가 지정되고, 자식 요소로는 전달되지 않는 것을 의미합니다.
- 　그리고 혹시나, 아래 그림처럼, 1세대 자식 요소(div.first)와 2세대 자식 요소(div.second)의 주위에 아주 자그만한 여백이 발견(빨간색 화살표)들어가 있는 것이 보일 수도 있습니다. 분명 div.first와 div.second에 해당 방향으로 여백을 주지 않았기 때문에, 0px로 설정되어야 하는데 말이죠. 이런 현상이 발생한다면, 이것은 CSS의 sub-pixel redering 버그입니다. 브라우저가 아주 작은 픽셀(~1px)를 처리할 때, 완벽하게 처리하지 못해서 생기는 버그입니다. 관련 내용과 해결 방법은 [CSS] Sub Pixel Rendering Bug 포스트를 참조해 주시기 바랍니다.