[CSS] 기본 display(inline, block, inline-block) 이해와 style 제한

예전에 css 배우고 난 이후 제대로 공부한게 많지 않아 기본 display(inline, block, inline-block) 에 대한 이해가 부족한 것 같아 정리
※ flex 를 자주 쓰기도 하고 대강 안다고 생각하면서 제대로 짚지 않아 정리할 필요성을 느낌

1. block

 

설명

*block 요소는 전체 너비를 차지하고, 항상 새로운 줄에서 시작하여 레이아웃에 큰 영향을 미칩니다.

style 관련

• 기본적으로 부모 컨테이너의 전체 너비를 차지(width: 100%)하며 높이는 콘텐츠 크기에 맞춰(height: auto)집니다.
• width와 height 속성을 사용하여 크기를 지정할 수 있습니다.
• margin, padding, border를 모두 적용할 수 있습니다.

2. inline

 

설명

inline 요소는 기본적으로 텍스트와 같은 흐름을 유지하며 새로운 줄을 만들지 않습니다. (ex: <span>, <a>, <strong>, <em>)

 

특정 스타일이나 배치 제약 조건이 존재합니다.

style 관련

 

기본

• 기본적으로 요소의 너비와 높이는 콘텐츠의 크기에 따라 자동으로 결정(width: 100%, height: auto)됩니다.
• line-height*로 줄 상자의 높이를 설정할 수 있습니다.
• 부모 요소의 라인 높이(line-height)와 텍스트 크기에 영향을 받습니다.
• inline 요소는컨텐츠 박스(content box)와 패딩(padding), 테두리(border) 로 이루어 집니다.

제한점

• width와 height 속성은 무시되어 block 요소처럼 크기를 지정할 수 없습니다.
• 마진(margin)은 적용되지만 세로 방향의 마진(margin-top, margin-bottom)은 적용되지 않습니다.
• inline 요소의 높이는 콘텐츠에 의해 결정되므로, 세로 padding이 요소의 높이에는 영향을 미치지 않고 적용되어 실제 콘텐츠 영역은 그대로이면서 세로 padding 영역은 벗어나는 비정상적인 구조를 가집니다. (box-sizing: border-box 를 적용하더라도 해결할 수 없습니다.)

3. inline-block

 

설명

inline-block 요소는 inline 요소처럼 텍스트와 같은 라인에서 흐르지만, block 요소처럼 크기와 레이아웃을 지정할 수 있습니다.

 

inline처럼 나란히 배치하면서도 크기나 레이아웃을 조정할 수 있는 요소, 작은 블록 단위 레이아웃에 적합(예: 버튼, 이미지, 텍스트 아이템)

style 관련

• inline 요소처럼 기본적으로 요소의 너비와 높이는 콘텐츠의 크기에 따라 자동으로 결정(width: 100%, height: auto)됩니다.
• inline 요소처럼 줄 바꿈 없이 텍스트 흐름 내에서 배치됩니다.
• block 요소처럼 width와 height 속성을 사용하여 크기를 지정할 수 있습니다.
• block 요소처럼 padding, margin 정상적으로 사용 가능합니다.