- tag에 기본적으로 display 속성 값이 지정되어 있지만 css에서 display 값 '재설정' 가능
- display속성 값 중 inline / inline-block / block 에 대한 설명입니다.
display: inline
- 대표적인 inline tag :
<span>,<a>등 - 줄바꿈 되지 않고, 동일한 라인에 여러개 작성 가능
- 'width', 'height' 속성값 지정 불가
- 내용만큼의 공간을 차지함
display: inline-block
- inline의 '줄바꿈 되지 않고, 동일한 라인에 여러개 작성 가능'한 특징을 가짐
- 'width', 'height' 속성 지정 가능
<button>,<input>등의 태그가 기본적으로 inline-block의 속성값을 가짐
display: block
- 대표적인 block tag :
<div>,<h1>,<p> - 하나의 요소가 한 줄을 차지, 다음으로 오는 요소는 아랫줄에 배치됨
- width가 부여되면 늘어나지 않게 됨
- width를 부여하고 margin값을 auto로 설정하면 margin값을 균등하게 배분함
언젠가 필요해질 것 같은 정보
-
inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결됨
-
inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있음
