CSS - 박스모델

1. width, height

-1) width : 요소의 가로 너비를 지정

값	의미	기본값
auto	브라우저가 너비를 계산	auto
단위	px, em, cm 등 단위로 지정

 

-2) height : 요소의 세로 너비를 지정

값	의미	기본값
auto	브라우저가 너비를 계산	auto
단위	px, em, cm 등 단위로 지정

• 블록요소와 인라인요소의 기본값

div {
  width: auto; /* 100% */
  height: auto; /* 0 */
}
span {
  width: auto; /* 0 */
  height: auto; /* 0 */
}

 

---

2. max-width, min-width, max-height, min-height

-1) max-width : 요소의 최대 가로 너비를 지정

-2) min-width : 요소의 최소 가로 너비를 지정

-3) max-height : 요소의 최대 세로 너비를 지정

-4) min-height : 요소의 최소 세로 너비를 지정

값	의미	기본값
단위	px, em, cm 등 단위로 지정	none
auto	브라우저가 너비를 계산

<!-- .parent 입력후 tab입력 -->
<div class="parent">
  <div class="child"></div>
</div>

.parent{
  width: 400px;
  height: 300px;
  border: 4px solid tomato;
  margin: 20px;
}
.child{
  max-width: 400px;
  min-width:200px;
  height: 200px;
  background:orange;
}

 

---

3. margin

•  요소의 '외부(바깥)여백'을 지정
•  단축속성
• 음수의 값을 사용할 수 있다.
•  margin-top, maring-bottom, margin-left, margin-right

값	의미	기본값
단위	px, em, cm 등 단위로 지정	0
auto	브라우저가 너비를 계산
%	부모 요소의 너비에 대한 비율로 지정

margin : 위 우 아래 좌;
margin : 위 [좌,우] 아래;
margin : [위,아래] [좌,우];
margin : [위,아래,좌,우];

.box{
	margin : 10px 20px 30px 40px;
	margin : 10px 20px 40px;
    margin : 10px 40px;
    margin : 10px;
}

 

---

4. margin- 중복(Collapse)

: 마진 특정 값들이 '중복'되어 합쳐지는 현상

1. 형제 요소들의 margin-top과 margin-bottom이 만났을 때( 형제 요소들 사이에 margin 중복)
2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때 ( 자식요소의 bottom이 부모요소에 영향 줌)
3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

- 마진 중복 계산법 : 마진 중복 현상이 발생시, 중복 값을 계산하는 방법

조건	요소A 마진	요소B 마진	계산법	중복 값
둘 다 양수	30px	10px	더 큰 값으로 중복	30px
둘 다 음수	-30px	-10px	더 작은 값으로 중복	-30px
각각 양수와 음수	-30px	10px	-30 + 10 = -20	-20px

 

---

5. padding

: 요소의 '내부(안) 여백'을 지정 (단축)

값	의미	기본값
단위	px, em, cm 등 단위로 지정	0
%	부모 요소의 너비에 대한 비율로 지정

padding : 위 우 아래 좌;
padding : 위 [좌,우] 아래;
padding : [위,아래] [좌,우];
padding : [위,아래,좌,우];

.box{
  padding : 10px 20px 30px 40px;
  padding : 10px 20px 40px;
  padding : 10px 40px;
  padding : 10px;
}

 

- 크기 증가 : 추가된 padding 값만큼 요소의 크기가 커지는 현상

<div>
  Hello world!
</div>

div {
  width: 100px;   /*100+ 20 + 20 = 140*/
  height: 100px;  /*100+ 20 + 20 = 140*/
  background: tomato;
  padding: 20px;
}

-1) 100 X 100 (px) 크기의 요소 만들기 ( 직접 계산 )

.box {
	width : 60px;  /* 60 + 20 + 20 = 100*/
	height : 80px;  /* 80 + 10 + 10 = 100*/
	background: red;  
	padding: 10px  20px;
}

-2) 자동 계산

.box {
	width : 100px;
	height : 100px; 
	background: red;  
	padding: 10px  20px;
    box-sizing : border-box;  /*자동 계산!*/
}

 

---

6. border

: 요소의 '테두리 선'을 지정(단축)

값	의미	기본 값
border-width	선의 두께	medium
border-style	선의 종류	none
border-color	선의 색상	black

- border 사용법

