HTML CSS - dispaly 속성 中 Block , Inline

Block 속성

줄바꿈이 발생한다 

주요 태그들 = p ,h1 ~ h6 , div 등

 

Inline 속성

줄 바꿈이 없다, width , height 속성을 무시한다 , 안의 content(글)에

따라 크기가 정해진다

주요 태그 = span

 

예제 ) 

html - {box1~3 = 홍길동} 를 적어보았음

 

Block 속성 

width 와 height 를 지정할 수 있다. 또한 줄바꿈이 생긴다.

 

Inline 속성

width 속성과 height 속성을 아예 무시해버린다. 그리고 줄바꿈이 없다.

따라서 컨텐츠(글)의 크기에 따라 달라지는데 만약 컨텐츠에 아무 말도 없다면?

아무것도 안보이니 border를 좀 넣어보자

↑ 이게 결과예요 ㅋㅋㅋㅋㅋ

정말 아무것도 안뜬다

 

inline-block 속성

줄바꿈이 없으면서 block속성(width 와 height 지정가능)을 가지는 것

 

 

 

none 속성

화면에는 출력이 되지 않으나 있긴 있음