CSS inheritance

https://codesandbox.io/s/cssinheritance-uhyym?file=/index.html

주요 프로퍼티별 상속 여부 정리

상속o: text-align, line-height, color, font, visibility, opacity(투명도

상속x: width, height, margin, padding, border, display, box-sizing, background, vertical-align, position(top, right, bottom, left), z-index, overflow, float

강제 상속 설정

상속받고자 하는 프로퍼티 속성을 inherit로 바꾸면 됨

• 예시코드

CSS 우선순위와 Cascading

상속을 여러 개 받는 경우 cascading order에 따라 적용됨

• 중요도: CSS를 어디 선언했는지. head 태그 안의 style요소가 가장 중요도 높음
• 명시도: 대상을 명확하게 지정한 정도. 특정 태그의 id까지 지정한 경우 명시도 높음
• 선언순서: 뒤에 나올수록 우선순위 높음

→ 명시도가 제일 우선순위에 영향을 많이 미침

명시도 계산 기본 규칙: !important > Inline Style > id > class > tag

CSS media query와 반응형 레이아웃

http://codesandbox.io/s/cssmedia-v7qd3?file=/index.html

픽셀과 뷰포트

픽셀은 해상도에 따라 요소의 크기가 달라질 수 있음

뷰포트는 화면상의 표시 영역. 가상 뷰포트는 마치 해상도가 980픽셀인 것처럼 만들어줌