CSS Layout

Float

• 한 요소가 정상 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 요소의 좌, 우측을 따라 배치되어야 함을 지정
• 본래는 이미지를 한 쪽으로 띄우고 텍스트를 둘러싸는 레이아웃을 위해 도입 ex) 신문
• 더 나아가 이미지가 아닌 다른 요소들에도 적용해 웹 사이트의 전체 레이아웃을 만드는데까지 발전

float clear - 가상 요소

• 선택한 요소의 맨 마지막 자식으로 가상(의사) 요소를 하나 생성
• 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용
• 기본값은 inline
• clear 속성
  • 선행 floating 요소 다음으로 갈지 아니면 그 아래로 내려가(cleared)야 하는 지를 지정
  • clear 속성은 float 및 비 float 요소 모두에 적용됨
  • 일반적으로 both 로 지정(left, right 모두 적용됨)

float 정리

• flexbox 및 grid 레이아웃과 같은 기술이 나오기 이전에 열 레이아웃을 만드는데 사용됨
• 하지만 위와 같은 기술의 출현과 함께, 원래 텍스트 블록 내에서 float 이미지를 위한 역할로 돌아감
• 웹에서는 여전히 사용하는 경우도 있다.

Flexbox

CSS Flexible Box Layout

• 오랫동안 CSS Layout을 작성할 수 있는 도구는 float 및 positioning 뿐이었음
  • 문제가 있는 것은 니지만, 한계가 존재
• Flexbox라 불리는 레이아웃 방식 등장

요소와 축

• 요소간 공간 배분과 정렬을 위한 것

• Flexbox에선 요소와 축만 기억하면 됨!

• 요소

  • Flex Container (부모 요소)
  • Flex item (자식 요소)

• 축

  • 메인축 (main axis)
  • 교차축 (cross axis)

flexbox 구성 요소

• flex container (부모 요소)
  • flexbox 레이아웃을 형성하는 가장 기본적인 모델
  • flex item 들이 놓여있는 영역
  • 생성하려면 display 속성을 flex 혹은 inline-flex로 지정
  • 사실상 정렬을 하는 주체
• flex item (자식 요소)
  • 컨테이너의 컨텐츠

flex에 적용하는 속성

• 배치 방향 설정 (main axis)
  • flex-direction
• 메인축 정렬
  • justify-content
• 교차축 정렬
  • align-items, align-self, align-content
• 기타
  • flex-wrap, flex-flow 등

flex-direction

• 메인축(main-axis) 방향만 바뀐다.
• flexbox는 단방향 레이아웃이기 때문
• default

.box {
    diplay: flex;
    flex-direction: column;
}

.box {
    diplay: flex;
    flex-direction: row-reverse;
}

justify & align

• justify (메인축 정렬)
• align (교차축 정렬)

.box {
    diplay: flex;
    justify-content: space-evenly;
    align-items: center;
}

content & items & self

• content : 여러 줄 (부모 요소에서 작성)
• items : 한 줄 (부모 요소에 작성)
• self : flex item 개별 요소 (자식 요소에서 작성)
• 예시
  • justify-content : 메인축 기준 여러 줄 정렬
  • align-items : 교차축 기준 한 줄 정렬
  • align-self : 교차축 기준 선택한 요소 하나 정렬

정리

• display: flex
  • 정렬하려는 부모 요소에 작성
  • inline-flex: flex 영역을 블록으로 쓰지 않고 인라인 블록으로 지정

• flex-direction
  • item이 쌓이는 방향 설정
  • main-axis를 변경
  • row (기본값) : 메인축의 방향이 왼쪽에서 오른쪽
  • row-reverse : 메인축의 방향이 오른쪽에서 왼쪽
  • column : 주축의 방향이 위에서 아래
  • column-reverse : 주축의 방향이 아래에서 위

• flex-wrap

  • 요소들이 강제로 한 줄에 배치 되게 할 것인지 여부 설정

  • nowrap (default) : 모든 아이템들 한 줄에 나타내려고 함 > 그래서 자리가 없어도 튀어나옴

  • wrap : 넘치면 그 다음 줄로 (무조건 감싼다)

  • wrap-reverse : 넘치면 그 윗줄로(역순)

• flex-flow

  • flex-direction과 flex-wrap의 shorthand

  • flex-direction과 flex-wrap에 대한 설정 값을 차례로 작성

  • flex-flow: row nowrap;

• justify-content

  • main 축 정렬

  • flex-start : 기본값으로, 시작 지점부터 차례대로 쌓임

  • flex-end : 쌓이는 뱡향이 뒤쪽부터 시작

  • center : 정 중앙

  • space-between : 좌우 정렬 (item들 간의 간격이 동일)

  • space-around : 균등 좌우 정렬 (내부 요소 여백은 외곽 여백의 2배)

  • space-evenly : 균등 정렬 (내부 요소 여백과 외곽 여백 모두 동일)

• align-items

  • cross 축 정렬
  • stretch : 기본값으로, 크기를 변경시켜 컨테이너를 가득 채움
  • flex-start : 기존 크기로 변하며, 위 부터
  • flex-end : 아래
  • center : 가운데
  • baseline : item 내부의 text에 기준선을 맞춤

• align-self

  • 개별 item에 적용하는 속성 (정렬 방식은 align-items와 동일하나 속성이 적용되는 대상이 개별 item)
  • 위의 명령과는 다르게 자식 요소에서 작성함
  • auto : 기본값
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch : 부모 컨테이너에 자동으로 맞춰서 늘어남

.bix box {
    display: flex;
    justify-content: center;
}

.small box {
    align-self: flex-start;
}

• order
  • 작은 숫자 일수록 앞(우선 쌓이는 방향)으로 이동
  • 기본 값 : 모든 아이템들은 0

.small box {
    align-self: center;
    order: 1;
    flex-grow: 2;
}

• flex-grow
  • 주축에서 남는 공간을 항목들에게 분배하는 방법
  • 각 아이템의 상대적 비율을 정하는 것은 아님
  • 기본값 : 0
  • 음수 불가능
  • 사실상 grid로 비율 설정하는 일이 많다.