[CSS] 블록과 인라인

블록(Block)

• 사용 가능한 최대 너비를 지닌다. 높이는 내부 콘텐츠 크기만큼 설정됨. {width:100%; height: auto}와 같은 CSS 속성이 default로 설정되는 것과 다름없음.
• width와 height로 크기 지정가능.
• padding과 margin으로 상하좌우 여백 지정가능.
• 여러 개의 블록요소들이 있을 때, 수직으로 쌓임.(한 줄에 하나의 블록)
• <h1>~<h6>, <p>, <div> 등은 기본으로 display: block를 가짐.

인라인(inline)

• 너비와 높이를 내부 콘텐츠 크기만큼 설정됨. {width: auto; height: auto;}와 같은 CSS 속성을 default로 설정되는 것도 다름없음.
• width와 height로 크기 지정 불가능.
• padding과 margin으로 좌우만 여백 지정가능.
• 여러 개의 인라인 요소들이 있을 때, 수평으로 쌓임.
• <span>, <a>, <br>, <img> 등은 기본으로 display:inline을 가짐(img는 inline이지만 크기 지정가능)

인라인블록(inline-block)

• 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용.
• CSS에서 {display: "inline-block"}을 사용해야 함.

float

• 블록이나 인라인의 영향을 받지 않고 배치시킬 수 있음.
• {float: right;} 등으로 사용.