CSS의 상속Inheritance은 부모 요소에 적용한 스타일이 자식 요소에게도 물려받아지는 현상을 말한다.
이번 포스트에서는 이 '상속'이라는 것에 대해서 알아보겠다.
이전 포스트
CSS 폰트 속성, font-family, weight, line-height와 단축 속성 사용법
생활코딩 CSS 수업 영상: 상속
CSS에 상속이라는 것이 존재하는 이유는 효율성과 일관성 때문이다.
만약 상속이 없다면, 웹페이지 전체의 글자색을 바꾸고 싶을 때 모든 p, span, div, li 태그를 일일이 찾아다니며 색상을 지정해야 할 것이다.
그런데 상속 덕분에 <body>나 최상위 박스에 스타일을 한 번만 주면 하위 요소들이 알아서 따라오기 때문에 코드의 중복이 발생하지 않는다.
또, 본문 안의 모든 텍스트가 제각각의 크기나 색상을 갖지 않도록 묶어주는 역할도 하기 때문에 디자인의 일관성을 확보할 수 있다.
CSS에서 상속되는 속성과 되지 않는 속성
모든 속성이 상속된다면 오히려 웹 디자인이 엉망이 될 거다.
그래서 CSS는 상식적인 기준을 가지고 상속 여부를 나눈다.
1. 상속되는 속성 (Text 관련)
- 이유: 글자색이나 폰트 종류는 문서 전체에서 통일감을 주는 것이 자연스럽기 때문이다.
- 종류:
color,font-family,font-size,font-weight,line-height,text-align,visibility등.
2. 상속되지 않는 속성 (Box Model 관련)
- 이유: 만약 부모의 테두리(
border)나 여백(padding)이 자식에게 상속된다면, 박스 안에 박스를 넣을 때마다 원치 않는 선과 여백이 계속 생겨서 디자인을 망치게 된다. - 종류:
width,height,margin,padding,border,background-image,display,position등.
개발자를 위한 웹 기술 | MDN
MDNMozilla Developer Network 웹사이트를 통해 상속 여부를 확인할 수 있다.
특정 속성(예: color)을 검색하면, 하단에 상속 여부가 Yes 혹은 No라고 표시되어 있다.
상속되지 않는 속성을 억지로 상속시키고 싶을 때는 inherit를 사용하면 된다.
예를 들어, 원래 버튼(button)은 부모의 폰트를 상속받지 않지만, font-family: inherit;라고 적어주면 부모와 똑같은 폰트를 쓰게 할 수 있다.
생활코딩 CSS 수업 영상: Stylish 익스텐션
이 영상은 웹브라우저의 Stylish라는 익스텐션을 소개하는 영상이다.
중요한 내용은 아니고, 쉬어가는 영상 정도로 생각하면 된다.
Stylish는 사용자가 직접 CSS를 작성하거나 공유된 테마를 설치하여, 웹사이트의 디자인을 본인의 입맛에 맞게 변경할 수 있는 브라우저 확장 프로그램이다.
다음이나 네이버 같은 특정 사이트의 배경색, 폰트, 레이아웃 등을 자유롭게 수정할 수 있어 웹 서핑 환경을 개인화하는 데 유용하다.
하지만, 과거에 개인정보 수집 논란이 있었기 때문에 같은 기능을 하는 Stylus라는 대안 익스텐션을 사용하는 개발자가 더 많다고 한다.
다음 포스트
CSS 캐스케이딩, 우선순위를 조절하는 방법
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