Box Model | border... | Box-Sizing

모든 HTML 요소는 웹페이지에서 일정 공간을 차지한다. 이러한 공간을 css에서는 박스 모델 (Box Model)로 정의한다.

 

구성요소

• Content : 텍스트나 이미지가 들어가는 HTML 요소의 실질적인 내용
• Padding : Content와 Border 사이의 영역으로, 안쪽 여백을 말한다.
• Border : Content를 감싸는 테두리
• Margin : 테두리와 이웃하는 요소 사이의 간격. 바깥 여백

모든 HTML 요소의 Box Model의 구성은 동일하며, 웹 브라우저 > 개발자 도구 > Computed 탭에서 박스모델을 확인할 수 있다.

 

---

Box Model Css 속성

 

Content

• width : 가로 너비를 지정할 수 있다.
• height : 세로 너비를 지정할 수 있다.

width : 200px;

height : 200px;

 

• 인라인 레벨 요소 (Inline Level Element)에는 width, height 속성이 적용되지 않는다. ( <span> 태그)
• 변경을 원한다면 display: inline-block 으로 변경해야한다. (block과 inline의 중간 형태로 요소는 inline 이지만 block 처럼 표시한다.

---

Padding

• padding 속성은 HTML 요소의 안쪽 여백을 지정한다.
• padding-top padding-bottom padding-left padding-right 속성을 사용하여 각각 조정할 수 있다.

 

padding : 20px;              >> 상하좌우 모

padding : 10px 20px ;    >> 두번째 값은 좌우가 조정 된다. 만약 3개의 값을 넣는다면 위, 좌우, 아래 순서로 조정된다.

padding : 1px 2px 3px 4px ;  >> 위, 오른쪽, 아래, 왼쪽 (시계방향 회전)

padding-top : 20px

 

---

 

Margin

• margin 속성은 HTML의 바깥 여백을 지정한다.
• padding과 마찬가지로 상하좌우 따로 조정할 수 있다.

 

마진중첩

: HTML 요소를 세로로 배치할 경우 margin과 margin이 만날 때 margin 값이 큰 쪽으로 겹친다. 요소를 가로로 배치하는 경우는 상관없지만 세로로 배치하는 경우 값이 큰 margin이 적용된다.

 

---

 

 

Border

border, border-width, border-style, border-color 속성으로 요소의 테두리를 설정한다.

 

border-style

• 어떤 형태의 테두리 스타이을 지정할지 나타낸다.
• top → right → bottom → left 순서로 조정된다.
• ex)

     border-style : solid ;

     border-style : dotted solid dashed solid ;

     border-left-style: solid

 

     border : 1px solid red;   >>> 단축 속성으로 width, style, color를 포함하고 있다.

 

border-width : 두께

border-color : 테두리 색상

border-radius : 꼭짓점을 둥글게 만든다.

---

Box Sizing

: HTML 요소의 너비와 높이를 계산하는 방식

 

• box-sizing : content-box ;  >>> 기본 css 박스 크기 결정법. 요소의 너비를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지고 있고, 테두리와 안쪽 여백은 이에 더해진다.
• box-sizing : border-box ;   >>> 테두리와 안쪽 여백도 요소의 크기(width, height)로 고려된다. 너비를 100px로 설정하고 테두리와 안쪽여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100px을 유지한다. 대부분의 경우에 크기를 조절할때 용이하다.