CSS 상속
CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다.
- 속성(프로퍼티) 중에는 상속이 되는 것과 되지 않는 것들이 있다.
- 상속 되는 것 예시
- Text 관련요소(font, color, text-align), opacity, visibility 등
- 상속 되지 않는 것 예시
- Box model 관련요소(width, height, margin, padding, border, box-sizing, display),
- position 관련요소(position, top/right/bottom/left, z-index) 등
* 참고 https://developer.mozilla.org/ko/docs/Web/CSS/inheritance
상속 - CSS: Cascading Style Sheets | MDN
MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤
developer.mozilla.org
<style>
p{
/* 상속됨*/
color: red;
/* 상속안됨*/
border: 1px solid black;
}
span{
/* 상속안됨*/
border: 1px solid blue;
}
</style>
CSS 크기 단위
- px(픽셀)
- 모니터 해상도의 한 화소인 '픽셀'을 기준
- 픽셀의 크기는 변하지 않기 때문에 고정적인 단위
- 각각 모니터에 따라 다르다.
- %
- 백분율 단위
- 가변적인 레이아웃에서 자주 사용
- em
- (바로 위, 부모 요소에 대한) 상속의 영향을 받는다.
- 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가진다.
- 10px, 2em -> 20px
- rem
- (바로 위, 부모 요소에 대한) 상속의 영향을 받지 않는다.
- 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가진다.
- viewport
- 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역
- 주로 스마트폰이나 테블릿 디바이스의 화변을 일컫는 용어로 사용된다.
- 글자 그대로 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정된다.
- vw(width), vh(height), vmin, vmax
<style>
.em {
font-size: 1.5em;
}
.rem {
font-size: 1.5em;
}
</style><body>
<ul class="em">
<li class="em">1.5em</li>
/* em -> 16x1.5x1.5=36px */
<li class="rem">1.5rem</li>
/* rem -> 16x1.5=24px */
<li>no class</li>
/* 부모클래스만 적용-> 16x1.5=24px */
</ul>
</body>
/* html사이즈는 16 */
CSS 색상 단위
- 색상 키워드
- 대소문자를 구분하지 않는다.
- red, blue, black과 같은 특정 색을 직접 글자로 나타낸다.
- RGB 색상
- 16진수 표기법 혹은 함수형 표기법을 사용해서 특정 색을 표현
- '#' + 16진수 표기법
- rgb() 함수형 표기법
- HSL 색상
- 색상, 채도, 명도를 통해 특정 색을 표현
/* 모두 검정 */
p { color: black; }
p { color: #000; }
p { color: #000000; }
p { color: rgb(0, 0, 0); }
p { color: hsl(120, 100%, 0); }
'Web > css' 카테고리의 다른 글
| CSS Display (0) | 2021.08.16 |
|---|---|
| CSS Box model (0) | 2021.08.16 |
| CSS Selector, 가상 선택자 (0) | 2021.08.16 |
| CSS Selector, 결합자 / 복합 선택자 (Combinators) (0) | 2021.08.16 |
| CSS 선택자, Selector (0) | 2021.08.16 |