[CSS] Block과 Inline의 특징

CSS 에서 중요한 요소인 block 과 inline 에 대하여 알아보자 !

*****

 

 block 레벨 요소

항상 새로운 라인으로 시작한다.

한 라인을 길게 전부 차지한다. -> 옆에 다른 요소가 오지못한다.

width, height, margin, border, padding 속성 지정이 가능하다.
block 레벨 요소 안에(하위 태그) inline 요소를 사용할 수 있다.
대표적인 태그로 div가 있다. (h1 ~ h6,  p , title ...)

 

대부분의 태그는 block이다.

---

 inline 레벨 요소

옆에 다른 요소가 올 수 있다.
요소의 너비만큼 가로폭을 차지한다. -> 요소안에 내용물이 없다면 화면에 보여지지 않는다.

width, height 속성을 지정할 수 없다.
inline 요소안에 block 레벨 요소를 포함할 수 없다.
대표적인 태그 span이 있다. (a, span, img ...)

 

 

block을 inline으로 inline을 block으로 바꿀 수 있다.

position 과 display는 다른 포스팅에서 다룰 예정

 

 

내가 지금 사용하려는 태그의 특성을 알아야 원하는 위치에 정렬,배치할 수 있으니 필히 알아야 한다!