1. 오버플로와 관련된 4가지 CSS 속성.
1) overflow : 상자, 혹은 웹페이지를 기준으로 흘러넘치는 콘텐츠 처리 방식.
2) overflow-x : 상자를 가로로 흘러넘치는 콘텐츠 처리 방식.
3) overflow-y : 상자를 세로로 흘러넘치는 콘텐츠 처리 방식.
4) text-overflow : 텍스트 컨테이너를 기준으로 흘러넘치는 텍스트에 대한 처리 방식.
2. 위 1), 2), 3)에 대해 알아본다.
그리고, 4)에 대해서는 다음 글에서 알아본다.
1) overflow
(1) 오버플로(overflow)는 언제 발생하는가?
영어 단어 overflow=흘러넘치다, 라는 뜻.
그러므로, 콘텐츠 내용이 콘텐츠 그릇보다 클 때
→ 콘텐츠는 흘러넘친다.
(2) 오프 롤로(overflow) 처리 방식 5가지
= 오버플로 되는 콘텐츠를 어떻게 처리해 달라고 인간이 브라우저에게 부탁하는 방식 5가지.
- 부탁 안 하고 가만 둔다 : 세상만사 이 방법이 가장 편하다.
- visible : 기본 값이다. 전체 콘텐츠가 보이게 한다.
- hidden : 집 나간(흘러나간) 콘텐츠는 안 보이게 한다.
- scroll : 흘러나간 것은 안 보이지만, 보고 싶으면 스크롤로 들여다볼 수 있도록 한다.
- auto : 위 4)와 비슷하지만, 필요시에만 스코롤 바가 만들어진다.
(3) 각 속성별 에디터 입력 내용 및 브라우저 출력 결과.
① 그냥 놔둔 것
② visible
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<style>
div.그냥놔두기 {
margin: 35px;
padding: 15px ;
background: Tomato;
width: 40%;
height: 90px;
}
div.visible {
margin: 130px 35px 35px;
padding: 15px ;
background: Orange;
width: 40%;
height: 90px;
overflow: visible;
}
</style>
</head>
<body>
<div class="그냥놔두기"><p>길고 기다랗고 정말로 진짜로 길고 엄청 긴 문장이나 철철 넘치는 색깔이나 도형이나 콘텐츠가 하도 많아서 overflow 하다가 overflow는 흘러넘치기 때문에 범람하다가 홍수가 나서 떠내려가다가 visible 신호를 보내면 문지방 넘어 elements 혀 빼물고 보이고 hidden은 잘려나간 몸 반만 남았고 scroll은 약삭빠르게 스크롤바 속으로 들어가 auto는 자동이다. </p></div>
<div class="visible"><p>길고 기다랗고 정말로 진짜로 길고 엄청 긴 문장이나 철철 넘치는 색깔이나 도형이나 콘텐츠가 하도 많아서 overflow 하다가 overflow는 흘러넘치기 때문에 범람하다가 홍수가 나서 떠내려가다가 visible 신호를 보내면 문지방 넘어 elements 혀 빼물고 보이고 hidden은 잘려나간 몸 반만 남았고 scroll은 약삭빠르게 스크롤바 속으로 들어가 auto는 자동이다. </p> </div>
</body>
</html>
上 = 그냥 놔둔 것 = 토마토 색깔의 상자 밖으로 흘러넘친 콘텐츠가 그냥 보인다.
下 = visible= 오렌지 색깔의 상자 밖으로 흘러넘친 콘텐츠가 그냥 보인다
( because, 그냥 보게 해 달라고 속성 값을 부여했기 때문)
두 내용이 같은 이유는 visible이 기본 값이기 때문
③ hidden
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<style>
div.hidden {
margin: 35px;
padding: 15px ;
background: Violet;
width: 40%;
height: 90px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="hidden"><p>Long, long, really long sentences, really long colors, shapes, and content. Overflow is overflowing, overflowing, flooding, drifting away, and sending a visible signal. Hidden only shows half of the body that's cut off, and automatically.</p></div>
</body>
</html>
hidden : 흘러나간 콘텐츠가 보이지 않는다
보이지 않도록 해달라고 속성 값을 부여했기 때문에 당연히 안 보인다.
④ scroll
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<style>
div.scroll {
margin: 35px;
padding: 15px ;
background: MediumSeaGreen;
width: 40%;
height: 90px;
overflow: scroll;
}
</style>
</head>
<body>
<div class="scroll"><p>因为有很多很长、真的很长、非常长的文章或充满色彩、图形或内容，overflow途中overflow会溢出，所以泛滥时洪水冲走时，如果发出visible信号，就会越过门槛，露出elements的舌头，hidden只剩下一半被切断的身体，scroll则会机智地自动滑向aut。</p></div>
</body>
</html>
scroll : 흘러나간 콘텐츠는 스크롤로 볼 수 있다.
흘러나간 콘텐츠는 스코롤로 볼 수 있게 해달라고 속성 값을 부여했기 때문에 당연히 그렇다.
⑤ auto
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<style>
div.auto {
margin: 35px;
padding: 15px ;
background: grey;
width: 40%;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div class="auto"><p>Lunga, davvero lunga, davvero lunga frase, straripante di colori, di forme o contenuti, che fanno traboccare l'eccesso, quindi se allagano, e poi vanno via, e poi vanno giù, e l'hidden è tagliato, e l'auto-svolgimento è rimasto schiacciato.</p></div>
</body>
</html>
위의 scroll 값과 비슷하지만, 필요한 경우에만 스크롤 바가 만들어진다.
2) overflow-x
가로축(x축)의 스코롤 바를 정의하는 방식이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<head>
<style>
div.scroll-x {
margin: 35px;
padding: 20px ;
background: MediumSeaGreen;
width: 40%;
height: 90px;
overflow-x: scroll;
}
div.hidden-x {
margin: 40px;
padding: 20px ;
background: Violet;
width: 40%;
height: 90px;
overflow-x: hidden;
}
</style>
</head>
<body>
<div class="scroll-x"><p>scroll=因为有很多很长、真的很长、非常长的文章或充满色彩、图形或内容，overflow途中overflow会溢出，所以泛滥时洪水冲走时，如果发出visible信号，就会越过门槛，露出elements的舌头，hidden只剩下一半被切断的身体，scroll则会机智地自动滑向aut。</p></div>
<div class="hidden-x"><p>hidden=Long, long, really long sentences, really long colors, shapes, and content. Overflow is overflowing, overflowing, flooding, drifting away, and sending a visible signal. Hidden only shows half of the body that's cut off, and automatically.</p></div>
</body>
</html>
overflow-x 속성은 가로축의 스코롤 바를 정의하는 방식이다.
위 그림: overflow-x 값을 scroll로 하면 x축(가로축)에 스크롤이 생긴다.
아래 그림: overflow-x 값을 hidden으로 하면 x축(가로축)의 스크롤이 생기지 않는다.
3) overflow-y
세로축(y축)의 스코롤 바를 정의하는 방식이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<head>
<style>
div.scroll-y {
margin: 35px;
padding: 20px ;
background: MediumSeaGreen;
width: 40%;
height: 90px;
overflow-y: scroll;
}
div.hidden-y {
margin: 40px;
padding: 20px ;
background: Violet;
width: 40%;
height: 90px;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="scroll-y"><p>scroll=因为有很多很长、真的很长、非常长的文章或充满色彩、图形或内容，overflow途中overflow会溢出，所以泛滥时洪水冲走时，如果发出visible信号，就会越过门槛，露出elements的舌头，hidden只剩下一半被切断的身体，scroll则会机智地自动滑向aut。</p></div>
<div class="hidden-y"><p>hidden=Long, long, really long sentences, really long colors, shapes, and content. Overflow is overflowing, overflowing, flooding, drifting away, and sending a visible signal. Hidden only shows half of the body that's cut off, and automatically.</p></div>
</body>
</html>
overflow-y 속성은 가로축의 스코롤 바를 정의하는 방식이다.
위 그림: overflow-y 값을 scroll로 하면 y축(세로축)에 스크롤이 생긴다.
아래 그림: overflow-y 값을 hidden으로 하면 y축(세로축)의 스크롤이 생기지 않는다.
'코딩 > CSS' 카테고리의 다른 글
| css 박스모델1 - margin, padding, border, content (0) | 2021.12.07 |
|---|---|
| css 포지션 - static, fixed, sticky 차이점 (0) | 2021.12.06 |
| CSS position, relative 와 absolute 차이 (0) | 2021.12.05 |
| 픽셀 em 차이, 변환 계산법 (0) | 2021.10.20 |
| white space 와 空(space)白(white) (0) | 2021.04.21 |