box model

 

block vs. inline, inline-block

	block	inline-block	inline
줄바꿈 여부	줄바꿈 가능	줄바꿈 불가	줄바꿈 불가
기본적인 너비	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 부여 가능 여부	가능	가능	불가능

 

<span>과 같은 inline 엘리먼트에

display : inline-block

속성을 주면, <span>이 차지하는 고유의 크기를 지정할 수 있게 된다.

 

 

border

border는 border에 특성을 부여한다.

border는 단축 속성으로서 아래의 하위 속성을 갖는다.

• border-color
• border-style
• border-width

developer.mozilla.org/ko/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN

 

box-shadow / border-radius

전자는 그림자를 생성하고 후자는 모서리를 둥글게 만든다.

필요시 구글링 활용하기.

 

 

Overflow

컨텐츠가 박스 크기보다 클 때, 넘어간 컨텐츠를 핸들링 하는 방식을 지정함.

 

 

 

box-sizing

아래의 두 가지 값을 가짐.

 

1) content-box

 

CSS의 기본적인 박스 크기 결정법이다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해짐.

 

2) border-box

테두리와 안쪽 여백의 크기도 요소의 크기로 고려함. 너비를 100픽셀로 설정하고 테두리와 패딩을 추가하면, 콘텐츠 영역이 줄어들어 총 테두리와 패딩 영역을 합쳐 100픽셀의 너비를 차지한다.