width
: 요소의 가로 너비를 지정한다.
auto
: 브라우저가 너비를 계산해서 왼쪽, 오른쪽 너비를 동일하게 만든다. => 요소를 가운데 배치한다.
px, %, em, rem, cm 등을 단위로 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 폭, 너비</title>
<style type="text/css">
div {
/* width: auto; */ /* block 요소의 width 속성을 auto로 지정하면 100%가 기본값으로 사용된다. */
/* width: 100%; */
width: 200px;
/* height: auto; */ /* block 요소의 height 속성을 auto 지정하면 0이 기본값으로 사용된다. */
/* height: 0; */
height: 100px;
background-color: mediumslateblue;
}
span {
/* width: auto; */ /* inline 요소의 width 속성을 auto로 지정하면 0이 기본값으로 사용된다. */
width: 200px;
/* height: auto; */ /* inline 요소의 height 속성을 auto로 지정하면 0이 기본값으로 사용된다. */
height: 100px;
background-color: chocolate;
}
</style>
</head>
<body>
<div></div>
<span>박스모델 폭, 너비</span>
</body>
</html>
max-width
: 부모 요소의 크기와 관계없이 요소의 최대 가로 너비를 지정한다.
min-width
: 부모 요소의 크기와 관계없이 요소의 최소 가로 너비를 지정한다.
max-height
: 부모 요소의 크기와 관계없이 요소의 최대 세로 너비를 지정한다.
min-height
: 부모 요소의 크기와 관계없이 요소의 최소 세로 너비를 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 폭, 너비</title>
<style type="text/css">
.parent {
width: 150px;
height: 300px;
border: 4px solid tomato;
margin: 20px;
}
.child {
/* width: auto; */ /* 부모 크기에 따라 가변적 */
/* width: 100%; */ /* 부모 크기에 따라 가변적 */
/* width: 300px; */ /* 부모 크기에 상관없이 고정적 */
/*
parent class의 width가 200 ~ 400px 이면 꽉차게 보이지만 200px보다 작아지면 child class는 200px을
유지하고 400px보다 커지면 400px을 유지한다.
*/
max-width: 400px;
min-width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
margin
: 요소의 외부(바깥) 여백을 지정한다. 음수값도 사용할 수 있다.
px, %, em, rem, cm 등을 단위로 사용하고 기본값은 0이다.
auto: 브라우저가 너비를 계산한다.
%: 부모 요소에 대한 비율로 지정된다.
- margin => 단축 속성, 여러 개별 속성을 한꺼번에 지정할 수 있다.
margin 위쪽 오른쪽 아래쪽 왼쪽
margin 위쪽 [왼쪽 오른쪽] 아래쪽
margin [위쪽 아래쪽][왼쪽 오른쪽]
margin [위쪽 아래쪽 왼쪽 오른쪽]
- margin-top, margin-bottom, margin-left, margin-right => 개별 속성
margin-top: 요소의 외부 위쪽 여백을 지정한다.
margin-bottom: 요소의 외부 아래쪽 여백을 지정한다.
margin-left: 요소의 외부 왼쪽 여백을 지정한다.
margin-right: 요소의 외부 오른쪽 여백을 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 바깥 여백</title>
<style type="text/css">
.parent {
width: 400px;
height: 200px;
border: 4px solid tomato;
}
.child {
width: 100px;
height: 100px;
border: 4px solid mediumslateblue;
/* 개별 속성 */
/* margin-top: 20px; */
/* margin-left: 20px; */
/* 단축 속성 */
/* margin: 10px 20px 30px 40px; */
/* margin: 10px 20px 30px; */
/* margin: 10px 40px; */
margin: 200px;
/* margin을 비율로 지정하면 부모 요소의 가로 크기를 기준으로 지정된다. */
/* margin: 50%; */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
마진 중복(병합, collapse): 마진의 특정 값들이 중복되어 합쳐지는 현상
1. 형제 요소들의 margin-top과 margin-bottom이 만났을 때
2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때
마진 중복 계산: 마진 중복 현상이 발생될 때 중복값을 계산하는 방법
1. 둘 다 양수: A(30px), b(10px) => 더 큰 값으로 합쳐진다. => 30px
2. 둘 다 음수: A(-30px), b(-10px) => 더 작은 값으로 합쳐진다. => -30px
3. 양수와 음수: A(-30px), b(10px) => 산수를 한다. => -20px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 마진 중복(margin collapsing)</title>
<style type="text/css">
.parent {
width: 300px;
height: 100px;
background-color: cyan;
margin-top: 50px;
}
.child {
width: 100px;
height: 100px;
background-color: tomato;
margin: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
padding
: 요소의 내부 여백을 지정한다.
px, %, em, rem, cm 등을 단위로 사용하고 기본값은 0이다.
auto: 브라우저가 너비를 계산한다.
%: 부모 요소에 대한 비율로 지정된다.
- padding => 단축 속성, 여러 개별 속성을 한꺼번에 지정할 수 있다.
padding 위쪽 오른쪽 아래쪽 왼쪽
padding 위쪽 [왼쪽 오른쪽] 아래쪽
padding [위쪽 아래쪽][왼쪽 오른쪽]
padding [위쪽 아래쪽 왼쪽 오른쪽]
- padding-top, padding-bottom, padding-left, padding-right => 개별 속성
padding-top: 요소의 내부 위쪽 여백을 지정한다.
padding-bottom: 요소의 내부 아래쪽 여백을 지정한다.
padding-left: 요소의 내부 왼쪽 여백을 지정한다.
padding-right: 요소의 내부 오른쪽 여백을 지정한다.
크기 증가: 추가된 padding 값 만큼 요소가 커지는 현상
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 안쪽 여백</title>
<style type="text/css">
/* padding 포함 140px * 140px => 크기 증가 */
.box1 {
width: 100px;
height: 100px;
background-color: mediumorchid;
padding: 20px;
}
/* padding 포함 140px * 140px => 수동 크기 계산 */
.box2 {
width: 60px;
height: 80px;
background-color: chocolate;
padding: 30px 40px;
}
/* padding 포함 140px * 140px => 자동 크기 계산 */
.box3 {
width: 140px;
height: 140px;
background-color: hotpink;
padding: 15px 20px;
/* box-sizing: border-box; 속성을 지정하면 지정된 padding에 따른 전체 크기가 자동으로 계산된다. */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">
Hello world!!!!!
</div>
<div class="box2">
Hello world!!!!!
</div>
<div class="box3">
Hello world!!!!!
</div>
</body>
</html>
border
: 요소의 테두리 선을 지정한다.
border 선두께 선종류 선색상; => 단축 속성, 선 색상을 생략하면 글자 색에 따른다.
- border-width => 선의 두께(너비), medium(중간), thin(얇은), thick(두꺼운), 기본값 medium,
=> 단위 px, em, cm 등 단위로 지정
border-width 위 오른쪽 아래 왼쪽;
border-width 위 [왼쪽 오른쪽] 아래쪽;
border-width [위 아래][왼쪽 오른쪽];
border-width [위 아래 왼쪽 오른쪽];
- border-style => 선의 종류, 기본값 none
none => 선 없음
hidden => 선 없음과 동일(table 요소에서 사용)
solid => 실선(일반선)
dotted => 점선
dashed => 파선
double => 두 줄선
groove => 홈이 파여있는 모양의 선
ridge => 솟은 모양의 선, groove의 반대
inset => 요소 전체가 들어간 모양의 선
outset => 요소 전체가 나온 모양의 선
border-style 위 오른쪽 아래 왼쪽;
border-style 위 [왼쪽 오른쪽] 아래쪽;
border-style [위 아래][왼쪽 오른쪽];
border-style [위 아래 왼쪽 오른쪽];
border-color => 선의 색상, 기본값 black, transparent => 투명한 선(요소의 배경색이 보임)
border-radius => 사각형 모서리를 둥글게 하는 원의 반지름
border-top => 위쪽 선
border-top-width => 위쪽 선의 두께
border-top-style => 위쪽 선의 종류
border-top-color => 위쪽 선의 색상
border-top-left-radius => 위 왼쪽 모서리를 둥글게 처리하는 원의 반지름
border-top-right-radius => 위 오른쪽 모서리를 둥글게 처리하는 원의 반지름
border-bottom => 아래쪽 선
border-bottom-width => 아래쪽 선의 두께
border-bottom-style => 아래쪽 선의 종류
border-bottom-color => 아래쪽 선의 색상
border-bottom-left-radius => 아래 왼쪽 모서리를 둥글게 처리하는 원의 반지름
border-bottom-right-radius => 아래 오른쪽 모서리를 둥글게 처리하는 원의 반지름
border-left => 왼쪽 선
border-left-width => 왼쪽 선의 두께
border-left-style => 왼쪽 선의 종류
border-left-color => 왼쪽 선의 색상
border-right => 오른쪽 선
border-right-width => 오른쪽 선의 두께
border-right-style => 오른쪽 선의 종류
border-right-color => 오른쪽 선의 색상
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외곽 선</title>
<style type="text/css">
.box {
width: 800px;
height: 200px;
background-color: orange;
border: 10px solid blue;
border-top-right-radius: 150px;
border-bottom-left-radius: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
box-sizing: 요소의 크기 계산 기준을 정한다.
- content-box
=> 기본값, 크기(width, height)만으로 요소의 크기를 계산한다.
=> 안여백(padding)과 테두리 선(border)이 추가되며 추가된 만큼 전체 크기가 커진다.- border-box
=> 크기(width, height)에 안여백(padding)과 테두리 선(border)을 포함해서 요소의 크기를 계산한다.
=> 전체 크기는 유지되고 안여백(padding)과 테두리 선(border)의 크기만큼 요소의 크기가 작아진다.
개발자 모드(F12)-를 띄워놓고 확인한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: hotpink;
border: 10px solid red;
padding: 40px;
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
border: 10px solid blue;
padding: 40px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
display: 요소의 박스 타입을 설정한다.
- block => 블록 요소(div 등) => 내용이 없어도 크기를 가질 수 있다. => 자동으로 줄이 변경된다.
- inline => 인라인 요소(span 등) => 내용이 있어도 크기를 가질 수 없다. => 자동으로 줄이 변경되지 않는다.
- inline-block => 인라인 블록 요소(input 등) => lnline 요소인데 크기를 가질 수 있다.
- none => 요소의 박스 타입이 없음 => 요소가 화면에서 사라짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style type="text/css">
span {
width: 100px;
height: 100px;
background-color: chocolate;
/* inline 요소를 block 요소로 변경하면 크기를 가지게 되므로 내용이 없어도 보인다. */
display: block;
}
div {
width: 100px;
height: 100px;
background-color: yellowgreen;
/* block 요소를 inline 요소로 변경하면 크기를 가질 수 없게 되므로 내용이 있어야 보인다. */
display: inline;
}
input {
width: 100px;
height: 30px;
background-color: hotpink;
margin: 3px 0px;
padding: 10px;
display: inline-block;
}
form > input:nth-child(2) {
display: none;
}
</style>
</head>
<body>
<span></span>
<div>블록 요소가 인라인 요소로 변경되면 내용이 있어야 보인다.</div>
<form>
<input type="text" value="1"/>
<input type="text" value="2"/>
<input type="text" value="3"/>
<input type="hidden" value="4"/>
<input type="text" value="5"/>
</form>
</body>
</html>
overflow: 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 보여지는 방식을 제어한다.
- visible: 기본값, 넘친 내용을 부모 외부에 표시한다.
- hidden: 넘친 내용을 표시하지 않는다.
- scroll: 가로, 세로 스크로 바를 표시한다. 내용이 넘치지 않아도 스크롤 바가 표시된다.
- auto: 넘치는 경우에만 스크롤 바를 표시한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
.parent {
width: 300px;
height: 250px;
border: 4px solid blue;
overflow: auto; /*overflow: 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 보여지는 방식을 제어한다.*/
}
.child {
width: 100px;
height: 100px;
border: 4px solid red;
background-color: yellowgreen;
font-size: 40px;
/* 텍스트 가로, 세로 가운데 정렬 */
display: flex;
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
opacity: 요소의 투명도를 지정한다. 0부터 1 사이의 실수를 지정하며 기본값은 1이다.
1.0 => 100% 불투명도, 완전 불투명
0.5 => 50% 불투명도, 반투명
0.0 => 0% 불투명도, 완전 투명
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>투명도</title>
<style type="text/css">
.parent {
width: 300px;
height: 250px;
background-color: hotpink;
}
.parent .child {
width: 100px;
height: 100px;
background-color: yellowgreen;
font-size: 40px;
opacity: 0.5; /*투명도 지정*/
display: flex;
justify-content: center;
align-items: center;
}
/* .parent .child:first-child { */
.parent .child:nth-child(1) {
/* display: none; */ /* 사라져서 존재하지 않는다. */
opacity: 0; /* 존재하지만 보이지 않는다. */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">123</div>
<div class="child">456</div>
</div>
</body>
</html>