[CSS] 레이아웃 - position과 display 알아보기

position

특정 요소를 원하는 위치에 배치하고 싶을 때

• static : 기준 없음
• relative : 요소 자신을 기준
  • 배치 전 자리는 비어있다 → 거의 사용X
• absolute : 위치 상 부모 요소를 기준 (위치 상 부모 요소를 꼭 확인해야함!)
  • 붕~ 뜨면서 요소가 겹친다
  • (기본값) 위치 상 부모 요소가 뷰포트가 되어 버린다
  • 위치 상 부모 요소로 지정 → position: relative;
• fixed : 뷰포트(최상위 브라우저 창)를 기준
• sticky : 스크롤 영역 기준(부모 태그의 크기 기준)
  • 그 안에 들어있는 박스 안(부모기준)에서 포지션이 지정
  • javascript를 전혀 사용하지 않고도 Affix 레이아웃 구성 가능

display

요소를 화면에 출력할 때

block

• 상자(레이아웃) 요소
• 혼자 한 줄 차지
• width, height, margin, padding 속성이 모두 반영

inline

• 글자 요소
• width와 height 속성을 지정해도 무시
• margin과 padding 속성은 좌우만O, 상하X

inline-block

• 글자 + 상자 요소
• inline 요소처럼 : 한 줄에 다른 엘리먼트들과 나란히 배치
• block 요소처럼 : width, height, margin, padding 속성이 모두 반영
• ex) button, input, select 태그