728x90
overflow
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
overflow: hidden; background-color: blue; height: 100px;
}
div div {
background-color: red; height: 200px; width: 200px;
}
</style>
</head>
<body>
<div>
hello
<div>css</div>
</div>
<h1>다음 내용</h1>
</body>
</html>
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.
overflow 속성 값을 지정하지 않았다면 기본 값인 visible로 설정되고 넘치는 부분을 가리지 않는다.
이때, div의 overflow 속성을 hidden으로 설정하면 넘치는 부분을 가린다.
overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커진다.
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div { border: 3px solid #73AD21; width: 50%; }
.img1 { float: right; }
.auto { /* overflow: auto; */ }
.hidden { /* overflow: hidden; */ }
</style>
</head>
<body>
<p>이미지가 박스 영역을 벗어남</p>
<div class="auto">
<img class="img1" src="/cssEx/images/icon1.png" width="50px" height="50px">
이미지가 오른쪽 정렬이 되어 있는데, 박스 영역을 벗어났습니다.
</div>
<br><br><br>
<div class="hidden">
<img class="img1" src="/cssEx/images/icon2.png" width="50px" height="50px">
이미지가 박스 영역을 벗어날 경우에는 overflow 속성을 설정하여 해결합니다.
</div>
</body>
</html>
이미지가 div 영역을 벗어났을 때 overflow의 속성을 지정하지 않으면(visible) 넘친 그대로 화면에 보여진다.
이때, 컨테이너 요소의 float 속성 값을 auto나 hidden으로 명시하면 컨테이너 요소가 커지거나 넘치는 부분을 보이지 않도록 처리한다.
728x90
'Front-end' 카테고리의 다른 글
| [css]position - static, relative, absolute, fixed (0) | 2022.04.28 |
|---|---|
| [css]박스 모델 (0) | 2022.04.27 |
| [css] *, id 선택자, class 선택자, 속성 선택자, 가상 클래스 선택자, 자식 선택자, 자손 선택자, 그룹 선택자 (0) | 2022.04.27 |
| radio버튼, 체크 박스 (0) | 2022.04.26 |
| HTML 태그(2) (0) | 2022.04.26 |
