> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/box-alignment/place/self.md).

# self()

justify-self, align-self 믹스인

## 용도 <a href="#use" id="use"></a>

[CSS 박스 정렬(Box Alignment)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment)을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

{% hint style="info" %}
self() 믹스인은 [box-alignment()](/scss-mixins/mixins/box-alignment/box-alignment.md) 믹스인을 래핑하는 단축 믹스인입니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

`self()` 믹스인에 인라인(x) 축 값, 블록(y) 축 값을 콤마(,)로 구분하여 전달합니다.

> self($justify:**string**, $align:**string**)

```ruby
.usage {
  @include self(center, center);
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|     $justify    |  string  |              |     `null`    |
|      $align     |  string  |              |     `null`    |

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

```css
.usage {
  justify-self: center;
  align-self: center;
}
```

## 로직 <a href="#logic" id="logic"></a>

`self()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```ruby
@mixin self($justify: null, $align: null) {
  @include box-alignment('self', $justify, $align);
}
```

1. 전달 받은 인자 값을 전달해 [box-alignment()](/scss-mixins/mixins/box-alignment/box-alignment.md) 믹스인 호출

## 참고 <a href="#reference" id="reference"></a>

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)

믹스인에 사용된 자제 제작 모듈은 다음과 같습니다.

* [box-alignment()](/scss-mixins/mixins/box-alignment/box-alignment.md)