1. overflow
overflow : 부모 박스에서 내용물이 넘치는 경우 어떻게 보여질지 결정하는 속성
overflow-x : x축(가로)의 넘치는 내용물을 어떻게 보여줄지 결정하는 속성 값
overflow-y : y축(세로)의 넘치는 내용물을 어떻게 보여줄지 결정하는 속성 값
hidden : 영역을 벗어나는 부분이 보이지 않게 처리
scroll : 영역을 벗어나는 부분의 양에 상관없이 스크롤바가 형성
auto : 요소 안에 내용물이 넘치지 않으면 스크롤바가 나오지 않고, 내용물이 넘칠 때는 스크롤바가 형성
코드예시 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.{
margin : 0;
padding : 0;
}
body{
/* 모니터 해상도 : 1920*1080 */
background-color:aqua;
width : 2000px;
height : 1500px;
overflow-x: hidden;
overflow-y: hidden;
margin : 10px;
}
.contents1{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
}
.contents2{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
}
.contents3{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
overflow : hidden;
}
.contents4{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
overflow: scroll;
}
</style>
<body>
<div class="contents1">
<h4>콘텐츠 양이 일정</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
</div>
<div class="contents2">
<h4>콘텐츠 양이 많거나 유동적임</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
</div>
<div class="contents3">
<h4>콘텐츠 양에 따라서 높이가 늘어난다.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto officia similique distinctio hic repudiandae possimus praesentium culpa sed voluptatibus velit! Quia accusantium id dignissimos fuga! Qui at doloremque perferendis rem. </p>
</div>
<div class="contents4">
<h4>박스의 높이에 따라 콘텐츠가 보이지 않게 처리된다.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur iste voluptas, harum praesentium illum, error distinctio ullam modi fugiat amet exercitationem quod aliquam ducimus possimus. Quos hic a ut et.</p>
</div>
</body>
</html></head>코드예시 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.{
margin : 0;
padding : 0;
}
body{
/* 모니터 해상도 : 1920*1080 */
background-color:aqua;
width : 2000px;
height : 1500px;
overflow-x: hidden;
overflow-y: hidden;
margin : 10px;
}
.contents1{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
margin : 10px;
box-sizing: border-box;
overflow : scroll;
}
.contents2{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
margin : 10px;
box-sizing: border-box;
overflow : scroll;
overflow-x: scroll;
overflow-y: hidden;
}
.contents3{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
margin : 10px;
box-sizing: border-box;
overflow : scroll;
overflow-x : hidden;
overflow-y : scroll;
}
.contents4{
border : 2px solid black;
width : 200px;
height : 200px;
float : left;
margin : 10px;
box-sizing: border-box;
overflow: hidden;
}
</style>
<body>
<div class="contents1">
<h4>스크롤바 가로, 세로 모두 표시</h4>
<p>
<img src="jpg/ex4.jpg" alt="사막">
</p>
</div>
<div class="contents2">
<h4>스크롤바 가로만 표시</h4>
<p>
<img src="jpg/ex4.jpg" alt="사막">
</p>
</div>
<div class="contents3">
<h4>스크롤바 세로만 표시</h4>
<p>
<img src="jpg/ex4.jpg" alt="사막">
</p>
</div>
<div class="contents4">
<h4>스크롤바 숨기기</h4>
<p>
<img src="jpg/ex4.jpg" alt="사막">
</p>
</div>
</body>
</html></head>2. display
inline
장점 : 가로로 배치됨
단점 : 가로, 세로 사이즈 변경 x width, hegith 적용 x
기본 사이즈 : 가로, 세로 모두 자식이 존재하는 만큼
코드예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
background-color: aqua;
width: 200px;
height: 200px;
margin : 10px;
float: left;
/* 제거 전후 차이점
float의 속성을 부여하기 전 원래 span의 성격은 Inline 성격을 가지고 있기 때문에
width*height 값 적용되지 않는데 float을 사용하면 이 속성이 해제된다. */
}
</style>
</head>
<body>
<span>inline성격의 태그</span>
<span>inline성격의 태그</span>
</body>
</html>