두 번째로, display
dispay : inline, inline-block, block
-
display: inline;
span, a, img...
-
width 값이 컨텐츠 영역 만큼 잡히게 되고, 라인이 새로 추가 되지 않음. 줄바꿈 없이 다른 요소들과 나란히 배치된다.
-
width, height 속성을 지정해도 무시되고, margin과 padding은 좌우만 반영이 되며, 상하 간격은 반영되지 않는다.
-
-
display: block;
"내 좌우로 아무것도 붙여 넣을 수 없다!"
header, footer, p, li, table, div, h1...
-
한 영역을 차지하는 박스형태로 width 기본값이 100%가 된다.
-
전후 줄바꿈으로 혼자 한줄을 차지
-
width, height, margin, padding 속성 모두 반영
1+2! display: inline-block;
-
inline 처럼 한 줄에 배치가 되고 block의 속성인 width와 height, margin, padding의 좌우 간격 지정 가능
-
여러개의 요소를 한 줄에 원하는 너비만큼 배치가 가능
(하지만 더 좋은 것이 있지,,, 그것은 이름도 플렉스,,,
많이 써도 된다고 했음. 플렉스가 플렉스하자...) -
킴릴로