아래 영어들은 코드아카데미에 있는 설명입니다. 영어;;;;;
block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.
inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).
none: This makes the element and its content disappear from the page entirely!
실습
아래 사진은
4개의 div를 만든후 여러가지 속성들을 준 사진인데요 여기에
display속성을 줘보겠습니다.
-----------------------------------------------------------------------
[↑block을 줬을때의 결과]
기본상태가 block이기때문에 변화가 없습니다.
[↑inline-block을 줬을때의 결과]
div들이 한줄로 보여집니다.
[↑inline을 줬을때의 결과]
뭔가 이상한 검은게 나타났습니다.
none속성을 가지고있는건은 화면에서 사라지고 그 다음것이 그자리를 채웁니다.
===================================================================
[정리]
block : 자동으로 줄이 바껴서 밑에다 다음걸 표시해줌. 하나 하나가 전체 폭을 차지합니다..
inline ,inline-block: 바로옆에다가 다음거 표시(한줄로 표시)
none : 화면에서 안보이게하고 다음걸 현재자리에 채워줌.
*inline과 inline-block의 차이는 height,width,margine,padding같은 속성을 줘야하냐 필요없냐의 차이인듯 싶습니다.
(인라인의 경우 폭같은거를 지정해줘야하고 인라인-블록의경우에는 자기가 가지고있는 폭 바로 옆에다가 다음거를 표시..)