CSS

상속

상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미합니다. 상속은 CSS에서 생산성을 높이기 위한 중요한 기능입니다. 이번 수업에서는 상속이란 무엇인가를 알아봅니다. 

상속이란

아래와 같은 코드가 있다고 가정해보겠습니다. 

<div id="container">
  <h1>수업순서</h1>
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
  </ul>
  <h1>수업참가자</h1>
  <ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>
</div>

그 결과는 아래와 같습니다. 

만약 위에서 서체의 색상을 지정해야 한다면 어떻게 하면 될까요? 모든 엘리먼트의 색상을 하나 하나 지정해야 할까요? 그것 보다 효율적인 방법이 있습니다. 바로 상속을 이용하는 것입니다. 

아래처럼 html의 서체 색상만 조정하면 하위에 있는 모든 엘리먼트의 색상이 자동으로 바뀌게 됩니다. 이것은 각 엘리먼트가 상위 엘리먼트의 서체 색상 값을 물려 받기 때문입니다.  

html{color:gray}

이러한 기능을 상속(inheritance)이라고 합니다. 

상속을 하는 속성과 하지 않는 속성

하지만 모든 속성이 상속을 지원하는 것은 아닙니다. 상속을 하면 오히려 비효율적인 속성들이 있거든요. 아래 문서를 보시면 상속하는 속성과 상속하지 않는 속성의 목록을 볼 수 있습니다. 

https://www.w3.org/TR/CSS21/propidx.html

이 표에서 아래 컬럼이 상속 여부를 알려주는 내용입니다. 

댓글

댓글 본문
  1. 전예진
    21.07.28
  2. 두드
    2021.07.22 완료
  3. jeisyoon
    2021.06.21 상속 - OK
  4. barozaqu
    20210518. element { property : value; } inherit
  5. 감사히 잘 보앗습니다.
  6. 완료
  7. 아 역시 검색....이 답?!
  8. Minint
    2021.03.14
  9. 여기서부터 들으려고요 ~ ㅎㅎ
  10. HyeonHui Jeong
    20210219
  11. 임태경
    완료했어요 감사해요
  12. 스마일가이
    2021.01.26 완료 감사합니다
  13. datsciseol
    2021/01/16
  14. 몽실엄마
    12/31/2020 수업완료
  15. 따뜻한츄르
    201230
  16. 201214
  17. switpotato
    20201122: 2차학습 완료
  18. 켄드릭
    2020년 11월 03일(화) 14:16 1차 수강완료
  19. jaehyunlee
    완료
  20. 오석민
    완료
  21. 박병진
    2020.10.03
  22. 콜라
    20200926 완료
  23. 김성곤
    20200718 감사합니다!
  24. jaehyunlee
    완료
  25. 한강
    color 상속 yes, border 상속 no
    링크에서 확인했습니다.
    200529
  26. 조현호
    감사합니다
  27. 와니
    오 표이런 자료는 어떻게 검색해야 나오나요? 정말감사합니다.
  28. 지쇼핑
    완료
  29. 코딩
    완료
  30. laqah
    오 편의성에 따라 적용되고 말고 하는 거였군요
  31. 무지개반사
    완료
  32. Blanc
    2020.01.05
  33. Grigo
    완료
  34. alpha
    191001 수강완료
  35. 랑호앙
    상속!
    융통성이 있네요
  36. 다나가
    190722 - 수업완료!!
  37. 김주엽
    수업완료
  38. 노혜주
    완료
  39. lygon
    2019-03-02 완료
  40. ng941212
    css에 상속 기능이 들어있는 이유는 생산성이 있기 때문이다
  41. 김진욱
    완료!
  42. 숨이
    완료햇습니당
  43. 늦은개
    오늘은 좀 늦엇네요 시작
  44. 김민영
    완료
  45. SlowStarter
    감사합니다!
  46. 스페이스몽키
    감사합니다!
  47. 윤승호
    180126 감사합니다.
  48. 푸른하늘
    10일차 공부 감사합니다
  49. 이경일
    태그는 부모태그에서 속성을 상속받을 수 있다.
    상속이 되는것도 있으며 상속되지 않는 것도 있다.
    이는 결과적 현상으로 구별한다.
  50. 오빠는다르다
    감사합니다~!!!!!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기