CSS : Box Model (박스 모델)

CSS : Box Model (박스 모델)

CSS : Box Model (박스 모델)

---

박스 모델 Box Model 

• 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
• 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성 (색, 배경, 테두리 모양 등)을 결정할 수 있다.
• 박스는 네 개의 영역으로 구성되며, 크기 지정을 할 수 있다.  
  • 콘텐츠 영역 (content) :
    • 콘텐츠 너비(가로) : width
    • 콘텐츠 높이(세로) : height
  • 안쪽 여백 (padding) :
    • padding: 0px 0px 0xp 0px; [상단 오른쪽 하단 왼쪽 순]
    • padding-top 
    • padding-right
    • padding-bottom
    • padding-left
  • 경계선 [테두리] (border)
    • border-width
    • border-height
  • 바깥쪽 여백 (margin)
    • margin : 0px 0px 0xp 0px; [상단 오른쪽 하단 왼쪽 순]
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left

 

 

 

---

 

 

콘텐츠 영역 (Content Area)

• 개발자가 태그 안에 포함시킨 부분을 보여주는 영역
  높이(height)와 너비(width)를 이용하여 사이즈를 조정할 수 있다.

div {
    width: 100px;
    height: 100px;
}

 

---

 

안쪽 여백 (Padding)

• 테두리 안쪽에 여백을 두어 경계선과 콘텐츠 간의 공간을 확보하는 역할을 한다.
  padding속성을 이용하여 테두리의 안쪽에 여백을 줄 수 있다.

/* 상단 1px 오른쪽 10px 하단 1px 왼쪽 10px */
div {
    padding: 1px 10px 1px 10px;
}

/* 모든 padding에 10px 를 지정 */
div2 {
    padding: 10px;
}

div3 {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

 

---

 

경계선 (테두리 - Border)

• 콘텐츠를 감싸주어 요소와 요소가 아닌 요소와 공간 사이에 경계선을 그어주는 역할을 한다.
  border속성을 사용하면 테두리의 두께를 조정할 수 있다.

/* div에 1px의 검은색 테두리를 긋는다. */
div {
    border: 1px solid black;
}

 

CSS : display & border

 

---

 

바깥쪽 여백 (Margin)

• 테두리 바깥쪽의 여백을 지정하여 해당 요소와 다른 요소 사이에 여백을 주어, 공간을 확보하는 역할을 한다.
  margin 속성을 이용하여 테두리의 바깥쪽에 여백을 줄 수 있다.

/* 상단 1px 오른쪽 10px 하단 1px 왼쪽 10px */
div {
    margin: 1px 10px 1px 10px;
}

/* 모든 margin에 10px 를 지정 */
div2 {
    margin: 10px;
}

div3 {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

 

 

---