[CSS] BOXMODEL에 대해서

04 Jan 2023 in Study on Study, JavaScript

• Block
• inline
• inline-block
• 박스를 구성하는 요소
  • 테두리 (border)
  • 바깥여백 (margin)
  • 안쪽 여백 (padding)

모든 콘텐츠는 고유한 영역이 존재한다.
모든 콘텐츠는 각자의 영역을 가지며, 하나의 그룹으로 묶이는 요소들이 하나의 ‘박스‘가 된다.
박스는 항상 직사각형이며 너비와 높이를 CSS를 이용해 설정할 수 있다.

박스의 종류는 줄바꿈이 되는 것과 줄바꿈이 안되고 옆으로 계속 붙는 박스가 있다.

Block

한 영역을 차지한다. 기본적으로 width값이 100%이다.
height, width, margin, padding 값을 지정할 수 있다.

inline

width, height 명시 불가
margin-top, bottom은 적용 불가
padding-top, bottm은 시각적으로는 추가되나 공간은 차지하지 않는다. (?)

inline-block

줄바꿈 이루어지지 않음
block처럼 width, height 지정 가능
width, height 지정안하면 inline처럼 컨텐츠만큼만 영역 잡힌다.

	block	inline-block	inline
줄바꿈 여부	일어남	안일어남	안일어남
기본width	100%	콘텐츠차지하는만큼	콘텐츠차지하는만큼
width, height 사용 가능 여부	가능	가능	불가능

박스를 구성하는 요소

테두리 (border)

각 영역이 차지하는 크기를 시각적으로 파악하는데 도움이 됨.

바깥여백 (margin)

border 기준 바깥 여백이다.
각각의 값은 top, right, bottom, left로 시계방향이다.

안쪽 여백 (padding)

border 기준 안쪽 여백이다
각각의 값은 top, right, bottom, left로 시계방향이다.