본문 바로가기
코딩 공부/CSS

[CSS] 스타일 상속, 넘침 제어-overflow

by 현장 2022. 9. 15.

스타일 상속

어떤 요소에 CSS를 적용했을 때, 해당 요소의 자식 요소 (하위요소)까지 영향을 미치는 것

-상속이 가능한 목록

주로 글자 문자 관련 속성들 (모든 글자/문자는 아니다.)

ex) font-size, font-weight, font-style, color  등

강제 상속

실제 상속할 수 없는 내용도 강제적으로 상속이 가능

 .class{
	width: 100px;
	height: inherit; /* inherit으로 강제 상속 */
}

넘침 제어-overflow

요소의 크기 이상으로 콘텐츠 내용이 넘쳤을 경우 넘친 부분이 어떻게 보일지 만들거나 제어하는 것

overflow: 값;

1. visible

넘친 내용을 그대로 보여주겠다.

2. hidden

넘친 내용을 잘라내겠다.

3. scroll

넘친 내용을 자르고 스크롤바 생성(잘 안씀)

4. auto

넘친 내용이 있는 경우 잘라내고 스크롤바 생성

 

※ overflow-x / y : x축 혹은 y축으로 스크롤바 생성

'코딩 공부 > CSS' 카테고리의 다른 글

[CSS] 요소의 투명도, 글꼴과 문자  (0) 2022.09.15
[CSS] display와 float, Felx  (0) 2022.09.15
[CSS] margin, padding과 박스 사이즈 계산  (0) 2022.09.15
[CSS] 박스 모델, 선  (0) 2022.09.08
CSS관련, 경로  (0) 2022.09.08