반응형
<최종 화면>
우선 예를 위해 div에 p요소들을 만들자.
구분이 잘 되기 위해 크기 및 배경색을 주었다.
그리고 p를 감싸고 있는 div에 테두리를 그렸다. (테두리의 크기를 주지 않는다면, 내용을 감쌀 정도의 크기로 됨.)
만약에 테두리에 고정 크기가 있다면? 감싸고 있는 div에 크기를 주자.
위 사진과 같이 테두리 밖으로 내용이 표시된다...
이때 사용되는 것이 overflow이다.
이미지도 추가해보겠다.
이미지를 감싸고 있는 div에도 테두리(고정 크기)를 그어보자.
위 사진과 같이 역시 테두리를 넘어서 그려진다.
overflow:auto를 주면 크기에 알맞게 들어가고 스크롤이 자동으로 된다.
<복붙용 코드>
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
background-color: limegreen;
width: 200px;
height: 50px;
}
#target{
border: 1px solid black;
width: 300px;
height: 100px;
/* 자식이 부모사이즈를 넘어섰다면 */
overflow: scroll;
overflow: hidden;
overflow: auto;
}
</style>
</head>
<body>
<div id="target">
<p>block #1</p>
<p>block #2</p>
<p>block #3</p>
<p>block #4</p>
<p>block #5</p>
</div>
<div class="aa">
</div>
<style>
.aa{
border: 1px solid blue;
width: 300px;
height: 100px;
overflow:auto;
}
</style>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) display 속성 이용하기 ( float와 같은 배치, 편리) (0) | 2019.12.09 |
|---|---|
| HTML+CSS (기초) float, clear 속성 (옆으로 배치하기 위해 float 사용) (0) | 2019.12.09 |
| HTML+CSS (기초) min, max 속성 사이즈 조절 (0) | 2019.12.09 |
| HTML+CSS (기초) index 속성 이용하기. (0) | 2019.12.09 |
| HTML+CSS ( 기초) float 속성 [이미지 배치해보기] (0) | 2019.12.09 |
댓글