CSS 고급 요약 설명
- transform, transition, animation 속성은 웹 요소의 시각적인 효과를 제어하고 다양한 애니메이션 효과를 추가하는 데 사용됩니다.
CSS3에서 도입된 기능으로, 웹 페이지의 사용자 경험을 향상시키고 동적인 디자인을 구현하는 데 중요한 역할을 합니다.- 플렉스박스(Flexbox), 멀티 컬럼(Multi Columns), 그리드(Grid)를 이용하여 보다 유연하고 현대적인 웹 레이아웃을 구현하는 방법을 알아봅니다.
요약 설명Box 정렬(Alignment)의 일부 동작은 레이아웃 방법에 따라 달라집니다.
CSS Grid / Flexbox의 각 레이아웃 방법에 따라 아이템 정렬이 어떻게 다르게 설정 되는지 비교해봅니다.
컨테이너 요소는 포함하는 아이템 자식 요소를 정렬할 수 있습니다. 정렬의 유형을 세부적으로 구분하면 다음 3가지로 나눌 수 있습니다.
이러한 키워드 값의 대부분은 문서의 쓰기 모드(Writing modes)와 관련되어 작동합니다.
글의 흐름이 좌 ⟹ 우 방향이라면 그리드 컨테이너의 왼쪽이 start 가 됩니다. 반대로 우 ⟹ 좌 방향이라면 오른쪽이 start가 됩니다.
블록과 인라인 축은 다양한 방법으로 사용됩니다.
블록 축은 grid 사양의 컬럼(column) 축으로, flexbox 에서는 교차(cross) 축으로 사용됩니다.
인라인 축은 grid에서 로우(row) 축으로, flexbox에서는 주(main) 축으로 사용됩니다.
grid는 언제나 명시적인 행/열을 가지고 있어 축을 기준으로 하는 정렬에 대해 이해하기 쉽습니다.
하지만 flexbox는 주 축(main axis) 방향이 바뀔 때마다 정렬 기준이 변경된다는 점에 유의해야 합니다.
grid - column 축
flexbox - cross 축
grid - row 축
flexbox - main 축
Block / Inline 축(Axis) ]
align-* 속성은 블록 축(수직 방향)과 관련된 속성입니다.
grid 레이아웃은 column 축에 해당되며, 명확하게 수직 방향으로만 정렬이 설정됩니다.
반면 flexbox는 flex-direction 속성 설정에 따라 교차 축의 방향이 바뀌기 때문에, 교차 축에 영향을 받는 align-* 속성의 정렬 또한 바뀝니다.
gridstretch가 설정된 것처럼 늘어난 형태로 동작합니다.
auto, normal, start, end, center, stretch,
baseline, first-baseline, last-baseline
column) 축
align-self의 기본 동작은 stretch 입니다.start값을 설정하면 그리드 컨테이너 블록 축의 시작 부분에 정렬됩니다.
flexstretch 값이 기본 입니다.
auto, normal, flex-start, flex-end, center, stretch,
baseline, first-baseline, last-baseline
cross) 축
align-self의 기본 동작은 stretch 입니다.
flex-direction 설정 값에 따라 늘어나는 방향이 변경됩니다.row일 경우 height,
column일 경우 width로 설정됩니다.start 값을 설정하면 교차 축의 시작 부분에 정렬됩니다.
justify-* 속성은 인라인 축(수평 방향)과 관련된 속성입니다.
grid 레이아웃은 row 축에 해당되며, 명확하게 수 방향으로만 정렬이 설정됩니다.
반면 flexbox 에는 justify-self, justify-items과 같은 속성을 지원하지 않습니다.
개별 아이템을 주 축 방향을 기준으로 정렬하고자 한다면 margin 속성을 사용 합니다.
gridstretch가 설정된 것처럼 늘어난 형태로 동작합니다.
auto, normal, start, end, center, stretch,
baseline, first-baseline, last-baseline
row) 축
justify-self의 기본 동작은 stretch 입니다.start값을 설정하면 그리드 컨테이너 인라인 축의 시작 부분에 정렬됩니다.
flex
justify-self 속성은 Flexbox에 적용되지 않습니다.
주 축에 여러 아이템이 존재해 이들 중 하나를 조정할 수 없습니다.
주 축에 콘텐츠를 정렬하고자 한다면 아래 작성된 justify-content 속성을 참고하세요.
인라인 축에 하나의 아이템만 정렬하고자 한다면, margin 속성을 사용해 아이템을 정렬할 수 있습니다.
align-content 속성은 블록 축(수직 방향)과 관련된 속성입니다.
grid 레이아웃은 column 축에 해당되며, 그리드 컨테이너에 여유 공간이 존재할 경우 정렬이 반영됩니다.
flexbox 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.
gridstretch가 설정된 것처럼 늘어난 형태로 동작합니다.
normal, start, end, center, stretch,
space-between, space-around, space-evenly,
baseline, first baseline, last baseline
column) 축
space-between 값을 설정하면 블록 축(수직 방향)을 기준으로 공간을 분산 정렬합니다.
flexstretch 값이 기본 입니다.
normal, flex-start, flex-end, center, stretch,
space-between, space-around, space-evenly,
baseline, first baseline, last baseline
cross) 축
align-content 속성은 컨테이너에 여유 공간이 있을 때 공간을 분산 정렬하도록 설정할 수 있습니다.
grid 레이아웃은 column 축에 해당되며, 그리드 컨테이너에 여유 공간이 존재할 경우 정렬이 반영됩니다.
flexbox 또한 컨테이너에 여유 공간이 있다면 정렬을 수행할 수 있습니다.
gridstretch가 설정된 것처럼 늘어난 형태로 동작합니다.
normal, start, end, center, stretch,
space-between, space-around, space-evenly,
baseline, first-baseline, last-baseline
row) 축
space-between 값을 설정하면 인라인 축(수평 방향)을 기준으로 공간을 분산 정렬합니다.
flexFlexbox 주(main) 축의 기본 값이 flex-start 이기에 잡아 당긴 것처럼 늘어납니다.
normal, flex-start, flex-end, center, stretch,
space-between, space-around, space-evenly,
baseline, first-baseline, last-baseline
justify-content 속성은 컨테이너에 여유 공간이 있을 때 공간을 분산 정렬하도록 설정할 수 있습니다.
