CSS - justify-self 속성: 그리드 아이템 정렬 마스터하기

안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 justify-self 속성의 마법의 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 흥미로운 여정을 안내해 드리겠습니다. 그러니 가상의 지팡이(키보드)를 손에 쥐고, CSS의 마법을 부르러 가 보겠습니다!

CSS - Justify Self

justify-self는 무엇인가요?

본격적인 내용으로 들어가기 전에, justify-self 속성이 정확히 무엇을 하는지 이해해 보겠습니다. 그리드 컨테이너가 있고, 그 안에 여러 그리드 아이템이 들어 있다고 상상해 보세요. justify-self 속성은 이러한 개별 그리드 아이템을 수직(수평) 축에 따라 정렬할 수 있게 해줍니다. 마치 각 아이템에 개인적인 스타일리스트를 두고, 어디서 스포트라이트를 받아야 할지 결정하게 하는 것입니다!

문법과 가능한 값

justify-self의 기본 문법은 간단합니다:

.grid-item {
justify-self: value;
}

이제 가능한 모든 값을 살펴보겠습니다:

값	설명
auto	브라우저가 정렬을 결정
normal	`auto`와 유사
stretch	아이템을 셀 전체로 확장
start	셀의 시작 부분에 정렬
end	셀의 끝 부분에 정렬
center	셀의 중간에 정렬
flex-start	시작 부분에 정렬 (flex 컨테이너용)
flex-end	끝 부분에 정렬 (flex 컨테이너용)
self-start	아이템의 방향에 따라 시작 부분에 정렬
self-end	아이템의 방향에 따라 끝 부분에 정렬
left	셀의 왼쪽에 정렬
right	셀의 오른쪽에 정렬
baseline	셀의 기저선에 정렬
last baseline	셀의 마지막 기저선에 정렬

와우, 이清单은 꽤 길네요! 이리하여 두려워하지 마세요; 우리는 예제를 통해 하나씩 풀어보겠습니다.

적용 대상

예제를 들어보기 전에, justify-self가 다음에 적용된다는 것을 알아두기 중요합니다:

그리드 아이템
그리드 컨테이너인 블록 내에서 절대 위치 지정된 요소

이제 각 값을 몇 가지 실용적인 예제로 탐구해 보겠습니다!

CSS justify-self - auto 값

.grid-item {
justify-self: auto;
}

auto는 브라우저가 조종을 맡습니다. 마치 아이템에게 "가장 좋다고 생각하는 곳으로 가!"라고 말하는 것과 같습니다. 일반적으로 이는 stretch와 비슷하게 동작합니다.

CSS justify-self - normal 값

.grid-item {
justify-self: normal;
}

normal은 기본 값으로, 일반적으로 그리드 아이템에 대해 stretch와 동일하게 행동합니다. 이는 justify-self 값 중 "운이 좋다"는 것과 같은 것입니다!

CSS justify-self - stretch 값

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

이 값은 아이템을 셀 전체 너비로 확장시킵니다. 마치 아이템에게 "큰 규모로 가거나 집으로 가!"라고 말하는 것입니다!

CSS justify-self - start 값

.grid-item {
justify-self: start;
}

이는 아이템을 셀의 시작 부분에 정렬합니다. 마치 아이템이 방의 왼쪽 벽을 껴안고 있는 것을 상상해 보세요.

CSS justify-self - end 값

.grid-item {
justify-self: end;
}

start의 반대로, 이는 아이템을 셀의 끝 부분으로 밀어냅니다. 마치 아이템이 오른쪽 벽 뒤에 숨고 있는 것을 상상해 보세요.

CSS justify-self - center 값

.grid-item {
justify-self: center;
}

이는 아이템을 셀의 중간에 배치합니다. 마치 아이템이 관심의 중심에 서 있는 것처럼!

CSS justify-self - flex-start 및 flex-end 값

.grid-item {
justify-self: flex-start; /* 또는 flex-end */
}

이 값들은 start와 end와 유사하지만, 일반적으로 flex 컨테이너에서 사용됩니다. 그리드 레이아웃에서는 일반적으로 start와 end와 동일하게 동작합니다.

CSS justify-self - self-start 및 self-end 값

.grid-item {
justify-self: self-start; /* 또는 self-end */
}

이는 아이템의 방향에 따라 시작 부분 또는 끝 부분에 정렬합니다. 만약 아이템의 direction이 ltr (왼쪽에서 오른쪽으로)라면, self-start는 start와 동일합니다. 마치 아이템이 항상 개인적인 북쪽을 향하고 있는 나침반을 가지고 있는 것처럼!

CSS justify-self - left 및 right 값

.grid-item {
justify-self: left; /* 또는 right */
}

이 값들은 셀의 왼쪽 또는 오른쪽에 아이템을 정렬합니다. 쓰기 모드나 방향과 관계없이 이루어집니다. 이들은 start와 end의 꼭두서니처럼 강력합니다.

CSS justify-self - baseline 및 last baseline 값

.grid-item {
justify-self: baseline; /* 또는 last baseline */
}

이는 아이템을 셀의 기저선에 정렬합니다. 텍스트 콘텐츠가 있을 때, 인접 셀의 텍스트와 완벽하게 정렬하려고 할 때 특히 유용합니다.

모든 것을 함께

이제 모든 값을 탐구한 만큼, 여러 가지 justify-self 값을 동시에 보여주는 재미있는 예제를 만들어 보겠습니다:

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.start { justify-self: start; }
.end { justify-self: end; }
.center { justify-self: center; }
.stretch { justify-self: stretch; }

이 예제에서, 우리는 그리드 컨테이너에 네 개의 아이템을 두고, 각각 다른 justify-self 값을 시연하고 있습니다. 마치 각 아이템이 자신만의 독특한 방식으로 패션 쇼를 하고 있는 것처럼!

그렇게 우리는 justify-self의 땅을 여행하며, 그 많은 면과 가능성을 탐구했습니다. 기억하세요, CSS는 실험과 창의성에 관한 것입니다. 두려워하지 마시고 이러한 값을 섞어서 독특한 레이아웃을 만들어 보세요.

이 수업을 마무리하면서, 저는 지혜로운 옛 CSS 명사가 한 말을 떠올립니다. "위대한 힘은 위대한 책임을 동반합니다... 멋진 레이아웃을 만드는 책임을 말이죠!" 그러니 실험해 보세요, 창의력을 발휘하시고, 항상 완벽하게 정렬된 그리드를 가지시길 바랍니다!

Credits: Image by storyset