CSS #6 -박스모델-

1. width, height

width와 height

<div></div>

div{
width:auto;
height:auto;
background: tomato;
}

auto값은 자동으로 100%의 값으로 지정된다.

💡1. in-line요소는 가로사이즈와 높이사이즈가 '0'에서 출발을 한다.
그러므로 auto는 0으로 설정되기 때문에 안나온다.
2. 인라인요소는 기본적으로 가로와 세로 값을 갖을 수 없다.

총정리
1. 블록요소일때와 인라인요소일때 가로사이즈와 세로사이즈가 들어가 있는 기본값이 다르다.
2. 블록요소는 레이아웃에 특화, 인라인요소는 텍스트에 특화되어 있다.

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

---

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

1. max-width

속성값: 단위와 auto가능
기본값:none
우리가 원하는 만큼 최대치로 늘려서 쓸 수 있지만 max-width를 설정하면 최대치를 설정할 수 있다.

2. min-width

속성값: 단위와 auto가능
기본값: 0이다.

3. max-height

속성값:단위와 auto
기본값:0

4. min-height

속성값:단위와 auto
기본값:none

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

parent{
width:500px;
height:300px;
border:4px solid tomato;
margin: 20px;
}

.child{
 width:100%;
height:200px;
background:orange;
}

여기서 width값이 auto여도 100%이기 때문에 auto로 바꿔도 변화는 없다.
또한 auto면 기본적으로 들어가 있는 설정이기 때문에 굳이 설정을 따로 해줄필요가 없기에 쓰지않아도 상관은 없다.

parent{
width:500px;
height:300px;
border:4px solid tomato;
margin: 20px;
}

.child{
max-width:400px;
min-width:200px;
height:200px;
background:orange;
}

위와 같이 최대와 최소 값을 설정해 놓으면, 부모요소가 작아지더라도 최대와 최소에 맞게만 작아지고 커진다.
이렇게 제한선을 둘 수 있다.

---

3.margin

1.요소의 '외부(바깥)여백'을 지정, 음수의 값도 사용할 수 있다.
2. 또한 단축 속성이다.
💡단축 속성이란: 좌우상하의 모든 값을 한번에 설정할 수 있다는 것이다.
3. 단위:px,em,%등 사용가능하며, auto:브라우저가 너비를 계산, %:부모 요소의 너비에 대한 비율로 지정. 기본값은 0이다.

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

.parent{
width:400px;
height:200px;
border:4px solid red;
}
.child{
width:100px;
height:100px;
border: 4px solid; 
margin:50%;
}

margin에서 %요소를 입력한다면, 부모요소의 가로너비에 따른 %가 자식요소의 margin요소에 들어가게 된다.

---

4. margin 중복

병합, collapse로 불리기도 한다.
1. 형제요소들의 margin-top과margin-bottom이 만났을 때
2. 부모요소의 margin-top과 자식요소의margin-top이 만났을 때
3. 부모요소의 margin-bottom과 자식요소의margin-bottom이 만났을 때

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

.parent{
width:300px;
height:200px;
background:cyan;
1. margin-top:50px;
}
.child{
width:100px;
height:100px;
background:tomato;
margin-top:50px;
}

1.의 경우 부모와 자식요소가 같이 부모요소에 맞춰 위부터 50px이 아래로 내려가 있는 것을 볼 수 있다.
2. 처럼 자식의 요소에 margin-top이 들어가더라도 자식요소와 부모요소의 면이 맞춰있다면 1.과 같은 결과가 나온다.(margin-bottom도 마찬가지다.)

💡마진중복계산법

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

---

5. padding

1. 요소의 '내부(안) 여백'을 지정, 단축이다.
2. 단위:px,em,%등 사용가능하며, auto:브라우저가 너비를 계산, %:부모 요소의 너비에 대한 비율로 지정. 기본값은 0이다.

1. padding의 크기증가

   💡padding의 크기증가에 대해서 직접 계산해서 보거나 자동으로 하는 방법은 box-sizing:border-box;라고 입력하면 브라우저가 스스로 계산해준다. 또한 box-sizing의 값에 content-box사이즈가 자동으로 들어간다.

