[CSS] Layout (1/2) - Float, Position

CSS Layout (1/2)

• CSS 레이아웃은 웹 페이지 요소의 배치를 재조정하는 데 사용되는 기술이다.

Float

float: left;
float: right:
float: none;

• 요소를 왼쪽이나 오른쪽으로 밀어낼 때(정렬) 사용한다.
  • float 속성이 적용되면 해당 요소가 inline 형식으로 변경된다.
  • float:right일 시 다른 요소들이 원래 자리를 차지할 수 있다.
• float 속성을 가진 요소는 일반적인 레이아웃에서 벗어나 박스 모델에서 인식하지 못한다.(?)

Position

• 속성의 값에 따라 요소의 상대적(절대적)인 위치를 조정한다.
• 위치 조정 방법(position 값)

  속성	설명
  static	기본값, 박스 모델을 따른다.
  *relative	해당 요소의 원래 위치를 기준으로 조정한다.
  *absolute	- 부모 요소 중, static이 아닌 요소를 기준으로 위치를 조정한다.
  	- 만약 부모 요소 중에 존재하지 않을 시 최상단의 body 태그를 기준으로 한다. → 부모 요소에 relative 적용할 것
  fixed	브라우저(뷰포트) 기준으로 배치
  sticky	스크롤 영역 기준으로 배치

• 위치 조정 속성

  단위	설명
  top	상단 기준 위치
  left	좌측 기준 위치
  right	우측 기준 위치
  bottom	하단 기준 위치

• 위치 조정 단위

  • auto, px, em, rem, vw, vh, %, ..

    단위	설명
    em	부모 태그의 글씨 기준 배율(1에서 1배, 소수점 단위)
    rem	최상위(html) 태그의 글씨 크기 기준 배율(1에서 1배, 소수점 단위)
    vw	뷰포트의 너비 기준 배율(0 이상, 100에서 너비의 1배)
    vh	뷰포트의 높이 기준 배율(0 이상, 100에서 높이의 1배)
    %	- 부모 요소의 크기(너비, 높이) 기준, 0~100%

  • 높이(height)는 너비(width)와 반대로 부모 요소가 자식 요소를 따라간다. (다른 방법 사용 권장) |

• position 값은 해당 요소의 좌측 상단을 기준으로 계산된다.
  • 따라서 중앙 정렬 시 transform: translate(-50%, -50%) 속성을 작성해줘야 한다.(아래 사진 참고)