Publishing/CSS3

box model - css 배우기

oodada 2023. 12. 5. 11:31

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
    • 블록 요소처럼 표시한다.

'Publishing > CSS3' 카테고리의 다른 글

flexbox로 레이아웃 만들기  (0) 2023.12.14
background 속성 - css 배우기  (0) 2023.12.04
font, text 관련 속성 - css 배우기  (0) 2023.12.03
layout 관련 속성 - css 배우기  (0) 2023.12.01
css의 기초 - css 배우기  (0) 2023.11.29
티스토리 친구하기