---

6. border

1.border

요소의 테두리선을 만들 때 쓰며 단축속성으로 된다.

💡속성값

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

ex) 'border: 두께 종류 색상;'의 형태를 갖는다.

2. border-width

💡속성값

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

3. border-style

선의 종류를 지정, 단축이자 개별속성이다.

💡속성값

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

4. border-color

선의 색상을 지정

💡속성값

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

우리가 알고 있던 색상의 값을 쓰면 된다.

💡기타속성1

값	의미	사용값
border-top	위쪽 선	두께 종류 색상
border-top-width	위쪽 선의 두께	두께
border-top-style	위쪽 선의 종류	종류
border-top-color	위쪽 선의 색상	색상
border-bottom	아래쪽 선	두께 종류 색상
border-bottom-width	아래쪽 선의 두께	두께
border-bottom-style	아래쪽 선의 종류	종류
border-bottom-color	아래쪽 선의 색상	색상

여기border-left도 같은 방식으로 존재한다.
1. 여기서도 margin중복과 padding 크기증가와 같이 border도 외곽의 요소이기에 크기가 늘어나는 만큼 전체적인 크기가 늘어나게 되어있다.
2.만약 예를들어 가로세로 100px짜리 박스를 만들고 싶은데 직접 계산해서 가로세로 98px로 두고 1px선으로 두는게 아니라 box-sizing: border-box속성을 이용하면 된다.이렇게 하면 자동으로 계산하게 되는 것이다.(밑에서 보자)

---

7. box-sizing

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

💡속성값

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

---

1. content-box
2. padding-box
3. border-box

<div class="box"></div>

.box{
width:200px;
height:200px;
background:orange;
padding:40px;
border: 10px solid red;
}

여기서 863*300사이즈의 박스가 content-box이다.
padding-box도 있지만 브라우저 호환성이 많이 떨어져서 문제가 생긴다.

---

8. display

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

💡속성값

값	의미	기본값
block	블록요소(div태그 등)
inline	인라인요소(span태그 등)
inline-block	인라인블록요소(input태그 등)W,H,M,P값을 갖을 수 있다.(block요소와 같이)
기타	table, table-cell,flex 등
none	요소의 박스 타입이 없음(요소가 사라짐), 화면에서 특성한 요소가 사라지게 만들때 사용한다.

<span></span>

span{
display:block;
width:100px;
height:100px;
background:tomato;
}

1. input은 기본적으로 display:inline-block의 요소를 가지고 있다.
2. opacity를 뒤에서 배우지만 opacity값은 기본적으로 '1'의 값을 가지고 있으며, display:none과 다르게 opacity의 경우 공간은 비운채로 맞게 정렬되어 있지만 display:none의 경우는 아예 그 공간 자체에 존재하지 않는 것 처럼 보인다.

---

9.overflow

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

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

1. scroll은 넘치거나 넘치지 않아도 강제로 스크롤을 만들어낸다. 하지만 auto는 넘치면 스크롤이 생기고 넘치지 않는다면 생기지 않는다.

💡tip. 박스내부의 글자가 가운데로 정렬하게 만드는 방법

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

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

여기서 overflow의 값을 부모 요소에 사용한다.

---

10. opacity

요소의 투명도를 지정

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

💡사용법

.half{
opacity:0.5; /*50%투명도, 반투명*/
}
.transparent{
opacity:0; /*0%투명도, 투명*/
}
.box{
opacity:0.75 /*75%투명도, 반투명*/
}

여기서 0.5로 안쓰고 .5라고 써도 된다.
여기서 display:none과 opacity에 대해서 헷갈려하지만, opacity화면에 존재하지만 보이지 않는 것이고 display:none은 화면에 보여지는 특성 자체가 사라지면서 존재하지 않는 개념에 가깝다.
💡확인해보고 싶다면 배경위에 오는 박스두개를 만든다음에 opacity와 display:none으로 확인해보면 된다.

---

마지막으로

오늘은 박스모델에 대해서 배워봤습니다. 박스모델에서 중요한 개념이 정말 많은 것 같습니다.
앞으로도 계속해서 css에 대해서도 배워보겠습니다.