css에서 자주 사용되지만, 정리가 필요한 부분들을 모아모아~

display

block

블록 레벨 엘리먼트들은 새 줄에서 시작해 좌우로 최대한 늘어난다.

• p,div,form 등
• header, footer,section 등이 html5에서 새롭게 추가되었다!

inline

인라인 레벨 엘리먼트들은 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다.

• span,a 등등
• width, height 지정 불가!
• padding margin도 좌/우만 가능하고 상/하 설정은 불가능!

none ( visivility와의 차이점 )

• visivility:hidden은 눈에 안보이지만 공간은 차지한다.
• display:none은 element가 존재하지 않는 것 처럼 렌더링된다.

inline-block

• 기존의 인라인 엘리먼트들 처럼 줄바꿈 없이 다른 엘리먼트들과 나란히 배치된다.
• 하지만 인라인 엘리먼트에서 불가능 하던 '너비'와 '높이' 설정이 가능해진다.
• padding, margin 설정도 가능하다!

position

relative

relative 는 별도의 프로퍼티를 지정하지 않는 이상 static 과 동일하게 동작한다. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 기본 위치와는 다르게 위치가 조정된다.

absolute

position 속성이 absolute인 엘리먼트는 부모 엘리먼트에 구애받지 않고 브라우저 화면(viewport) 어디든 위치 가능하다!

• 단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 해당 엘리먼트가 기준이 되어 배치할 수 있는 것이다! (top, left, bottom,right)

fixed

CSS의 fixed positioning은 브라우저의 전체 화면(viewport)을 기준으로 엘리먼트를 배치할 때 사용

• fixed position이 적용된 엘리먼트는 부모 엘리먼트에 구애받지 않고 배치가 가능핳다.

• ixed positioning이 적용된 엘리먼트는 다른 엘리먼트들이 스크롤링되는 동안에도 지정된 자리에서 고정되어 움직이지 않는 특징을 가진다.

float

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

• float 속성을 줄 경우, 해당 엘리먼트의 범위를 넘어버릴 수 있다.

• 이 때, overflow:auto 값을 주면 범위를 넘어선 만큼 확장해준다!! (좋은 기능이지만 적용할 브라우저를 확인하고 사용해야 할 것 같다.)

• 요즘은 flex라는 기똥찬 녀석이 있어 잘 사용하지 않는다고 한다 ㅎㅎ