본문 바로가기
IT/@HTML

HTML/CSS 공부하기 : overflow

by He;story 2020. 3. 15.

Max-height/Width 를 쓰다보면 내용물이 들어갈 공간이 부족하여 글이 튀어나오게 된다.

이렇게 튀어나온 내용물을 Overflow 기능을 이용해서 처리해줄 수 있다.

<!DOCTYPE html>
<html>
<head>
	<title>Box Model</title>
	<meta charset="utf-8">
	<style>
		h1 {
			border: 5px solid blue;
				}

		.tag1 {
			border: 5px solid blue;
			max-height: 200px;
	</style>

</head>

<body>
	<h1> CSS Box Model </h1>

	<p class="tag1">All HTML elements can be 
		considered as boxes. In CSS, the term "box model" is used 
		when talking about design and layout.
		The CSS box model is essentially a box that wraps around every HTML element. 
		It consists of: margins, borders, padding, and the actual content. 
		The image below illustrates the box modelAll HTML elements can be 
		considered as boxes. In CSS, the term "box model" is used 
		when talking about design and layout.
		The CSS box model is essentially a box that wraps around every HTML element. 
		It consists of: margins, borders, padding, and the actual content. 
		The image below illustrates the box model:mage below illustrates the box modelAll HTML elements can be 
		considered as boxes. In CSS, the term "box model" is used 
		when talking about design and layout.
		The CSS box model is essentially a box that wraps around every HTML element. 
		It consists of: margins, borders, padding, and the actual content. 
		The image below illustrates the box model</p>

</body>
</html>

Hidden 기능

Hidden을 사용하면 넘쳐나는 부분을 숨김처리 가능하다.


		.tag1 {
			border: 5px solid blue;
			max-height: 200px;
			overflow: hidden;
	

Scroll 기능

내용물을 숨기상태에서 스크롤을 이용해서 볼 수 있게 가능하다.

		.tag1 {
			border: 5px solid blue;
			max-height: 200px;
			overflow: scroll;

Auto 기능

Scroll과 동일한 기능을 하지만 스크롤은 내용물이 안넘쳐도 스크롤을 보여주며, Auto는 내용물이

넘칠 때 자동으로 스크롤이 생성되서 보여준다.

그냥 쉽게 overflow : auto로 하는 것이 가장 좋을 듯하다.

		.tag1 {
			border: 5px solid blue;
			max-height: 200px;
			overflow: auto;

 

'IT > @HTML' 카테고리의 다른 글

HTML/CSS 공부하기 : 테두리 꾸미기  (1) 2020.03.22
HTML/CSS 공부하기 : border  (4) 2020.03.20
HTML/CSS 공부하기 : Margin  (2) 2020.03.12
HTML/CSS 공부하기 : Padding  (0) 2020.03.10
HTML/CSS 공부하기 : Box Model 의 이해  (2) 2020.03.09

댓글