CSS는 다음과 같이 구성되어 있습니다.

• CSS의 의미와 적용방법
• block과 inline의 차이점
• em과 rem의 차이
• Sass - CSS 전처리기
• CSS margin과 padding의 차이
• sticky 를 알아보자
• class와 id의 차이점
• CSS Flexbox - 자주 사용되는 것 정리

block과 inline의 차이

오늘은 block과 inline에 대해서 알아보겠습니다.
display값으로 여러가지가 있지만 이번글에서는 block과 inline에 대해서만 알아볼 것입니다.

display : block

먼저 block인데, block은 무조건 한 줄을 모두 차지합니다. 따라서 다음 요소는 줄바꿈이 되게됩니다. div태그가 대표적인 예시입니다.

display : inline

inline은 한줄 전체를 차지하는 것이 아니라 해당 텍스트만큼만 자리를 차지합니다. 예로 span태그가 있습니다.
inline 태그는 width와 height를 명시할 수 없습니다. 그리고 margin은 위아래엔 적용되지 않고 좌우만 적용됩니다. 또한 padding도 보기에는 상하좌우 모두 적용되는 것처럼보이나, 위아래공간은 사실 차지하지 않습니다.

display : inline-block

마지막으로 inline-block은 inline속성과 block속성을 모두가진 속성입니다.
줄바꿈없이 한 줄에 다른 요소들을 배치할 수 있는 특징이 있고, width, height, margin-top, margin-bottom을 적용할 수 있습니다.
End.