CSS - place-content: 초보자를 위한 친절한 가이드
안녕하세요, 미래의 웹 디자인 슈퍼스타! ? CSS의 fascinatings한 세계에 빠져들 준비가 되셨나요? 오늘 우리는 place-content라는 쓰기 쉬운 프로퍼티를 탐구해볼 거예요. 믿으세요, 이 프로퍼티는 웹 레이아웃에서 요소를 정렬할 때 여러분의 삶을 훨씬 더 쉽게 만들어 줄 거예요. 그럼 커피(또는 차, 여러분이 좋아하는 것을 마시고)를 한 잔 마시고, 시작해보겠습니다!
place-content는 무엇인가요?
방에가구를 배치하는 상상해보세요. 모든 것을 정확하게 보이게 하고 싶지만, 각 조각을 개별적으로 옮기는 것은 귀찮습니다. 이때 place-content가 등장합니다 - 마법의 지팡이처럼 웹 페이지의 요소를 쉽게 정렬할 수 있도록 도와줍니다!
place-content 프로퍼티는 align-content와 justify-content를 한 번에 설정하는 축약형입니다. 한 방에 두 마리의 새를 잡는 것처럼(하지만, 이 CSS 프로퍼티 제작 과정에서 새들이 해를 입지 않았으니 안심하세요 ?).
가능한 값
와우, 여기에 꽤 많은 옵션이 있습니다! 이들을 간단하고 읽기 쉽게 표로 나누어 보겠습니다:
| 값 | 설명 |
|---|---|
| center | 콘텐츠를 수직과 수평으로 모두 중앙에 위치시킵니다 |
| start | 콘텐츠를 컨테이너의 시작 부분에 정렬합니다 |
| end | 콘텐츠를 컨테이너의 끝 부분에 정렬합니다 |
| flex-start |
start와 유사하지만, fleks 컨테이너에 대해 적용됩니다 |
| flex-end |
end와 유사하지만, fleks 컨테이너에 대해 적용됩니다 |
| baseline | 콘텐츠를 기준선에 따라 정렬합니다 |
| space-between | 아이템을 균일하게 분포시키고, 간격을 둡니다 |
| space-around | 아이템을 균일하게 분포시키고, 각 아이템 주위에 공간을 둡니다 |
| space-evenly | 아이템 사이와 주위에 같은 간격으로 분포시킵니다 |
이러한 값들이 압도적이게 느껴질 수 있습니다만, 우리는 각각의 값에 대해 예제를 통해 설명해 나갈 테니 걱정 마세요!
적용 대상
자세한 내용에 들어가기 전에, 어디에서 place-content를 사용할 수 있는지 알아보는 것이 중요합니다. 이 프로퍼티는 다음에 적용됩니다:
- 그리드 컨테이너
- Fleks 컨테이너
그래서 그리드나 fleks박스를 사용할 때, place-content는 여러분의 새로운 최고의 친구가 될 것입니다!
문법
place-content의 기본 문법은 매우 간단합니다:
.container {
place-content: <align-content> <justify-content>;
}하나나 두 개의 값을 사용할 수 있습니다. 하나를 사용하면 양쪽 정렬 방향에 적용됩니다. 두 개를 사용하면 첫 번째는 align-content(수직 정렬)에, 두 번째는 justify-content(수평 정렬)에 적용됩니다.
이제 몇 가지 구체적인 예제를 보겠습니다!
CSS place-content - center start 값
.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}이 예제에서는 콘텐츠가 수직으로 중앙에 위치하고, 수평으로는 시작 부분(왼쪽)에 정렬됩니다. 방의 한쪽에 가구를 모두 밀어넣고 수직으로는 중앙에 두는 것과 같습니다.
CSS place-content - start center 값
.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}여기서는 반대로 - 콘텐츠가 상단에 정렬되고 수평으로는 중앙에 정렬됩니다. 가구를 상단 벽에 모두 배치하고 왼쪽에서 오른쪽으로 균일하게 분포시키는 것과 같습니다.
CSS place-content - end right 값
.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}이 경우 콘텐츠가 컨테이너의 하단 오른쪽 모서리로 이동합니다. 실제 생활에서는 추천하지 않지만, 가구를 방의 한 모서리에 모두 밀어넣는 것과 같습니다.
CSS place-content - flex-start center 값
.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}start center와 유사하지만, fleks 컨테이너에 대해 적용됩니다. 콘텐츠는 상단(또는 왼쪽 방향)에 위치하고 수평으로는 중앙에 정렬됩니다.
CSS place-content - flex-end center 값
.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}flex-start center와 유사하지만, fleks 컨테이너의 끝 부분에 정렬됩니다.
CSS place-content - last baseline 값
.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}이 값은 마지막 줄의 기준선에 따라 콘텐츠를 정렬합니다. 모든 텍스트가 가상의 선 위에 정확하게 위치하게 만드는 것과 같습니다.
CSS place-content - space-between 값
.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}이 값은 아이템을 균일하게 분포시키고, 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 배치합니다. 방의 각 쪽에 가구를 배치하고, 각 가구 사이에 균일한 간격을 둔 것과 같습니다.
CSS place-content - space-around 값
.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}space-between과 유사하지만, 첫 번째와 마지막 아이템 앞뒤에도 공간을 둡니다. 각 가구 주위에 작은 공간을 만드는 것과 같습니다.
CSS place-content - space-evenly 값
.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}이 값은 아이템 사이와 주위에 같은 간격으로 분포시킵니다. 가구를 방에 균일하게 배치하는 가장 균형 잡힌 방법입니다.
이제 place-content 프로퍼티와 그 다양한 값을 배웠습니다! 연습이 완벽을 만드는 것을 기억하고, 자신의 프로젝트에서 이를 실험해 보세요. 얼마 지나지 않아 콘텐츠 정렬에 프로처럼 능숙해질 것입니다!
계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 하세요! ?????
Credits: Image by storyset