1. 박스모델 1편, 박스모델 소개

1) 박스모델(Box-Model)

• 브라우저가 요소를 렌더링할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지한다. -> 이 영역을 '박스'라 표현
• CSS는 박스의 크기, 위치, 속성을 결정 가능
• 하나의 박스는 다음 4개의 영역으로 구성
  • 콘텐츠 영역
  • 안쪽 여백
  • 경계선 (테두리)
  • 바깥쪽 여백
    

2) 박스 각 영여그이 크기는 어떻게 정의하는 가

• 콘텐츠 영역 :width, height
• 안쪽 여백 : padding
• 바깥쪽 여백 : margin
• 테두리 : border-width

2. 박스모델 2편, margin padding 다루기

1) 다양한 경우의 수

• 여백은 상하좌우 4개의 면에 존재하는 영역
• 작성자는 각 면에 개별적으로 두께 정의할 수 있음
• 이를 위해 두 가지 방법 사용
  • 하위속성 정의하기
  • 여러 값을 한 번에 정의하기

2) 하위 속성 정의하기

• 상하좌우 여백을 정의하는 개별 속성들이 있음
  • padding-top, padding-bottom, padding-left, padding-right
  • margin-top,margin-bottom, margin-left, margin-right

3) 여러 값을 한 번에 정의하기

• padding과 margin은 네 면의 여백에 대한 단축속성
• 1개를 지정하는 경우 : 상하좌우
• 2개를 지정하는 경우 : 상하/좌우
• 3개를 지정하는 경우 : 상/좌우/하
• 4개를 지정하는 경우 : 상/우/하/좌

span{
display : inline-block;
width : 100px; height : 100px;
margin : 10px 20px 30px 40px;
			/*상 우 하 좌*/

3. 박스모델 3편, box-sizing

1) box-sizing

• 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.
• content-box : 기본값, 너비와 높이가 콘텍츠 영역만을 포함한다.
• border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함한다.

4. 박스모델 4편, background

1) backgroud

• 배경은 콘텐츠의 배경을 정의한다.
• 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의가능하다.
  • background-color : 배경 색을 정의한다
  • background-image : 배경 이미지를 정의한다
  • background-position : 배경 이미지의 초기 위치를 정의한다
  • background-size : 배경 이미지의 크기를 정의한다
  • background-repeat : 배경 이미지의 반복 방법을 정의한다
  • https://developer.mozilla.org/ko/docs/Web/CSS/background

float 그리고 clear

1) float

• 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 된다.
• 문서의 흐름에서는 제외되나, 필요한 만큼의 공간은 차지한다.
• none : 기본값, 원래 상태
• left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함
• right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함

2) clear

• float 요소 이후에 표시되는 요소가 float을 해제하여 float요소의 아래로 내려가게 할 수 있다.
  • none : 기본값, 아래로 이동되지 않음을 나타내는 키워드
  • left : float이 left인 요소의 아래로 내려가겠다
  • right : float이 right인 요소의 아래로 내려가겠다
  • both : float이 left 및 right인 요소의 아래로 내려가겠다.

📖출처

https://www.youtube.com/watch?v=576Bt8CVVJA&list=PLFeNz2ojQZjuRTQGNUf6ZTz8-YRLgFFvZ