• CSS 레이아웃을 만드는데 필요한 주요 속성들이 있는데, 아래 요소들을 많이 활용한다

float

• 요소를 컨테이너의 왼쪽이나 오른쪽에 떠있는 형태로, 주로 칼럼 형태의 디자인을 만들때 사용한다
• 허나 Flex, Grid와 같은 더 현대적인 레이아웃 방식이 나타나면서 float의 사용 빈도가 많이 줄었다고 한다

grid

• 2차원 레이아웃을 제공하여 페이지를 행과 열로 구성된 형태를 디자인할 수 있게 한다

flex

/* 컨테이너의 항목을 가로로 정렬 */
.flex-container {
  display: flex;
  justify-content: space-between;
}

• 1차원 레이아웃 모델, 컨테이너 안에서 요소들을 동적으로 배치시킬 수 있다

position

• 요소를 특정 위치에 배치할 수 있게, 상대적 또는 절대적으로 조정한다, 종류는 아래와 같다
  • static : 기본값, top, right, bottom, left 속성에 영향을 미치지 않음
  • relative : static과 다르게 top, right, bottom, left 속성을 사용해 상대적으로 배치시킬 수 있음
  • absolute : 절대적 위치로 배치
  • fixed : 브라우저 창 기준으로 고정 배치
  • sticky : 스크롤에 따라 relative 속성처럼 특정 위치에 배치하게 됨

display

• 요소가 문서 내 어떻게 보여질지를 결정한다, 종류는 아래와 같다
  • block : 요소를 줄바꿈이 된것처럼 보여줌
  • inline : 줄바꿈이 되지 않는 텍스트를 표시하기 위해 사용
  • none : 요소를 보여주지 않음

box

• 각 요소들이 사각형으로 이루어져 있으며, 박스들은 여백, margin과 테두리, border, 그리고 내부, padding 속성으로 구성된다