생활코딩

Coding Everybody

코스 전체목록

닫기

상속

상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미합니다. 상속은 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. 다겸란
    수강완료
  2. 곤비
    0216
  3. 미래도비
    02/07
  4. 새콤달콤
    완료
  5. DreamBoy
    2023.09.17. CSS - 조화 - 상속 파트 완료했습니다.
  6. AgainstartJH
    2022년 11월 12일 토요일 학습완료!
  7. 헤밍웨이
    220823 상속 확인!
  8. vigorously27
    2022년 7월 20일 화요일 학습완료!
  9. 이슬유치원
    22/7/4 이슬유치원
  10. INJE
    22/03/16
  11. 초보자바
    22-02-14 완료
  12. 강수빈
    22.2.7 수강완료
  13. 드림보이
    2021.11.10. 상속 파트 수강완료
  14. 황금아가리
    211003
  15. neal
    2021.09.22 완료
  16. 전예진
    21.07.28
  17. 두드
    2021.07.22 완료
  18. jeisyoon
    2021.06.21 상속 - OK
  19. barozaqu
    20210518. element { property : value; } inherit
  20. 짜rr
    감사히 잘 보앗습니다.
  21. choi
    완료
  22. yogg
    아 역시 검색....이 답?!
  23. Minint
    2021.03.14
  24. yogg
    여기서부터 들으려고요 ~ ㅎㅎ
  25. HyeonHui Jeong
    20210219
  26. 임태경
    완료했어요 감사해요
  27. 스마일가이
    2021.01.26 완료 감사합니다
  28. datsciseol
    2021/01/16
  29. 몽실엄마
    12/31/2020 수업완료
  30. 따뜻한츄르
    201230
  31. 201214
  32. switpotato
    20201122: 2차학습 완료
  33. 켄드릭
    2020년 11월 03일(화) 14:16 1차 수강완료
  34. jaehyunlee
    완료
  35. 오석민
    완료
  36. 박병진
    2020.10.03
  37. 콜라
    20200926 완료
  38. 김성곤
    20200718 감사합니다!
  39. jaehyunlee
    완료
  40. 한강
    color 상속 yes, border 상속 no
    링크에서 확인했습니다.
    200529
  41. 조현호
    감사합니다
  42. 와니
    오 표이런 자료는 어떻게 검색해야 나오나요? 정말감사합니다.
  43. 지쇼핑
    완료
  44. 코딩
    완료
  45. laqah
    오 편의성에 따라 적용되고 말고 하는 거였군요
  46. 무지개반사
    완료
  47. Blanc
    2020.01.05
  48. Grigo
    완료
  49. alpha
    191001 수강완료
  50. 랑호앙
    상속!
    융통성이 있네요
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기