position과 display

정진우·2022년 5월 10일
0

TIL

목록 보기
47/54
post-thumbnail

position

  • css position 속성은 요소의 위치를 조절할 때 사용
  • position의 값으로 static, relative, absolute, fixed, sticky를 사용할 수 있음

static

  • 일반 문서 흐름에 따라 배치 (자신의 위치를 지킴)
  • 스크롤하면 움직임
  • top, right, bottom, left의 값에 영향을 받지 않음

relative

  • 요소의 위치를 자기 자신을 기준으로 움직임
  • top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

absolute

  • 조상 요소에 의해 상대적으로 배치
  • 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준으로 배치
  • top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

fixed

  • 일반 문서 흐름에서 완전히 제외
  • 스크롤해도 움직이지 않음
  • 뷰포트 초기 컨테이닝 블록을 기준으로 배치
  • top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

sticky

  • 일반 문서 흐름에 따라 배치 (자신의 위치를 지킴)
  • 스크롤하면 움직임
  • 가장 가까운 블록 레벨 조상을 기준으로 배치
  • top, right, bottom, left의 값에 따라 위치를 조절할 수 있음

display

  • block과 inline 요소 중 어느 쪽으로 처리할지 설정
  • flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃 설정

display: block;

  • 요소를 block 요소로 만듦
  • block 요소는 브라우저에서 한 줄을 차지한다. (개행)
  • width, height, margin, padding 속성 모두 반영됨
    ex ) div, p, h1 태그 등

display: inline;

  • 요소를 inline 요소로 만듦
  • 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
  • width, height 속성이 반영되지 않음
  • margin과 padding 속성은 좌우 간격만 반영, 상하 간격은 반영X
    ex ) span, a, em 태그 등

display: inline-block;

  • 요소를 inline-block 요소로 만듦
  • 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
  • width, height, margin, padding 속성 모두 반영됨
    ex ) button, input, select 태그 등

display: flex;

  • 요소를 flex 항목으로 만듦
  • 아래의 기본 값이 지정됨
- 항목은 행으로 나열
- 항목은 주축의 시작 선에서 시작
- 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있음
- 항목은 교차축의 크기를 채우기 위해 늘어남
- flex-basis 속성은 auto로 지정
- flex-wrap 속성은 nowrap으로 지정

flex-direction: row-reverse;

  • 시작 선과 끝 선이 서로 바뀜

flex-direction: column;

  • 주축이 변경되고 항목들은 열으로 나열됨

flex-direction: column-reverse;

  • 주축이 변경되고 항목들은 열으로 나열됨
  • 시작 선과 끝 선이 서로 바뀜
profile
프론트엔드 개발자를 꿈꾸는

0개의 댓글