CSS - overflow
2020. 7. 31. 14:29ㆍWeb(CSS)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
@charset "UTF-8";
section{border: 3px solid;
width: 700px;
margin: 10em 1em;
padding: 1em;
color: #55a;
}
section>p{
border: 2px solid #a55;
width: 600px;
height: 500px;
}
#sec01>p{overflow: visible;}
#sec02>p{overflow: hidden;}
#sec03>p{overflow: scroll;}
#sec04>p{overflow: auto;}
#pro>p{overflow: hidden;}
#pro img{width: 1000px;
opacity: 0.4;/* 요소의 투명도 지정
0~1사이의 값(0은 완전 투명) */
}
#pro>p:hover>img{width: 600px;
transition: 1.5s;
opacity: 1;
}
/* 말줄임표 표시하기 */
.txt-box{border: 1px solid;
width: 200px;
padding: 0.6em 1em;
/* 말줄임표의 필수 구성요소 */
overflow: hidden;/*영역밖의 내용 숨김*/
white-space: nowrap;/*강제 줄바꿈 금지*/
text-overflow: ellipsis;/*말줄임표(...) 표시*/
}
.txt-box:hover {
width: 100%;
transition: 1.3s;
}
.pre{white-space: pre;}
//------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="overflow.css" rel="stylesheet">
</head>
<body>
<h1>overflow : ; 영역 밖의 내용 처리법</h1>
<ol>
<li>overflow : visible; 영역밖의 내용보임(기본값)</li>
<li>overflow : hidden; 영역밖의 내용 숨김</li>
<li>overflow : scroll; 스크롤바를 생성</li>
<li>overflow : auto; 스크롤바 자동</li>
</ol>
<section id="sec01">
<h2>overflow : visible ;</h2>
<p>overflow : visible ; 영역밖의 내용보임<br>
<img alt="pineapple" src="img/pineapple.jpg" height="700" width="600">
</p>
</section>
<section id="sec02">
<h2>overflow : hidden ;</h2>
<p>overflow : hidden ; 영역밖의 내용숨김<br>
<img alt="pineapple" src="img/pineapple.jpg" height="700" width="600">
</p>
</section>
<section id="sec03">
<h2>overflow : scroll ;</h2>
<p>overflow : scroll ; 스크롤바 생성<br>
<img alt="pineapple" src="img/pineapple.jpg" height="700" width="600">
</p>
</section>
<section id="sec04">
<h2>overflow : auto ;</h2>
<p>overflow : auto ; 스크롤바 자동<br>
<img alt="pineapple" src="img/pineapple.jpg" height="700" width="600">
</p>
</section>
<section id="pro">
<p>
<img alt="pineapple" src="img/pineapple.jpg" height="700" width="600">
</p>
</section>
<h2>말줄임표 표시하기</h2>
<p class="pre">
overflow : hidden ; 영역밖의 내용 숨김
white-space: nowrap; 강제 줄바꿈 금지
text-overflow: ellipsis; 말줄임표(...)표시
</p>
<div class="txt-box">
overflow : hidden ; 영역밖의 내용 숨김
white-space: nowrap; 강제 줄바꿈 금지
text-overflow: ellipsis; 말줄임표(...)표시
</div>
</body>
</html>
|
cs |
overflow라는 정해놓은 영역을 벗어나는 부분의 데이터를 어떻게 표현할지에 대한 기능을 배워보았다.
어려운 건 없고 어떤 걸 어떤 상황에 적용시켜야 하냐에 따른 선택의 차이니 상황에 따라 잘 적용시켜보자
'Web(CSS)' 카테고리의 다른 글
| CSS - background-image (0) | 2020.07.31 |
|---|---|
| CSS - float (0) | 2020.07.31 |
| CSS- display (0) | 2020.07.31 |
| CSS - padding (0) | 2020.07.27 |
| CSS - margin (0) | 2020.07.27 |