jsp/css

11주차 - jsp&css (9) overflow

우젼 2022. 9. 13. 20:05

이번의 목표

01. overflow를 사용해보자

하위의 구역이 상위의 구역보다 클때 구역을 넘기는 경우가 종종 있습니다.

 

이럴 때에 해결하기 위해서 overflow 속성을 사용할 수 있습니다.

overflow 속성에는 크게 hidden, scroll, visible 세가지가 있습니다.

설명은 코드에 적어 두었습니다.

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>ex05</title>
<style type="text/css">
	/* overflow : hidden, scroll, visible 이 들어간다.
		ㄴ hidden : 하위 범위가 상위 범위를 넘었을때 넘는 부분을 숨긴다.
		ㄴ scroll : 하위 범위가 상위 범위를 넘었을때 스크롤을 넣는다.
		ㄴ visible : 하위 범위가 상위 범위를 넘었을때 넘는 부분을 보여준다. (디폴트)
	*/
	div{background-color: blue;height: 100px; overflow: hidden;}
	div div {background-color: red; width: 200px; height: 200px;}

</style>
</head>
<body>
	<div>hello
		<div>css</div>
	</div>
	<h1>다음 내용</h1>

</body>
</html>

02. 실행 화면