[CSS] 박스 모델

 

CSS 박스 모델 (Box Model)

 

1. content
2. padding
3. border
4. margin

 
 
박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다. 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다.
 

영역	설명	속성
margin	요소의 외부 여백	margin, margin-top, right, bottom, left
border	요소의 테두리	border, border-top,right, bottom, left
padding	요소의 내부 여백	padding, padding-top, right, bottom, left
content	요소의 내용	width, height

 
 

---

 

1. margin 영역 ⭐⭐⭐⭐⭐

 

•  margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당한다.
• 박스 모델은 사각형 모양이라서 각 방향에 해당하는 속성이 독립적으로 존재

 

- 속성값 1개 ✅
margin: <top, right, botton, left>

- 속성값 2개- 상하
margin: <top & bottom><right & left>

- 속성값 3개
margin: <top><right><bottom> => 생략된 left의 값은 right와 같은 값

- 속성값 4개 (상하좌우)
margin: <top><right><bottom><left>

 

---

 

🔎 margin 겹침 현상

 
margin 영역을 다루다 보면 흔하게 겪는 일 중 하나가 바로 margin 겹침 현상이다. margin 겹침 현상은 인접한 margin-bottom과 margin-top에 속성을 적용할 경우 둘 중 더 큰 값으로 병합되는 것을 말한다. 마진 겹침 현상에는 형제간에 발생하는 마진 겹침 현상, 부모 자식간에 발생하는 마진 겹침 현상이 있다. 마진 겹침 현상은 상하에서만 일어나는 현상이다. Block 요소의 성격을 갖고 있는 태그에서만 발생한다. 

ex) 어떤 두 요소가 있는데 첫 번째 요소에는 margin-bottom이 50px이 적용됐고, 두 번째 요소에는 margin-top이 30px이 적용됐다고 가정해 보자.

두 요소 사이의 간격은 50px과 30px을 합한 80px이 될 것 같지만, 실제로는 50px이 적용된다. 이 현상이 바로 margin 겹침 현상이다. 이는 같은 레벨(형제 관계)에 있는 요소들의 margin 영역이 중첩되면 더 큰 값을 가진 margin 영역으로 병합되어 출력되는 현상이다.

 

ex) 부모 자식간에 발생하는 마진 겹침 현상, 부모 박스 안에 자식 박스의 margin-top을 100px 줬는데 자식 박스와 부모 박스 사이에 100px 간격이 생기는 것이 아니라 부모 박스에도 영향을 줘서 외부로 마진이 생긴다. 이때 position:absolut를 추가하면 부모 자식 간에 발생하는 마진 병합 현상이 사라지고 자식 박스만 아래로 움직인다. 
 

---

 

2. border 영역 ⭐⭐⭐

 

•  border 영역은 margin보다 안쪽에 있으며, 요소의 테두리를 담당한다.
•  margin 영역과 똑같이 위쪽, 아래쪽, 오른쪽, 왼쪽 방향에 해당하는 속성이 있다.
• 모든 방향을 한 번에 똑같은 값으로 적용하고 싶다면 border 속성을 사용하면 된다.
   

[형식] border: <border-width><border-style><color>

 

 

1) border-width 속성

 

• 테두리 굵기 지정
• 속성값으로는 단위를 포함한 크기를 사용
   
  ex) 2px

 

---

 

2) border-style 속성

 

•  테두리 모양 지정
   

속성값	설명
none	테두리 그리지 않는다.
hidden	테두리를 화면에서 감춘다.
solid ✅	실선
double	이중 실선
dotted	점선
dashed	dotted보다 긴 점선
groove	테두리가 파인 것 처럼 그린다.
ridge	테두리가 튀어나온 것 처럼 그린다.
inset	테두리 요소가 파인 것처럼 그린다.
outset	테두리 요소가 튀어나온 것처럼 그린다.

 
 
 

---

 

3. padding 영역 ⭐⭐⭐⭐⭐

 

• margin, border 영역보다 안쪽에 있으며 요소의 내부 여백을 담당한다.
• 속성의 사용 방법이나 속성값의 적용 원리는 margin 영역과 똑같다.
   

- 속성값 1개
margin: [top, right, botton, left]

- 속성값 2개 (상하)
margin: [top & bottom][right & left]

- 속성값 3개
margin: [top][right][bottom] => 생략된 left의 값은 right와 같은 값

- 속성값 4개 (상하좌우)
margin: [top][right][bottom][left]

 
 

---

 

