박스 모델

👉🏻 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소(element)들이 하나의 박스가 됨 
👉🏻 박스는 항상 직사각형이며 너비(width), 높이(height) 가짐 CSS를 이용해 속성과 값으로 박스 크기를 설정할 수 있음

 

1. 박스의 종류 : 줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline)

• block 박스 : 줄 바꿈이 되며 크기를 지정할 수 있는 박스
  • ex. <div>, <p>
• inline 박스 : 줄 바꿈이 일어나지 않고 크기를 지정할 수 없는 박스 
  • ex. <span>
• inline-block 박스 : 위 두 가지의 특징이 섞인 줄 바꿈이 일어나지 않으면서 크기를 지정할 수 있는 박스

span {
  background: yellow;
  display: inline-block;
  width: 100px;
  height: 100px;
}

➡️ display 속성에 inline-block 값을 넣어주면 전체적인 줄바꿈은 일어나지 않으면서 자체적으로 크기를 가짐

 

2. 박스의 구성요소 

• border(테두리)
  : 테두리는 심미적 용도 외에도 매우 의미있게 사용함 
     각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 함

p {
  border: 1px solid red;
 }

👉🏻 각 속성이 적용된 값은 순서대로 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
👉🏻 이외에도 테두리 스타일에 대한 다양한 세부 속성들이 존재함 

 

• margin(바깥 여백)
  

p {
  margin: 10px 20px 30px 40px
}

👉🏻 각 속성이 적용된 값은 top, right, bottom, left 시계방향!

👉🏻 크롬의 개발자 도구를 이용해 margin 영역이나 다른 영역들도 확인 가능

 

p {
  margin: 10px 20px;
}


p {
  margin: 10px;
}

👉🏻 값을 생략하면 생략된 값이 마주 보고 있는 방향의 값으로 자동 지정!
      - top과 bottom이 마주 보고 있으므로, bottom의 값이 10px로 지정
      - left와 right가 마주 보고 있으므로, left의 값이 20px로 지정

👉🏻 만약 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용

 

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

👉🏻 위와 같이 방향을 특정한 속성도 존재함 (padding 에 대해서도 동일 적용)

 

p {
  margin-top: -2rem;
}

👉🏻 바깥 여백은 음수 값도 지정 가능, 다른 요소와의 간격이 줄어든다.

 

• padding(안쪽 여백)
  : border 를 기준으로 박스 내부의 여백 지정, 값의 순서에 따른 방향은 margin과 동일

p {
  padding: 10px 20px 30px 40px;
}