1. Box Model

01. 넓이 & 높이

-1. width Property

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

-2. height Property

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

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

span{
    width : auto; //0
    height : auto; //0
}

-3. max-width

• 요소의 최대 가로 너비를 지정
• 값(단위) 의미(px, em, %, 등 단위로 지정) 기본값(none)
• 값(auto) 의미(브라우저가 너비를 계산)

-4. min-width

• 요소의 최소 가로 너비를 지정
• 값(단위) 의미(px, em, %, 등 단위로 지정) 기본값(0)
• 값(auto) 의미(브라우저가 너비를 계산)

-5. max-height

• 요소의 최대 세로 너비를 지정
• 값(단위) 의미(px, em, %, 등 단위로 지정) 기본값(none)
• 값(auto) 의미(브라우저가 너비를 계산)

-6. min-height

• 요소의 최소 세로 너비를 지정
• 값(단위) 의미(px, em, %, 등 단위로 지정) 기본값(0)
• 값(auto) 의미(브라우저가 너비를 계산)

<div class="parent">
	<div class="child"></div>
</div>
.parent{
    // width : 500px;
    width : 100px;
    height : 300px;
    border : 4px solid tomato;
    margin : 20px;
}
.child{
    width : 100%;
    max-width : 400px; // 최대 400px 이라서 부모가 400px 보다 커져도 더 커지지 못함
    min-width : 200px; // 최소 200px 이라서 부모가 200px 보다 작아져도 더 작아지지 못함
    height : 200px;
    background : orange;
  }

02. margin & padding

-1. margin

• 요소의 '외부(바깥)여백'을 지정, 단축
• 음수 값(Negative Values)을 사용할 수 있다.
• 값(단위) 의미(px, em, cm 등 단위로 지정) 기본값(0)
• 값(auto) 의미(브라우저가 너비를 계산)
• 값(%) 의미(부모 요소의 가로 너비에 대한 비율로 지정)
• margin : top right bottom left; => margin : 10px 20px 30px 40px;
• margin : top [left,right] bottom; => margin : 10px 20px 40px;
• margin : [top,bottom][left,right] => margin : 10px 40px;
• margin : [top,bottom,left,right] => margin : 10px;

<div class="parent">
	<div class="child"></div>
</div>
.parent{
	width : 400px;
	height : 200px;
	border : 4px sold red;
}
.child{
	width : 100px;
	height : 100px;
	border : 4px solid;
	margin : 50%; // 부모 요소의 가로너비에 대한 비율 (200px)
}

01-01. margin-top

• 요소의 '외부(바깥) 위쪽 여백'을 지정, 개별
• margin-top : 10px;

01-02. margin-right

• 요소의 '외부(바깥) 오른쪽 여백'을 지정, 개별
• margin-right : 20px;

01-03. margin-bottom

• 요소의 '외부(바깥) 아래쪽 여백'을 지정, 개별
• margin-bottom : 30px;

01-04. margin-left

• 요소의 '외부(바깥) 왼쪽 여백'을 지정, 개별
• margin-left : 40px;

01-05. 마진 중복(병합, Collapse)

• 마진의 특정 값들이 '중복'되어 합쳐지는 현상
• 형제 요소들의 margin-top과 margin-bottom이 만났을 때
• 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
• 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때
• '마진 중복'은 버그(오류)가 아닙니다. 현상을 우회하거나 응용할 수 있습니다.
• 마진 중복 계산법
  • 마진 중복 현상이 발생시, 중복 값을 계산하는 방법
  • 둘다양수 A(30px) B(10px) : 더 큰 값으로 중복 : 중복값(30px)
  • 둘다음수 A(-30px) B(-10px) : 더 작은 값으로 중복 : 중복값(-30px)
  • 각각 양수와 음수 A(-30px) B(10px) : -30 + 10 = -20 : 중복값(-20px)

-2. padding

• 요소의 '내부(안) 여백'을 지정, 단축
• 값(단위) 의미(px, em, cm 등 단위로 지정) 기본값(0)
• 값(%) 의미(부모 요소의 가로 너비에 대한 비율로 지정)
• padding : top right bottom left; => padding : 10px 20px 30px 40px;
• padding : top [left,right] bottom; => padding : 10px 20px 40px;
• padding : [top,bottom][left,right] => padding : 10px 40px;
• padding : [top,bottom,left,right] => padding : 10px;

02-01. padding-top

• 요소의 '내부(안) 위쪽 여백'을 지정, 개별
• padding-top : 10px;

02-02. padding-right

• 요소의 '내부(안) 오른쪽 여백'을 지정, 개별
• padding-right : 20px;

