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 |
댓글