css에서 자주 사용되지만, 정리가 필요한 부분들을 모아모아~
블록 레벨 엘리먼트들은 새 줄에서 시작해 좌우로 최대한 늘어난다.
p
,div
,form
등header
, footer
,section
등이 html5에서 새롭게 추가되었다!인라인 레벨 엘리먼트들은 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다.
span
,a
등등visivility:hidden
은 눈에 안보이지만 공간은 차지한다.display:none
은 element가 존재하지 않는 것 처럼 렌더링된다.relative 는 별도의 프로퍼티를 지정하지 않는 이상 static 과 동일하게 동작한다. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 기본 위치와는 다르게 위치가 조정된다.
position 속성이 absolute인 엘리먼트는 부모 엘리먼트에 구애받지 않고 브라우저 화면(viewport) 어디든 위치 가능하다!
top
, left
, bottom
,right
)CSS의 fixed positioning은 브라우저의 전체 화면(viewport)을 기준으로 엘리먼트를 배치할 때 사용
fixed position이 적용된 엘리먼트는 부모 엘리먼트에 구애받지 않고 배치가 가능핳다.
ixed positioning이 적용된 엘리먼트는 다른 엘리먼트들이 스크롤링되는 동안에도 지정된 자리에서 고정되어 움직이지 않는 특징을 가진다.
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
float 속성을 줄 경우, 해당 엘리먼트의 범위를 넘어버릴 수 있다.
이 때, overflow:auto
값을 주면 범위를 넘어선 만큼 확장해준다!! (좋은 기능이지만 적용할 브라우저를 확인하고 사용해야 할 것 같다.)
요즘은 flex라는 기똥찬 녀석이 있어 잘 사용하지 않는다고 한다 ㅎㅎ