02-03. padding-bottom

• 요소의 '내부(안) 아래쪽 여백'을 지정, 개별
• padding-bottom : 30px;

02-04. padding-left

• 요소의 '내부(안) 왼쪽 여백'을 지정, 개별
• padding-left : 40px;

02-05. 크기 증가

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

<div></div>
div{
	width : 100px;
	height : 100px;
	padding : 10px 20px; // 이렇게 되면 width & height의 크기가 각각 		40px, 20px 증가
}
// 100 x 100 크기 직접 계산!
div{
	width : 60px;
	height : 80px;
	padding : 10px 20px;
}
// 크기가 커지지 않도록 자동 계산!
div{
	width : 100px;
	height : 100px;
	padding : 10px 20px;
	box-sizing : border-box; // size는 커지지 않지만 내부 여백은 적용 됨
}

03. border

• 요소의 '테두리선'을 지정, 단축
• 값(border-width) 의미(선의 두께(너비)) 기본값(medium)
• 값(border-style) 의미(선의 종류) 기본값(none)
• 값(border-color) 의미(선의 색상) 기본값(black)
• border : 두께 종류 색상;

.box{
	border : 1px solid red;
}

-1. border-width

• 선의 두께(너비)를 지정, 단축, 개별
• 값(medium) 의미(중간 두께) 기본값(medium)
• 값(thin) 의미(얇은 두께)
• 값(thick) 의미(두꺼운 두께)
• 값(단위) 의미(px, em, cm 등 단위로 지정), 권장
• border-width : top right bottom left; => border-width : 10px 20px 30px 40px;
• border-width : top [left,right] bottom; => border-width : 10px 20px 30px;
• border-width : [top,bottom][left,right]; => border-width : 10px 40px;
• border-width : [top,bottom,left,right]; => border-width : 10px;

-2. border-style

• 선의 종류를 지정, 단축, 개별
• 값(none) 의미(선 없음) 기본값(none)
• 값(hidden) 의미(선 없음과 동일(table 요소에서 사용)) 기본값(none)
• 값(solid) 의미(실선(일반선)) 기본값(none)
• 값(dotted) 의미(점선) 기본값(none)
• 값(dashed) 의미(파선) 기본값(none)
• 값(double) 의미(두 줄선) 기본값(none)
• 값(groove) 의미(점선) 기본값(none)
• 값(ridge) 의미(솟은 모양(선, groove의 반대)) 기본값(none)
• 값(inset) 의미(요소 전체가 들어간 모양(선)) 기본값(none)
• 값(outset) 의미(요소 전체가 나온 모양(선)) 기본값(none)
• border-style : top right bottom left; => border-style : solid dotted double inset;
• border-style : top [left,right] bottom; => border-style : solid dotted inset;
• border-style : [top,bottom][left,right]; => border-style : solid inset;
• border-style : [top,bottom,left,right]; => border-style : solid;

-3. border-color

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

-4. 기타속성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 : 위쪽 선 : 두께 종류 색상
• border-left-width : 위쪽 선의 두께 : 두께
• border-left-style : 위쪽 선의 종류 : 종류
• border-left-color : 위쪽 선의 색상 : 색상
• border-right : 아래쪽 선 : 두께 종류 색상
• border-right-width : 아래쪽 선의 두께 : 두께
• border-right-style : 아래쪽 선의 종류 : 종류
• border-right-color : 아래쪽 선의 색상 : 색상

-5. 크기증가

• 추가된 border 값만큼 요소의 크기가 커지는 현상
  • 직접 계산
  • box-sizing : border-box;

04. box-sizing

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

05. display

• 요소의 박스 타입(유형)을 설정
• 값(block) 의미(블록요소(div Tag 등))
• 값(inline)) 의미(인라인요소(span Tag 등))
• 값(inline-block) 의미(인라인-블록요소(input Tag 등))
• 값(기타) 의미(table, table-cell, flex 등)
• 값(none) 의미(요소의 박스 타입이 없음(요소가 사라짐))

*추가, text 정중앙 정렬
div{
	display : flex;
	justfy-content : center;
	align-items : center;
}

06. overflow & opacity

-1. overflow

• 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어, 단축
• 값(visible) 의미(넘친 부분을 자르지 않고 그대로 보여줌) 기본값(visible)
• 값(hidden) 의미(넘친 부분을 잘라내고, 보이지 않도록 함)
• 값(scroll) 의미(넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함)
• 값(auto) 의미(넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용하여 볼수 있도록 함)

-2. opacity

• 요소의 투명도를 지정
• 값(숫자) 의미(0부 1사이의 소수점 숫자) 기본값(1)