CSS - place-self 속성: 초보자 가이드

안녕하세요, 미래의 CSS 마스터 여러분! 오늘 우리는 CSS의 fascinле는 세계로 뛰어들어 place-self이라는 작은 속성을 탐구해 보겠습니다. 초보자라고 걱정하지 마세요; 단계별로 안내해 드릴 테니, 제 학생들에게 수년간 해왔던 것처럼. 이 튜토리얼이 끝나면, 프로처럼 요소를 배치할 수 있을 거예요!

place-self는 무엇인가요?

deep end로 뛰어들기 전에, 기본적인 내용부터 시작해 보겠습니다. place-self 속성은 align-self와 justify-self 속성을 단일 선언에서 설정하는 약자입니다. 두 마리의 새를 한 번에 잡는 것처럼 보이지만, 훨씬 인도적인 방법이며 CSS와 관련이 있습니다!

문법

place-self의 문법은 매우 간단합니다:

place-self: <align-self> <justify-self>;

단일 값을 제공하면, align-self와 justify-self 모두에 적용됩니다. 콤보 메뉴를 주문하는 것처럼 - 하나의 가격에 두 가지를 얻습니다!

가능한 값

이제 place-self를 사용할 수 있는 다양한 값을 살펴보겠습니다. 표 형식으로 제시하여 학생들이 정보를 더 쉽게 이해할 수 있도록 합니다:

값	설명
auto	요소는 부모 컨테이너의 align-self/justify-self 동작을 상속합니다
normal	요소는 문서의 정상적인 흐름에 따라 배치됩니다
start	요소를 컨테이너의 시작 부분에 정렬합니다
end	요소를 컨테이너의 끝 부분에 정렬합니다
center	요소를 컨테이너 내에서 중앙에 정렬합니다
stretch	요소를 컨테이너에 맞게 확장합니다
flex-start	요소를 flex 컨테이너의 시작 부분에 정렬합니다
flex-end	요소를 flex 컨테이너의 끝 부분에 정렬합니다
self-start	요소를 자신의 축의 시작 부분에 정렬합니다
self-end	요소를 자신의 축의 끝 부분에 정렬합니다
baseline	요소를 컨테이너의 기준선에 정렬합니다
first baseline	요소를 컨테이너의 첫 번째 기준선에 정렬합니다
last baseline	요소를 컨테이너의 마지막 기준선에 정렬합니다

적용 대상

place-self 속성은 그리드 항목과 flex 항목에 적용됩니다. 특별한 능력을 가진 특정 슈퍼 헴어(또는 우리의 경우, 요소)만이 가지는 특별한 능력입니다!

이제 몇 가지 예제를 통해 이러한 값들이 실제로 어떻게 작동하는지 살펴보겠습니다.

CSS place-self - normal start 값

.item {
place-self: normal start;
}

이 선언은 요소를 정상적인 흐름에 따라 정렬하고 컨테이너의 시작 부분에 정렬합니다. 요소에게 "정상적으로 하되, 시작 부분에서 시작하세요!"라고 말하는 것과 같습니다.

CSS place-self - auto center 값

.item {
place-self: auto center;
}

여기서는 "부모의 정렬을 상속하되, 수평으로 중앙에 정렬하세요."라고 말하는 것입니다. 요소가 수직으로는 흐름을 따르되 수평으로는 돋보이고 싶을 때 완벽합니다.

CSS place-self - center normal 값

.item {
place-self: center normal;
}

이것은 요소를 수직으로 중앙에 정렬하고 수평으로는 정상적인 흐름을 따릅니다. 요소가 방의 중간에 있지만 여전히 정상적인 파티 예절을 따르는 것을 상상해 보세요!

CSS place-self - end normal 값

.item {
place-self: end normal;
}

이것은 요소를 수직으로 컨테이너의 끝 부분에 정렬하고 수평으로는 정상적인 흐름을 따릅니다. 요소가 무리의 뒤에서 발끝을 들고 서 있는 것을 상상해 보세요!

CSS place-self - start auto 값

.item {
place-self: start auto;
}

이것은 요소를 수직으로 컨테이너의 시작 부분에 정렬하고 수평으로는 상속합니다. "나는 위에서 시작하지만 수평으로는 흐름을 따릅니다."라고 말하는 것입니다.

CSS place-self - self-start auto 값

.item {
place-self: self-start auto;
}

이것은 요소를 수직으로 자신의 시작 부분에 정렬하고 수평으로는 상속합니다. 요소가 "나는 수직으로 자신의 방식을 따르지만 수평으로는 무리를 따릅니다."라고 말하는 것입니다.

CSS place-self - self-end normal 값

.item {
place-self: self-end normal;
}

이것은 요소를 수직으로 자신의 끝 부분에 정렬하고 수평으로는 정상적인 흐름을 따릅니다. 요소가 발끝을 땅에 박고 서 있는 것을 상상해 보세요!

CSS place-self - flex-start auto 값

.item {
place-self: flex-start auto;
}

flex 컨테이너에서 이것은 요소를 수직으로 컨테이너의 시작 부분에 정렬하고 수평으로는 상속합니다. 요소가 상단에서 시작하고 수평으로는 flex 흐름을 따르고 싶을 때 완벽합니다.

CSS place-self - flex-end normal 값

.item {
place-self: flex-end normal;
}

flex 컨테이너에서 이것은 요소를 수직으로 컨테이너의 끝 부분에 정렬하고 수평으로는 정상적인 흐름을 따릅니다. 요소가 손을 들고 서 있는 것처럼 보입니다!

CSS place-self - baseline normal 값

.item {
place-self: baseline normal;
}

이것은 요소의 기준선을 컨테이너의 기준선에 정렬하고 수평으로는 정상적인 흐름을 따릅니다. 다양한 요소 간의 텍스트 정렬을 유지하는 데 좋습니다.

CSS place-self - last baseline normal 값

.item {
place-self: last baseline normal;
}

기준선과 유사하지만, 여러 기준선이 존재할 때 마지막 기준선을 사용합니다. 요소가 마지막 말을 하고 싶을 때 유용합니다!

CSS place-self - stretch auto 값

.item {
place-self: stretch auto;
}

이것은 요소를 수직으로 컨테이너에 맞게 확장하고 수평으로는 상속합니다. 요소가 "나는 가능한 한 높이되고, 수평으로는 흐름을 따릅니다."라고 말하는 것입니다.

그렇게 해서 여러분! 우리는 place-self 속성과 그 다양한 값을 탐구했습니다. CSS를 마스터하는 열쇠는 연습입니다. 그러니 이러한 값을 실험하고, 혼합하고, 멋진 레이아웃을 만들어 보세요!

제 경험에서는, CSS를 실험하고 즐기는 학생들이 더 빠르게 배우고 더 많이 기억합니다. 그러니 창의적으로 도전해 보세요! 누가 알겠는가? 당신만의 독특한 조합을 발견할 수도 있습니다.

快乐的编程을 하고, 요소들이 항상 완벽하게 배치되길 바랍니다!

Credits: Image by storyset