CSS

Box Model

display

화면에 표시되는 값

inline

• 자신의 전후로 줄바꿈을 만들지 않음
• 포함하는 요소가 너비에 의해 자동 줄바꿈
• 요소의 폭은 콘텐츠에 따라 결정
• 너비 직접 지정 불가능
• 높이는 line-height의 영향을 받음 > 위의 요소와 겹칠 수 있음
• 왼쪽에서 오른쪽으로

block

• 기본적인 display
• 부모 요소의 너비 전체를 채움
• 박스 전후로 줄바꿈이 생김
• 너비와 높이 직접 지정 가능
• 위에서 아래로

inline-block

• inline과 같이 요소 전후로 줄바꿈이 생기지 않음
• block과 같이 너비와 높이 직접 지정 가능
• 높이는 line-height로 결정됨

float

• inline과 겹치지 않으며 inline을 밀어냄
• 다른 배치에 영향을 준다

flow-root

• 새롭게 BFC(Block Formatting Context)가 생성되기 때문에 float 속성으로 인해 생기는 레이아웃 문제 해결할 수도 있음

• BFC : block처럼 렌더링 되는 것
• IFC : inline처럼 렌더링 되는 것

padding

• content 영역과 border 사이의 안쪽 여백을 지정하는 속성
• 음수값, auto 사용 불가능

border

• 요소의 박스 테투리 지정하는 속성
• 세부 속성을 사용하여 선의 모양, 굵기, 색상 지정 가능
  - border-style
  • border-width
  • border-color
  • border: 1px solid red; 처럼 한줄로 사용 가능

margin

• border을 기준으로 다른 요소와의 바깥쪽 여백을 지정하는 속성
• 음수값, auto 사용 가능
• 상하로 인접한 박스가 display: block일 경우 마진 겹침 현상 발생
  + 두개의 마진값 중 하나의 마진값만 적용되는 것
  • 마진값이 다를 경우 큰 값으로 적용됨

width, height

요소의 너비와 높이 지정 (display:inline인 요소에는 적용되지 않음)

• auto
• length
• percentage