11주차 - jsp&css (9) overflow
2022. 9. 13. 20:05ㆍjsp/css
이번의 목표
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. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (11) CSS 박스 모델 (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (10) 스타일을 그룹으로 적용해보자. (0) | 2022.09.14 |
| 11주차 - jsp&css (8) 가상 클래스 (0) | 2022.09.13 |
| 11주차 - jsp&css (7) 가상 클래스 (0) | 2022.09.13 |
| 11주차 - jsp&css (6) 자식 객체에 스타일 적용하기 (0) | 2022.09.13 |