CSS 레이아웃을 배웁시다 - 1

'CSS 레이아웃을 배웁시다'라는 사이트에서 공부한 내용이다.

평소에 개발을 하면서 정확히 짚고 싶었던 내용이라 흥미로웠다.

div : 블록 레벨 엘리먼트. 새 줄에서 시작해 좌우로 최대한 늘어난다. span: 인라인 엘리먼트, 단락의 흐름을 방해하지 않은채로 텍스트를 감싸는 것

display:none은 엘리먼트가 마치 존재하지 않은 것 처럼 랜더링 됨 visibility:hidden은 엘리먼트가 감춰지지만 공간을 차지한다.

width값을 지정하고 좌우 margin을 auto로 해놓으면 가로 중앙에 옴

position static: 기본값, 위치가 지정된 것이 아님 relative: 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작 상대위치가 지정된 엘리먼트에 top이나 right,left,bottom을 지정하면 기본 위치와 다르게 위치가 조정됨 fixed: 고정된 엘리먼트는 뷰포트에 상대적으로 위치가 지정됨. 스크롤 되어도 늘 같은 위치에 위치. top이나 right,left,bottom 같은 프로퍼티 사용 absolute: 가장 까다로운 위치 지정값. 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치됨.-> 조상에 상대적으로 고정됨 -> 조상이 없으면 본문(document body)에 고정됨---> 스크롤 이동해도 따라다님 . "위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킴