[CSS] 레이아웃, Selector

Atomic CSS 방법론

• 클래스 이름과 구현을 1:1로 일치

.w70 { width: 70%; }
.h40 { height: 40%; }

레이아웃 리셋

• HTML 문서가 가지고 있는 기본적인 스타일을 초기화하면 레이아웃 구성에 도움이 된다.
• 브라우저마다 여백, 글꼴 기본 스타일이 제 각각이기도 하다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

• display: flex 분석하기

display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치 (수직으로 분할되는 것이 기본값)

• Flex 요소에 방향 지정하기 (flex-direction)

display 속성에 flex를 적용하는 것은 부모 요소 (display: flex)

자식 요소는 flex라는 속성에 값을 적용 (flex: 0 1 auto)

grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

자식 요소의 flex 속성을 추가하지 않은 경우,

flex: 0 1 auto; // flex: <grow> <shrink> <basis> ! 순서 중요 !

와 같은 기본값이 적용되는 것이다.

• grow: 얼마나 늘어날 수 있을까?

모든 자식 박스의 flex-grow 속성이 큰 경우 (각 숫자 크기 상관없이) 모두 같은 가로 길이를 가진다.

• shrink: 얼마나 줄어들 수 있을까?

줄어드는 비율. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.

• basis: 박스의 기본 크기?

늘어나거나 줄어들기 전에 가지는 기본 크기. flex-grow가 0일 때만, basis 크가가 유지된다.

콘텐츠 수평 정렬 (justify-content)

콘텐츠 수평 정렬 (justify-content)