CSS box model

한 페이지 내 모든 콘텐츠는 고유 영역을 가지고 있고, 이를 박스(box)라고 한다. 박스는 너비(width), 높이(height), 테두리(border), 여백(margin/padding) 등 다양한 속성을 가지고 있다.

 

---

박스모델 기초

📌 block vs. inline

• block
  줄바꿈이 되는 박스, 대표적으로 <div>가 있다. 
• inline
  줄바꿈이 되지 않는 박스. 대표적으로 <span>이 있다. inline은 콘텐츠의 크기에 따라 그 크기가 결정되므로, width나 height로 별도 크기를 지정할 수 없다.
• inline-block
  줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 갖도록, inline 박스에 'display:inline-block' 속성을 추가해 사용할 수 있다. 다른 요소의 옆으로 붙으면서 자체적으로 고유의 크기를 갖는다.

	block	inline	inline
줄바꿈 여부	O	X	X
기본적으로 갖는 너비 width	100%	콘텐츠 크기만큼	콘텐츠 크기만큼
width, height 사용 가능 여부	O	X	O

 

 

---

박스구성 요소

이 이미지만 기억하면 된다!

📌 Border, 테두리

p {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

p {
  border: 1px solid red;
}

위의 방식처럼 속성을 하나하나 지정해 줄 수도, border라는 속성으로 묶은 뒤 순서대로 width, style, color 값을 줄 수도 있다. border는 심미적인 용도 외에도 개발 과정에서 각 영역이 차지하는 크기를 파악하는 용도로 사용한다.

• border-widrh : px등의 길이 단위를 쓸 수도, thin, medium, thick 등의 단어를 쓸 수도 있다.
• border-style : solid(실선), dotted(점선), dashed(대시) 등 선의 스타일 적용. (자세히 알아보기)
• border-color : 선의 색상. 위의 red 말고도 색을 사용하는 여러 방법 적용 가능.
• border-radius : 박스 모서리를 둥글게 만들기. (자세히 알아보기)
• box-shadow : 박스에 그림자 효과 추가하기. (자세히 알아보기)

 

📌 margin, 테두리 바깥쪽 여백

/* 순서대로 top, right, bottom, left. top부터 시계방향 */
p {
  margin: 10px 20px 30px 40px;
}

/* top,bottom이 10px, left,right가 20px */
p {
  margin: 10px 20px; 
}

/* 모든 margin이 10px */
p {
  margin: 10px;
}

/* 특정 방향을 지정 */
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

margin은 속성값에 순서대로 top, right, bottom, left를 지정할 수 있으며, 보기와 같이 다른 형식으로도 값을 넣을 수 있다. 음수값을 지정할 수도 있다. 다른 요소와의 간격이 줄어들며, 극단적으로 적용하면 화면에서 사라지거나 다른 요소와 겹치게 만들 때 사용한다.

 

📌 padding, 테두리 안쪽 여백

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

border를 기준으로 박스 내부의 여백을 지정한다. 값을 지정하는 순서나 방식은 margin과 동일하다.