CSS Layout

CSS Layout

• source: https://ko.learnlayout.com/display.html

display

• CSS's most important property for controlling layout.
• Every element has a default display value, usually BLOCK or INLINE.

Block

<\div> : standard block-level element, meaning it starts on a new line and stretches out.
ex) of a block element: <\p>, <\form>, <\header>,<\footer>,<\section>

Inline

<\span>: standard inline element. Wraps some text inside a paragraph without disrupting the flow of that paragraph.

None

ex) display: none

• specialized elements such as "script" use this as default display value.
• used to hide and show elementst without really deleting and recreating them.
• ec) div{
  display:inline;
  } 등을 통해 default 로 설정된 display 값을 필요에 따라 변경 할 수 있다.
  

div 태그에 max-width 값을 설정하면 창이 더 커져도 해당 값보다 더 커지지 않는다.

box-sizing

• width 값이 같더라도 padding 과 margin value 에 따라 실제 내용의 크기가 달라질 수 있다. 이에 대한 해결책으로 box-sizing 을 사용할 수 있다.
  EX)
• 모든 엘리먼트가 이러한 동작을 하기 위해서는
  * 셀렉터를 이용할 수 있다. -webkit- -moz- 사용 안해도됨.