border : 두께 종류 색상;

.box{
	border: 1px solid red;
}

 

-1) border-width 

값	의미	기본 값
medium	중간 두께	medium
thin	얇은 두께
thick	두꺼운 두께
단위	px,em,cm 등 단위로 지정

border-width : 위 우 아래 좌;
border-width : 위 [좌,우] 아래;
border-width : [위,아래] [좌,우];
border-width : [위,아래,좌,우];

.box{
  border-width : 10px 20px 30px 40px;
  border-width : 10px 20px 40px;
  border-width : 10px 40px;
  border-width : 10px;
}

 

-2) border-style : 선 모양 

값	의미	기본값
none	선 없음	none
hidden	선 없음과 동일(table 요소에서 사용)
solid	실선(일반선)
dotted	점선
dashed	파선
double	두 줄선
groove	홈이 파여있는 모양(선)
ridge	솟은 모양(선, groove의 반대)
inset	요소 전체가 들어간 모양(선)
outset	요소 전체가 나온 모양(선)

 

border-style : 위 우 아래 좌;
border-style : 위 [좌,우] 아래;
border-style : [위,아래] [좌,우];
border-style : [위,아래,좌,우];

.box{
  border-style : 10px 20px 30px 40px;
  border-style : 10px 20px 40px;
  border-style : 10px 40px;
  border-style : 10px;
}

 

-3) border-color

값	의미	기본값
색상	선의 색상을 지정	black
transparent	투명한 선(요소의 배경색이 보임)

border-color : 위 우 아래 좌;
border-color : 위 [좌,우] 아래;
border-color : [위,아래] [좌,우];
border-color : [위,아래,좌,우];

.box{
  border-color : 10px 20px 30px 40px;
  border-color : 10px 20px 40px;
  border-color : 10px 40px;
  border-color : 10px;
}

 

- 크기 증가 : 추가된 border 값만큼 요소의 크기가 커지는 현상

.box{
  width: 100px; /*100 + 1 + 1 = 102*/
  height: 100px; /*100 + 1 + 1 = 102*/
  background: yellow;
  border: 1px solid orange;
  /*자동 계산 : box-sizing: border-box;*/
}

 

---

7. box-sizing

: 요소의 크기 계산 기준을 지정

값	의미	기본값
content-box	너비(width,height)만으로 요소의 크기를 계산	content-box
border-box	너비(width,height)에 안쪽 여백(padding)과 테두리선(border)를 포함하여 요소의 크기를 지정

 

---

8. display

: 요소의 박스타입(유형)을 설정

값	의미	특징
block	블록요소 (<div>)	아래로 쌓임
inline	인라인요소 (<span>)	옆으로 쌓임
inline-block	인라인-블록요소 (<input>)	옆으로 쌓이지만, 가로 세로 값 가질 수 있다
기타	table, table-cell, flex 등
none	요소의 박스타입이 없음(요소가 사라짐)

1. 인라인 요소(span)를 display: block으로

2. 블록 요소(div)를 display:inline으로

3. inline-block

<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
<input type="text" value="5">

input {
  display: inline-block;
  width: 100px;
  height: 20px;
  margin: 50px 0;
  pading: 10px 0;
}

input:nth-child(2) {
  display: none; /*존재하지 않음*/
  opacity: 0; /*투명*/
}

 

---

9. overflow    

: 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어(단축)

값	의미	기본값
visible	넘친 부분을 자르지 않고 그대로 보여줌	visible
hidden	넘친 부분을 잘라내고, 보이지 않도록 함
scroll	넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
auto	넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent{
  width: 300px;
  height: 250px;
  border: 4px solid;
  overflow: auto;
}
.parent .child{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

 

---

10. opacity

: 요소의 투명도를 지정

값	의미	기본값
숫자	0부터 1사이의 소수점 숫자	1

opacity: 투명도;

.half{
	opacity: 0.5; /* 반투명 */
}
.transparent{
	opacity: 0; /* 투명 */
}
.box{
	opacity: .75; /* 반투명 */
}

- 실습

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

.parent{
  width: 300px;
  height: 250px;
  background: cyan;
}
.parent .child{
  width: 150px;
  height: 100px;
  background: tomato;
  font-size: 50px;
  opacity: 1;
}
.parent .child:nth-child(1){
  opacity: 0;
}