box model - css 배우기

box model - css 배우기

https://www.w3schools.com/css/css_boxmodel.asp

모든 HTML 요소는 박스 모델을 가지고 있다.

width

요소의 너비를 지정한다.

• auto (기본값 100%)
  • 브라우저가 너비를 계산한다.
• length
  • px, cm, em 등 단위를 사용할 수 있다.
• inherit
  • 부모 요소의 속성값을 상속받는다.

div {
    width: 1280px;
}

height

요소의 높이를 지정한다.

• auto (기본값 0)
  • 브라우저가 높이를 계산한다.
• length
  • px, cm, em 등 단위를 사용할 수 있다.
• inherit
  • 부모 요소의 속성값을 상속받는다.

div {
    height: 500px;
}

max-width

요소의 최대 너비를 지정한다.

• none (기본값)
  • 최대 너비를 지정하지 않는다.

div {
    max-width: 1440px;
}

max-height

• 요소의 최대 높이를 지정한다.
• none (기본값)
  • 최대 높이를 지정하지 않는다.

div {
    max-height: 300px;
}

min-width

• 요소의 최소 너비를 지정한다.
• auto (기본값)
  • 최소 너비를 지정하지 않는다.

div {
    min-width: 1280px;
}

min-height

• 요소의 최소 높이를 지정한다.
• auto (기본값)
  • 최소 높이를 지정하지 않는다.

div {
    min-height: 100vh;
}

box-sizing

• 요소의 너비와 높이를 계산하는 방법을 지정한다.
• content-box (기본값)
  • 너비와 높이는 콘텐츠 영역만을 계산한다.
• border-box
  • 너비와 높이는 콘텐츠 영역, 테두리, 안쪽 여백을 모두 계산한다.

div {
    box-sizing: border-box;
}

padding

• 요소의 안쪽 여백 영역을 지정한다.
• padding-top, padding-right, padding-bottom, padding-left

div {
    padding: 10px;
}

margin

• 요소의 바깥 여백 영역을 지정한다.
• margin-top, margin-right, margin-bottom, margin-left

div {
    margin: 10px;
}

border

• 요소의 테두리 영역을 지정한다.
• border-width, border-style, border-color

div {
    border: 1px solid #000;
}

outline

• 요소의 외곽선 영역을 지정한다.
• outline-width, outline-style, outline-color

div {
    outline: 1px solid #000;
}

overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 넘친 부분을 어떻게 처리할지 지정한다.
• visible (기본값)
  • 넘친 부분을 그대로 보여준다.
• hidden
  • 넘친 부분을 잘라내고 보여주지 않는다.
• scroll
  • 넘친 부분을 잘라내고 스크롤바를 보여준다.
• auto
  • 넘친 부분이 있을 때만 스크롤바를 보여준다.

div {
    overflow: hidden;
}

visibility

• 요소의 표시 여부를 지정한다.
• visible (기본값)
  • 요소를 표시한다.
• hidden
  • 요소를 표시하지 않는다. (공간은 차지한다.)
• collapse
  • 테이블 요소의 행을 표시하지 않는다. (공간도 차지하지 않는다.)

div {
    visibility: hidden;
}

display

• 요소의 표시 방법을 지정한다.
• block
  • 블록 요소처럼 표시한다.