CSS position
static
position 속성을 별도로 지정해주지 않으면 기본값으로 static이 적용
top, left, bottom, right 등의 속성값이 무시됨
relative(상대 위치 지정 요소)
원래 자신이 있던 위치를 기준으로 하여 위치가 결정(상대적임)
top, bottom, left, right 사용 가능
ex) top : 20px => 위쪽에서 20px 이동
absolute(절대 위치 지정 요소)
부모 위치를 기준으로 하여 위치가 결정(가까이 있는 요소)
따라서 부모 태그의 위치에 따라서 자신의 위치가 달라진다
상위에 position 속성이 static이 아닌 요소가 없다면 DOM 트리 최상위에 있는 body 요소가 배치 기준이 된다
fixed(절대 위치 지정 요소)
화면 위아래를 스크롤하더라도 화면에 특정 부분에 고정되어 움직이지 않음
배치 기준이 자신이나 부모 요소가 아닌 뷰포트, 즉 브라우저 전체화면이기 때문임
sticky(끈끈한 위치 지정 요소)
static과 fixed 속성의 특징을 모두 가지고 있음
설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동하게 됨
display
none
보이지 않음
inline 요소
span, b, i, a 태그 등등
주로 글자나 문장에 효과 를 주기 위해 존재하는 단위
줄바꿈이 되지 않고 바로 오른쪽에 표시, width나 height를 지정할 수 없음
자신이 태그 안에 쓴 값에 따라서 크기가 변경됨
block 요소
div, p, h, li 태그 등등
width나 height 지정 가능
기본적으로 가로 영역을 채우며, 항상 다음줄에 렌더링 됨
inline-block
block과 inline의 중간형태, 줄바꿈이 되진 않지만 크기를 지정할 수 있음(block 형식으로 배치)
한 줄에 여러개가 배치 가능
