11주차 - jsp&css (17) overflow
2022. 9. 14. 18:24ㆍjsp/css
이번의 목표
01. overflow를 사용해보자.
지정된 영역에서 이미지가 벗어날때에는 overflow를 사용하여 영역의 크기를 조절할 수 있습니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex17</title>
<style type="text/css">
div { border: 3px solid green;}
.img1 { float: right;}
.auto{overflow: auto;}
.hidden{overflow: hidden;}
</style>
</head>
<body>
<p>이미지가 박스 영역을 벗어남</p>
<div class="auto">
<img class="img1" alt="" src="/cssExam/images/icon1.png" width="50px" height="50px">
이미지가 오른쪽 정렬로 되어 있는데, 박스 영역을 벗어났습니다.
</div><br><br><br>
<div class="hidden">
<img class="img1" alt="" src="/cssExam/images/icon2.png" width="50px" height="50px">
이미지가 박스 영역을 벗어날 경우에는 overflow 속성을 설정하여 해결합니다.
</div>
<!-- 이미지가 영역을 벗어날때, overflow에서 hidden 또는 auto를 사용하면 영역의 크기가 이미지의 크기만큼 재설정 됩니다. -->
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (19) box-sizing (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (18) <header>, <section>, <footer> (0) | 2022.09.14 |
| 11주차 - jsp&css (16) float, clear (0) | 2022.09.14 |
| 11주차 - jsp&css (15) 절대 위치, 고정 위치 (0) | 2022.09.14 |
| 11주차 - jsp&css (14) 정적 위치, 상대 위치 (0) | 2022.09.14 |