[CSS] 2. BOX 모델 (box-sizing: border-box)

👉 컨텐츠(Content): 텍스트, 이미지 등

👉 테두리(Border): 요소 주위의 선, 여전히 요소 내부에 있음
      border: 5px solid black; 이 때 그려지는 테두리 선이 border 라인 이다

 

👉 패딩(Padding): 컨텐츠 주위의 보이지 않는 공간, 요소 내부에 있음

      border 와 컨텐츠 사이의 공간이다      

👉 마진(Margin): 요소 외부의 공간, 요소들 사이의 공간

 

👉 채우기 영역(Fill area): 배경색이나 배경 이미지로 채워지는 영역

 

 

div {
  width: 300px; /* 콘텐츠의 너비 */
  height: 200px; /* 콘텐츠의 높이 */
  padding: 20px; /* 콘텐츠와 테두리 사이의 여백 */
  border: 5px solid black; /* 테두리 */
  margin: 10px; /* 요소 주위의 외부 여백 */
 }

 

 

---

1. border ( 테두리 라인 ) 

border 스타일을 한줄로 쓸때는 각각 boder-width, border-style, border-color 속성을 차례대로 적어주면 된다.

이러면 border 의 상하좌우 라인을 다 그릴 수 있게 되는 데, 한쪽 라인만 없애주고 싶다면 

border-top : none 이런 식으로 추가로 적어주면 된다.

 

그럼 border 테두리선 까지의 전체 가로 세로의 길이는 얼마일까?

너비는 width  + padding + border 로 300 + 20 + 5 = 325 px 이 된다

높이는 height + padding + border 로 200 + 20 + 5 = 225 px가 되는데

 

300 x 200 사이즈에 border 가 다 들어가야한다면 width 나 height 를 일일이 수정해야할까?

그거도 대부분의 태그에서 이런 box model을 사용하고 있다면 정말 번거로운 일이다.

 

이럴 때는   box-sizing: border-box;  를 넣어주면 된다

너비는 width  + padding + border = 300 px 
높이는 height + padding + border  = 200 px이 자동으로 계산되어 적용되게 된다.

div {
  width: 300px; 
  height: 200px; 
  padding: 20px; 
  border: 5px solid black; 
  margin: 10px; 
  box-sizing: border-box; /* 전체 크기를 포함하도록 설정 */
}

 

참고로 box-sizing 값을 설정하지 않으면 box-sizing: content-box 가 기본값으로 설정되는데 

이름에서 알 수 있듯이  box-sizing 즉 box의 너비 높이는 컨텐츠 박스를 타겟으로 하므로

width, height 에 padding 과 border 값을 별도로 더하게 되고

 

box-sizing: border-box 로 설정하면  box-sizing의 너비 높이는 보더라인까지로 확장되므로

width, height 은 padding 과 border 값을 포함한 값이 된다

 

레이아웃을 잡을 때 매우 중요한 속성이다

 

---

 

2. border-radius ( boder 라인 모서리 굴곡 ) 

border-top-left-radius

border-top-right -radius

border-bottom-right-radius

border-bottom-left-radius 

이런식으로 개별적으로 모서리를 깎을 수도 있지만 보통은 한줄로 나타내는 경우가 많다

그리고 이런 경우에는 값을 1개에서 4개까지 줄수 있고 각 값의 모서리 순서는 아래 그림과 같다

border-radius: 좌상, 우상, 우하, 좌하  

 

 

예 )

1. border-radius : 32px  인 경우 네 모서리에 전부 적용된다

2. border-radius : 32px 64px 인 경우 border-radius : 32px 64px ( 32px 64px ) 가 생략된 형태다

 

3. border-radius : 64px 96px 128px 인 경우 border-radius : 64px 96px 128px ( 96px ) 가 생략된 형태다

 

4. border-radius : 64px 96px 128px 32px 인 경우 좌상, 우상, 우하, 좌하 순으로 적용된다

https://www.linkedin.com/posts/david-mraz_check-out-this-css-border-radius-cheat-sheet-activity-7079732218125791232-lvNG/

LinkedIn David Mráz 페이지: Check out this CSS border radius cheat sheet🧑‍💻📚

 

---

 

3. margin , padding

 

border-radius 처럼 속성값을 1개에서 4개까지 사용가능하다. 하지만 속성 순서와 너비를 늘려주는 대상이 달라 정리한다. margin , padding 둘 다 속성값이 4개이면 시계 방향으로 적용된다 (상 -> 우 -> 하 -> 좌)

 

3-1. margin: 10px  인 경우 상우하좌에 전부 적용된다

3- 2. margin: 10px 20px 인 경우 10px 상하 / 20px 좌우에 적용된다. margin: 10px 20px ( 10px 20px )가 생략된 형태다

 

3- 3. margin: 10px 20px 30px 인 경우 10px 상 / 20px 좌우 / 30px 하에 적용되며

        margin: 10px 20px 30px ( 20px  ) 가 생략된 형태다

 

3- 4. margin: 10px 20px 30px 40px 인 경우 상, 우, 하, 좌 순으로 적용된다

 

●  margin collpase ( 마진 병합 )

 

마진 병합은 CSS에서 발생하는 현상으로, 인접한 요소들의 수직 마진이 하나로 합쳐지는 것을 말합니다.

주요 특징:

1. 수직 방향으로만 발생합니다 (상하 마진).
2. 가장 큰 마진 값이 적용됩니다.
3. 부모-자식 요소 사이에서도 발생할 수 있습니다.

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

 

이 경우, 두 박스 사이의 실제 간격은 30px이 됩니다 (더 큰 값인 30px이 적용됨).

마진 병합 방지 방법:

1. 부모 요소에 overflow: hidden; 적용
2. 부모 요소에 padding 또는 border 추가
3. 플렉스박스나 그리드 레이아웃 사용

참고: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

---

 

4. box-shadow , text-shadow

 

4-1. box-shadow 

 

HTML 요소에 그림자 효과를 추가

 

box-shadow: h-offset v-offset blur spread color inset;

 

h-offset: 가로 오프셋 (필수) : 양수값이 커질수록 x 축 오른쪽 이동
v-offset: 세로 오프셋 (필수) : 양수값이 커질수록 y 축 아래 이동
blur: 그림자가 뿌옇게  흐려지는 정도 (선택, 기본값 0)
spread: 그림자 크기 (선택, 기본값 0)
color: 그림자 색상 (선택, 기본값 브라우저 기본색)

inset: 안쪽 그림자 설정 여부 ( inset  을 줄 때는 h-offset, v-offset 가 같은 값이 되게 해주는 게 자연스럽다)

 

4-2. text-shadow 

 

텍스트에 그림자 효과를 추가

 

text-shadow: h-shadow v-shadow blur-radius color;

 

h-shadow: 가로 그림자 위치 (필수)
v-shadow: 세로 그림자 위치 (필수)
blur-radius: 흐림 정도 (선택, 기본값 0)
color: 그림자 색상 (선택, 기본값 브라우저 기본색)

 

두 속성의 주요 차이점:
box-shadow는 요소 전체에 적용되고, text-shadow는 텍스트에만 적용된다
box-shadow는 spread 매개변수가 있지만, text-shadow에는 없다
box-shadow는 inset 키워드를 사용해 내부 그림자를 만들 수 있지만, text-shadow는 불가능