Layout

Layout 2가지 요소

• block레벨요소 : 항상 새로운 라인에서 시작. 폭 전체를 차지한다

- <div>, <h1>~<h6>, <p>, <form>, <header>, <footer>, <section>

• inline 요소 : 새로운 라인에서 시작하지 않고, 필요한 만큼의 영역만 차지

-<span>, <a>, <img>

display : 속성을 none으로 하면 보이지 않고 영역이 유지되지 않는다.

visibility : hidden으로 사용지 보이지 않으며 영역은 유지된다.

position 4가지 속성

• static : 고정 위치. 위치관련 속성의 영향을 받지 않는다.(HTML 요소 기본값)
• relative : 상대위치. 위치관련 속성으로 원래 위치에서 이동가능
• fixed : 고정위치. 브라우져의 크기 변경이라 스크롤에도 같은 위치를 유지
• absolute : 가장 가까운 위치의 static이 아닌 조상으로 부터 상대위치에 배치

 overflow : 요소의 영역을 벗어나는 컨텐츠에 대하여 설정, x축과 y축의 overflow속성 따로 지정 가능

• visible : 넘친 부분이 잘리지 않고 요소의 영역을 벗어난다.
• hidden : 넘친 부분이 잘리고 보이지 않게 된다.
• scroll : 넘친 부분이 잘리지만 스크롤 바가 생긴다.
• auto : 넘치는 부분이 생기면 스크롤 바가 생긴다.(scroll과 유사)

float : 요소가 떠다니게 할 것인지 아닌지를 결정하는데 사용

clear : 떠다니는 요소를 다른 요소들이 감싸지 않도록 한다.

inline-block : display속성을 inline으로 하면, 폭, 높이, 마진 등이 균일하지 않다.
inline-block으로 하면, 균일한 폭과 높이를 맞출수 있다.

box-sizing속성

• content-box로는 차지하는 영역을 계산하기 어려움.
• border-box는 크기에 padding, border도 포함되어 크기 계산이 쉬움