4. content 영역

 

•  content 영역은 시작 태그와 닫는 태그 사이에 사용된 콘텐츠가 속하는 영역이다.
• 그래서  다른 박스 모델의 구성 요소와는 다르게 content 영역은 content 영역 자체를 다루는 속성은 없다.
• 텍스트 관련 속성이면 모두 content 영역을 제어하는 속성이다.
• content 영역에 영향을 주는 width 속성과 height 속성이 있다.

 

 

1) width와 height 속성 ⭐⭐⭐⭐⭐

 

• width 속성 : content 영역의 너비
• height 속성 : content 영역의 높이
• 단위는 주로 px, %(반응형)

 

---

 2) box-sizing 속성 ⭐

 
width와 height 속성은 content 영역에 직접 영향을 주는 속성이라서 때로는 의도치 않게 작동한다고 느껴질 때가 있다. 코드를 실행해 개발자 도구로 요소의 너비와 높이를 확인해 보면 조금 다른 결과가 나타난다. 각각 100px을 적용했는데도 웹 브라우저에 표시된 요소의 너비와 높이는 122px이다.

그 이유는 웹 브라우저가 요소를 화면에 렌더링할 때 border, padding, content 영역의 너비와 높이를 종합적으로 계산하기 때문이다. margin 영역을 제외하고 전부 포함한 크기가 된다. 

그러면 어떤 요소를 화면에 표시할 때 처음 의도한 것처럼 100px로 표시하려면 어떻게 해야 할까?

가장 간단한 방법은 width 속성값을 border, padding 영역 크기를 제외한 78px로 설정한다. 하지만 매번 다시 계산해야 한다는 불편함이 있다.


✅ 그래서 content 영역을 제어할 때 box-sizing 속성을 사용한다. box-sizing을 설정하지 않으면 기본적으로 밖에 생긴다.

 

속성값	설명
content-box (기본값)	width, height 속성의 적용 범위를 content 영역으로 제한 (외부)
⭐️ border-box	width, height 속성의 적용 범위를 border 영역으로 제한 (내부)

 

- 대부분 border-box 사용 ⭐️
- border-box는 border까지 합한 값
- 패딩과 border는 요소 안쪽으로 그려지고, 안에 있는 콘텐츠는 작아진다.
- 내가 지정한 너비와 높이를 맞추고 싶다면 사용한다.

 

---

3) outline

 

•  요소 안쪽이 아니라 바깥에 border를 그려할 경우 outline 사용

---

 

 

5. 박스 모델의 성격과 display 속성

 

1) 블록 성격

hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 만한다. 그래서 여러 번 사용하면 무조건 줄 바꿈된다.
 

---

 

2) 인라인 성격

a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말한다. 그래서 여러 번 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치된다.
 

---

 

3) 인라인 블록 성격

인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말한다. 그래서 img 태그를 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치된다.
 
 

---

 

4) 블록 vs 인라인 vs 인라인 블록

블록 성격이나 인라인 블록 성격은 width, height, margin, padding 속성이 전부 적용되지만, 인라인 성격은 width, height 속성은 적용되지 않고 padding과 margin 속성은 각각 왼쪽과 오른쪽 방향만 적용된다. 실제로 인라인 성격인 span 태그에 width 속성이나 height 속성을 지정하면 너비와 높이가 설정되지 않는다. padding 속성과 margin 속성도 위쪽과 아래쪽은 적용되지 않는다.
 
 

---

 

5) display 속성 ⭐

 
박스 모델의 성격은 display 속성을 사용하면 변경할 수 있다. 속성값으로는 block, inline, inline-block을 사용한다. none을 사용하면 브라우저 화면에서 HTML 요소를 제거한다.
 
 
ex) 블록 성격인 태그를 인라인 성격으로 바꾸고 싶다면 display 속성값을 inline으로 지정하면 된다. 반대로 인라인 성격인 태그를 블록 성격이나 인라인 블록 성격으로 바꾸고 싶다면 display 속성값을 block 또는 inline-block으로 지정하면 된다.
 
 

---

 

visiability: hidden; vs display: none; 차이점 ☑️

 

- display: none

• HTML요소를 화면에 출력하지 않는다.

 
- visibility: hidden

• 요소를 화면에 출력하지 않지만, 공간은 유지한다.
   
   

---

 

opacity 속성

 
HTML 요소의 투명도를 설정할 수 있다. (0.0 ~ 1.0)
 

• 0.0: 투명
• 1.0: 불투명