Box - width, heignt, padding, margin
width : 가로
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {border: 1px solid black;}
div.test1 {width: auto;}
div.test2 {width: 150px;}
div.test3 {width: 50%;}
</style>
</head>
<body>
<div class="test1">width: auto;</div>
<div class="test2">width: 150px;</div>
<div class="test3">width: 50%;</div>
</body>
</html>
heignt : 세로
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {border: 1px solid black;}
div.test1 {height: auto;}
div.test2 {height: 150px;}
div.test3 {height: 100px;}
div.test4 {height: 50%;border: 1px solid red;}
</style>
</head>
<body>
<div class="test1">hello world! hello world! hello world!
hello world! hello world! hello world!
hello world! hello world! hello world!
hello world! hello world! hello world!
hello world! hello world! hello world!
</div>
<div class="test2">height: 150px;</div>
<div class="test3">
<div class="test4">height: 50%;border: 1px solid red;</div>
</div>
</body>
</html>
padding : 안쪽 여백, margin : 바깥쪽 여백
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div.ex1 {
border: 1px solid red;
padding: 35px;
}
div.ex2 {
border: 1px solid red;
margin: 35px;
}
</style>
</head>
<body>
<div class="ex1">padding: 35px</div>
<div class="ex2">margin: 35px</div>
</body>
</html>
margin : 세로 여백, margin 겹침
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
border: 1px solid red;
width : 200px;
}
div.ex1 {
margin : 10px 0;
}
div.ex2 {
margin : 10px auto;
}
</style>
</head>
<body>
<div class="ex1">세로 여백만 발생</div>
<div class="ex2">세로 여백 발생, 가로 가운데 정렬</div>
/*margin 겹침현상*/
<div class="ex2">세로 여백 발생, 가로 가운데 정렬</div>
</body>
</html>
box-shadow : 그림자
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin : 0 20px 30px 20px;
border: 2px solid red;
padding: 5px;
background-color:yellow;
}
#ex1 {
box-shadow : 10px 10px gray;
}
#ex2 {
box-shadow : 10px 10px 10px gray;
}
#ex3 {
box-shadow : 10px 10px 10px 10px gray;
}
#ex4 {
box-shadow : 10px 10px 10px 10px gray inset;
}
</style>
</head>
<body>
<div id="ex1">
<p>box-shadow : 10px 10px gray</p>
</div>
<div id="ex2">
<p>box-shadow : 10px 10px 10px gray</p>
</div>
<div id="ex3">
<p>box-shadow : 10px 10px 10px 10px gray</p>
</div>
<div id="ex4">
<p>box-shadow : 10px 10px 10px 10px gray inset</p>
</div>
</body>
</html>
box 변형
<!DOCTYPE html>
<html lang="ko">
<head><title> CSS3 </title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
width:350px;
height:70px;
margin-bottom:20px;
border:3px solid #ccc;
background-image: url("https://www.w3schools.com/cssref/paper.gif");
background-color:brown;
}
.tra {
transform:translate(20px,-30px);
-ms-transform:translate(20px,-30px);
-moz-transform:translate(20px,-30px);
-webkit-transform:translate(20px,-30px);
-o-transform:translate(20px,-30px);
}
.rot {
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
}
.sca {
transform:scale(1.3,0.7);
-ms-transform:scale(1.3,0.7); /* IE 9 */
-moz-transform:scale(1.3,0.7); /* Firefox */
-webkit-transform:scale(1.3,0.7); /* Safari and Chrome */
-o-transform:scale(1.3,0.7); /* Opera */
}
.ske {
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
}
</style></head>
<body>
<h1>원래박스</h1>
<h1 class="tra">이동 : translate</h2>
<h1 class="rot">회전 : rotate</h3>
<h1 class="sca">크기 : scale</h4>
<h1 class="ske">찌그러짐 : skew</h5>
</body>
</html>
box-sizing : 요소의 너비와 높이를 계산할시 여백과 테두리를 표함할지를 선택
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin-bottom : 20px;
}
#example1 {
box-sizing: content-box;
}
#example2 {
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>
<div id="example2">Here, the full width is 300px, no matter what!</div>
</body>
</html>
resize : 박스의 모서리로 크기를 조정
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
overflow: auto;
margin-bottom : 30px;
}
div.ex1 {
resize: none;
}
div.ex2 {
resize: both;
}
div.ex3 {
resize: horizontal;
}
div.ex4 {
resize: vertical;
}
</style>
</head>
<body>
<div class="ex1">
resize: none
</div>
<div class="ex2">
resize: both
</div>
<div class="ex3">
resize: horizontal
</div>
<div class="ex4">
resize: vertical
</div>
</body>
</html>