css-examples/Writerside/topics/Box-Model.md

Box

블록 요소는 새로운 줄에서 시작하며, 상위 컨테이너 너비의 100%를 채웁니다. <h1>, <p>, <div> 등은 기본작으로 블록 요소입니다. 인라인 요소는 새로운 줄에서 시작하지 않으며, width, height 속성은 무시됩니다. <a>, <em>, <strong>, <span> 등은 기본적으로 인라인 요소입니다.

박스의 유형은 display 속성을 통해서 정의할 수 있습니다.

• display
  • block
  • inline
  • inline-block
  • flex
  • inline-flex

박스 모델

• 컨텐트 영역 : 기본적으로, width와 height 속성을 지정하면 컨텐트 영역의 크기를 지정하게 됩니다.
• 패딩 영역 : padding
• 보더(테두리) 영역 : border
• 마진 영역 : margin

크기

• width
• height
• min-wodth, min-height
• max-width, max-height

보더 박스 모델

• box-sizing : content-box | border-box width와 height 속성이 컨텐트 영역의 크기를 지정하는 대신, 보더 영역의 크기를 지정하도록 합니다.

html {
    box-sizing: border-box;
}

마진

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

Margin Collapsing

여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.

보더

• border

• border-top, border-right, border-bottom, border-left

• border-width

• border-style : none | hidden | dotted | dashed | solid | double | groove | rigid | inset | outset

• border-color

• border-top-width, border-top-style, border-top-color

• border-right-width, border-right-style, border-right-color

• border-bottom-width, border-bottom-style, border-bottom-color

• border-left-width, border-left-style, border-left-color

• border-radius

• border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

패딩

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 마진과는 다르게 패딩은 음수의 크기를 가질 수 없습니다.

• padding
• padding-top, padding-right, padding-bottom, padding-left

배경

• background

• background-color

• background-image

  • url()
  • linear-gradient()
  • radial-gradient()

• background-repeat : no-repeat | repeat-x | repeat-y | repeat

• background-size : cover | contain

  • cover : 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.
  • contain : 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.

• background-position

• background-attachment : scroll | fixed | local

• box-shadow

아웃라인

• outline
• outline-color, outline-offset, outline-style, outline-width

Overflow

overflow 의 기본값은 visible 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다. 콘텐츠가 넘칠 때 내용을 자르려면 박스에 overflow: hidden 을 설정할 수 있습니다. word-break는 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. overflow-wrap는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.

• overflow : visible | hidden | clip | scroll | auto
• overflow-x, overflow-y
• word-break : normal | break-all | keep-all | break-word
• overflow-wrap = word-wrap : normal | break-word