박스 모델이란?

content: 콘텐츠가 표시되는 영역 width, height(진짜 내용을 담고 있는 핵심 박스)
padding: 콘텐츠와 테두리(border)사이의 여백 (공백 영역)
border : padding 과 margin 사이의 테두디 기본값음 0px 이지만 보더 영역이 있다
margin: 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 박스 옆에 또 다른 박스 등 여러개의 박스가 있다면 서로 멀어지게 해줄수 있는 영역이다

크기

width, height

• 둘 다 기본값 auto
• 둘 다 상속은 사용되지않음
• 🚨 HTML 요소가 인라인 애들은 width , height 애들이 먹지 않는 다는 것을 명심하자

.block{
	width:300px;
    height: 100px;
}

min-height,min-width,max-height,max-width

-width 와 height 와 마찬가지로 상속 사용 안되고 사용법도 비슷하다

.block{
	width : 50%
    min-width: 300px
    }

이렇게 주게 된다면 화면을 계속 줄여 나가도 계속 300px을 유지
min,max (표준성)이 부족하므로 반응형 사이트로는 얘네를 이용하자

margin

• 가장 바깥 쪽에 여백을 만들 수 있는 애라고 이해하자
• margin도 단축 속성으로 한 줄에 작성이 가능 (top,right,bottom,left) 시계 방향 ⏱⌚
• 얘도 상속은 사용되지 않는다

/ 네 면 모두 적용 /
margin: 1em;
margin: -3px;

/ 세로방향 | 가로방향 /
margin: 5% auto;

/ 위 | 가로방향 | 아래 /
margin: 1em auto 2em;

/ 위 | 오른쪽 | 아래 | 왼쪽 /
margin: 2px 1em 0 auto;

/ 전역 값 /
margin: inherit;
margin: initial;
margin: unset;

🎈margin : 50% 이런식으로 작성하게되면 이 %지는 부모의 width 값의 50% 가 기준이된다 주의가 필요하다 🎈

마진 상쇄 (margin collapsing)

• 마진 상쇄 , 마진 겹침 , 마진 중복 등등으로 불리운다

• 여러 블록 요소(탑, 바텀에만 생긴다는 것을 의미) 들이 위/아래 margin이 경우에 따라 가장큰 크기를 가진 margin으로 결합(상쇄) 되는 현상

  1.일어나는 현상

• 인접형제 : 두 형제 요소 위/아래 발생

  

2.부모- 자식요소 간

• 부모 블록에 border , padding , inline content 가 없어서 부모와 자식의 margin-top이 만나는 경우
• 부모 블록에 border, padding , inline content가 없고
  부모-자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom 만나는 경우

3. 빈 블록 (내부에 컨텐츠가 없어서 생기는 경우)

• border , padding , cotent가 없고 height 또한 존재하지 않으면 , 해당 블록의 margin-top과 margin-bottom이 상쇄된다

여백 (padding)

• 마진처럼 숏 핸드 속성을 가지고 있음

• 단축 속성으로 한 줄에 작성이 가능 (top,right,bottom,left) 시계 방향 ⏱⌚

• 패딩은 패딩 상쇄 같은거 없음 동일하게 동작함

/ 네 면 모두 적용 /
padding: 1em;

/ 세로방향 | 가로방향 /
padding: 5% 10%;

/ 위 | 가로방향 | 아래 /
padding: 1em 2em 2em;

/ 위 | 오른쪽 | 아래 | 왼쪽 /
padding: 5px 1em 0 2em;

/ 전역 값 /
padding: inherit;
padding: initial;
padding: unset;

🎈padding도 50% 이런식으로 작성하게되면 이 %지는 부모의 width 값의 50% 가 기준이된다 주의가 필요하다 🎈

border

• 얘도 숏 핸드 속성 시계 방향인것은 동일하다

/ 스타일 /
border: solid;

/ 너비 | 스타일 /
border: 2px dotted;

/ 스타일 | 색 /
border: outset #f33;

/ 너비 | 스타일 | 색 /
border: medium dashed green;

/ 전역 값 /
border: inherit;
border: initial;
border: unset;

1. border -style
   -테두리의 스타일을 바꿀 수 있다
2. border-width
   • 테두리의 두께를 설정한다
3. border -color
   • 말 그대로 테두리의 색상을 설정한다

👿color 나 width 아무리 작성하여도 border-style : none 이면 적용이 되지않는다는 점을 주의하자 (필수값은 아님)

outline

보기에는 border 와 비슷해 보이지만 border 는 박스모델에 해당되지만 outline 영역을 차지하고 있지 않고 그냥 모양만 내준다고 생각하자

border - radius

도형을 만들어주는 거라고 생각하면 쉽다
테두리 영역을 둥글게 만들어주는 역할을 한다
marjin , padding 처럼 4가지 값이 한번에 입력 가능 꼭지점이 왼위-왼오-아래 왼 -아래 오른 쪽

box-sizing

• 너비와 높이를 계산하는 방법을 지정한다

사용할 수 있는 값

• context-box :기본값 , 실제 길이가 달라진다
  width 와 height의 값을 content 영역에만 적용이 되는 것이다

• border-box :

빨간색 부분으로 표시된 곳 까지 요소의 크기를 측정해 준다

-요소의 크기는 너비 = 테두리 + 안쪽 여백 + 컨첸츠 너비, 높이 = 테두리 + 안쪽여백 + 콘텐츠 높이로 계산

모든 요소를 border-box로 설정하겠다는 설정

* {
   box-sizing : border-box ; 
  }