CSS - justify-items 속성
안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 CSS의 fascineting 세계로 뛰어들어 justify-items 속성에 대해 탐구해보겠습니다. 이 속성을 사용하면 레이아웃이 베테랑 전문가가 만들어낸 것처럼 보일 수 있습니다. justify-items 속성에 대해 이야기하겠습니다. 믿어주세요, 이 튜토리얼이 끝나면 여러분은 최고재판소 재판관처럼 항목을 정리할 수 있을 것입니다! ?
justify-items는 무엇인가요?
자세한 내용으로 들어가기 전에 justify-items가 무엇을 하는지 이해해보겠습니다. 그리드 컨테이너에 귀여운 작은 그리드 아이템이 가득 차 있다고 상상해보세요. justify-items 속성은 이러한 아이템들이 그리드 영역 내에서 수직(보통 수평) 축에 따라 어떻게 정렬되는지 조정할 수 있는 마법의 지팡이 같은东西입니다.
문법
justify-items의 기본 문법은 매우 간단합니다:
.container {
justify-items: value;
}value는 곧 다음과 같은 많은 옵션 중 하나입니다. 하지만 먼저 간단한 그리드를 만들어 놀아보겠습니다:
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}이렇게 하면 2x2 그리드와 네 개의 아이템이 만들어집니다. 이제 justify-items에 사용할 수 있는 다양한 값을 탐구해보겠습니다!
가능한 값
다음은 justify-items에 대한 모든 가능한 값을 나열한 표입니다:
| 값 | 설명 |
|---|---|
| normal | 기본 값, 일반적으로 stretch와 동일하게 동작 |
| stretch | 아이템을 그리드 영역으로 확장 |
| start | 그리드 영역의 시작 부분에 아이템을 정렬 |
| end | 그리드 영역의 끝 부분에 아이템을 정렬 |
| center | 그리드 영역에서 아이템을 중앙 정렬 |
| flex-start | 시작 부분에 아이템을 정렬 (flex 컨테이너용) |
| flex-end | 끝 부분에 아이템을 정렬 (flex 컨테이너용) |
| self-start | 자신의 시작 쪽에 아이템을 정렬 |
| self-end | 자신의 끝 쪽에 아이템을 정렬 |
| left | 왼쪽에 아이템을 정렬 |
| right | 오른쪽에 아이템을 정렬 |
| baseline | 기준선에 따라 아이템을 정렬 |
| last baseline | 마지막 기준선에 따라 아이템을 정렬 |
| safe center | 안전하게 중앙 정렬 (데이터 손실 방지) |
| legacy right | 오른쪽 정렬 (레거시 지원) |
이제 이러한 값을 예제와 함께 설명해보겠습니다!
CSS justify-items - normal 값
.grid-container {
justify-items: normal;
}normal 값은 기본 값입니다. 대부분의 경우 stretch와 동일하게 동작합니다. 그리드 아이템에게 "자신이 되어라!"라고 말하는 것과 같습니다.
CSS justify-items - stretch 값
.grid-container {
justify-items: stretch;
}stretch를 사용하면 아이템이 그리드 영역을 채우기 위해 확장됩니다. 그리드 아이템에게 "깊게 숨을 쉬고 확장하라!"라고 말하는 것과 같습니다.
CSS justify-items - start 값
.grid-container {
justify-items: start;
}start 값은 그리드 영역의 시작 부분에 아이템을 정렬합니다. 아이템이 경주의 시작선에 줄 세우는 것을 상상해보세요.
CSS justify-items - end 값
.grid-container {
justify-items: end;
}反대로, end 값은 그리드 영역의 끝 부분에 아이템을 밀어넣습니다. 아이템이 결선을 만지려고 하는 것을 상상해보세요!
CSS justify-items - center 값
.grid-container {
justify-items: center;
}center는 당신이 기대할 수 있는 것처럼 그리드 영역에서 아이템을 중앙 정렬합니다. 균형 잡힌, 선이 맞춰진 레이아웃을 만들기에 완벽합니다.
CSS justify-items - flex-start 및 flex-end 값
.grid-container {
justify-items: flex-start;
}.grid-container {
justify-items: flex-end;
}이 값들은 start와 end와 유사하지만, flex 컨테이너에 특화되어 있습니다. start와 end의 cool cousins라고 할 수 있습니다.
CSS justify-items - self-start 및 self-end 값
.grid-container {
justify-items: self-start;
}.grid-container {
justify-items: self-end;
}이 값들은 아이템을 자신의 시작 쪽이나 끝 쪽에 정렬합니다. 일부 쓰기 모드에서 컨테이너의 시작이나 끝과 다를 수 있습니다. 각 아이템이 자신이 원하는 침대의 쪽을 선택하는 것과 같습니다!
CSS justify-items - left 및 right 값
.grid-container {
justify-items: left;
}.grid-container {
justify-items: right;
}이 값들은 그대로 말합니다 - 왼쪽이나 오른쪽에 아이템을 정렬합니다. 간단하고 직관적이며, 아침에 좋은 커피처럼입니다.
CSS justify-items - baseline 및 last baseline 값
.grid-container {
justify-items: baseline;
}.grid-container {
justify-items: last baseline;
}이 값들은 아이템을 기준선이나 마지막 기준선에 따라 정렬합니다. 다양한 크기의 텍스트가 있을 때 아이템을 고루 정렬하고 싶을 때 유용합니다.
CSS justify-items - safe center 값
.grid-container {
justify-items: safe center;
}이 값은 아이템을 중앙 정렬하지만, 데이터 손실을 방지합니다. 중앙 정렬된 아이템에 대한 안전망입니다!
CSS justify-items - legacy right 값
.grid-container {
justify-items: legacy right;
}이 값은 뒤 向き 호환성을 위해 있습니다. 오래된 플립폰을 가지고 있지만 사용하지 않을 것 같지만, 필요할 때 사용할 수 있습니다!
이제 여러분은 justify-items 속성에 대해 빠른 여행을 마쳤습니다. CSS를 완벽하게 습득하려면 연습이 중요합니다. 그러니 이러한 값을 실험해보고 아름답게 정렬된 레이아웃을 만들어보세요. 얼마 지나지 않아 여러분은 잠에서도 항목을 정리할 수 있을 것입니다!
행복하게 코딩하세요, 그리고 여러분의 그리드가 항상 완벽하게 정렬되기를 바랍니다! ?????
Credits: Image by storyset