css - 2

display

• inline : space = content
• block : space > content, start with new line

display 속성은 요소의 이러한 default 속성을 바꿀 수 있다.

block vs inline

• block : width, height 을 바꿀 수 있다. (그러나 한줄을 모두 차지하는 건 똑같다)
• inline : width, height 속성을 지정해도 변화가 없다. margin 은 left/right 에만 적용된다.
• inline-block : width, height 를 갖지만 한 줄을 모두 차지하지는 않는다.

boxmodel

boxmodel 은 block/inline 요소 모두에게 해당된다. 단, width, height 는 block 에만 유효.

• content (width/height)
• padding (음수 불가능)
• border (border-widt h/style/color)
• margin (auto, 음수 가능)

/* shorthand syntax */
padding: 2px /* same on all sides */
padding: 2px 10px; /* top & bottom, right & left */
padding: 2px 10px 5px; /* top, right & left, bottom */

margin의 활용

1. negative margin 을 이용하면 두 box가 겹치는 효과를 낼 수 있다.
2. block 요소는 margin: 0 auto; 를 이용하면 좌우 가운데 정렬을 할 수 있다.