by 이듬(E.UID)

box-alignment()

박스 정렬(Box Alignment) 믹스인

용도

CSS 박스 정렬(Box Alignment)을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

CSS 박스 정렬 모듈은 다양한 박스 레이아웃 모델(블록, 테이블, 플렉스, 그리드 레이아웃)에서 박스 정렬과 관련된 CSS 기능을 지정합니다. 이 모듈은 일관된 CSS 정렬 방법을 만드는 것을 목표로 합니다.

이전 정렬 방법

CSS는 전통적으로 매우 제한된 정렬 기능을 가졌습니다. text-align 속성을 사용하여 텍스트를 정렬하고, margin 속성 값으로 auto를 사용하여 블록을 중앙에 배치하고, vertical-align 속성을 사용해 테이블 또는 인라인 블록 레이아웃에서 텍스트를 정렬할 수 있었습니다.

향상된 정렬 방법

CSS 박스 정렬 모듈의 등장으로 박스 정렬 방식은 보다 향상되어 2개의 축(axis), 즉 인라인 (또는 메인(main)) 축과 블록 (또는 교차(cross)) 축 중 하나에 콘텐츠를 정렬할 수 있습니다. 인라인 축은 사용 중인 쓰기 모드에서 문장의 단어가 흐르는 축을 말합니다다. 예를 들어 인라인 축은 수평(x축)입니다. 블록 축은 단락 요소와 같은 블록이 배치되고 인라인 축을 가로지르는 수직(y축)을 말합니다.

인라인 축을 기준으로 아이템을 정렬 할 때 justify-* 속성을 사용합니다.

블록 축을 기준으로 아이템을 정렬 할 때 align-* 속성을 사용합니다.

정렬 대상

표준 속성

블록 콘텐츠

justify-content, align-cotent

블록 아이템(들)

justify-items , align-items

개별 아이템

justify-self, align-self

Flexbox는flex-direction속성 설정에 따라 추가적인 복잡성이 증가합니다. 그러므로 flexbox로 레이아웃을 작업 할 때 인라인 또는 블록보다 메인 축과 교차 축으로 생각하는 것이 보다 쉽습니다.

사용법

box-alignment() 믹스인에 정렬 유형, 인라인(x) 축 값, 블록(y) 축 값을 콤마(,)로 구분하여 전달합니다.

box-alignment($type:string, $justify:string, $align:string)

.usage {
  @include box-alignment(content, center, center);
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$type

string

✔︎

$justify

string

✔︎

$align

string

✔︎

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  justify-content: center;
  align-content: center;
}

로직

box-alignment() 믹스인은 다음의 로직에 의해 작성되었습니다. 

$using-place-layout: false !default;

@mixin box-alignment($type, $justify, $align) {
  @if not $using-place-layout {
    justify-#{$type}: $justify;
    align-#{$type}: $align;
  } @else {
    place-#{$type}: $align $justify;
  }
}

  1. place-* 속성을 사용할 것인지 유무 조건에 따라 처리

  2. place-* 속성을 사용하지 않을 경우, justify-*, align-* 속성으로 처리

  3. place-* 속성을 사용할 경우, place-*속성으로 처리 (align-*, justify-* 순서)

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

Previous박스 정렬 (Box Alignment)Nextplace()

Last updated