[css] CSS - place-self 속성 - 그리드셀 내 개별 아이템 (수직/수평) 정렬 (= place-self속성 = 플레이스셀프속성)

목차

1. place-self 예제 - 그리드셀 내 개별 아이템 (수직/수평) 일괄 지정
2. place-self 정의
3. place-self 구문
4. place-self 예제 - writing-mode 속성으로 블락방향 변경 경우
5. place-self 예제 - 그리드셀 내 개별 아이템 (수직/수평) 각각 지정

place-self 예제 - 그리드셀 내 개별 아이템 (수직/수평) 일괄 지정

 

<style>

#container {

  width: 60%;

  aspect-ratio: 3/2;

  border: 1px solid gray;

  display: grid;

  grid-template-columns: 1fr 1fr;

}

#container > div {

  width: 60%;

  aspect-ratio: 3/2;

  margin: 2px;

  background-color: pink;

}

#hz {

  border: 1px solid red;

  place-self: end;

}

</style>

<div id="container">

  <div>1</div>

  <div id="hz">2</div>

  <div>3</div>

  <div>4</div>

</div>

 

결과보기

place-self 정의

 

grid 셀 내 개별 아이템의 (횡축/종축) 정렬 지정하는 속성으로, 아래 속성을 일괄 지정 가능한 단축속성.

• align-self 속성 - (grid/flex) 레이아웃 둘 다 가능.
• justify-self 속성 - (grid) 레이아웃에서만 가능. flex에선 작동 X

 

---

 

1.

(grid/flex) 모두에서 사용 가능하나, justify-self 속성값 부분은 flex에서 무시됨.

 

2. 속성값 개수별 의미

• 속성값이 2개인 경우 (예: start center) - align-self justify-self 속성순으로 나열.
• 속성값이 1개인 경우 (예: end) - 둘 다 end로 지정.

 

3.

• 기본값: auto
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.placeSelf="end stretch";

 

4.

IE 제외한 주요 최신 브라우저 모두 지원.

 

5. MDN place-self 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

 

place-self 구문

 

selector {place-self: auto|normal stretch|value|initial|inherit;}

 

---

[속성값]

 

auto

브라우저가 자동 지정. (기본값)

 

normal stretch

align-self 속성 (기본값: auto)과 justify-self 속성 (기본값: auto)순으로 나열. 

 

value

공통 사용 가능한 키워드. (가능값 종류)

• center -셀 중앙에 배치.
• end - 셀 끝 부분에 배치.
• start - 셀 시작 부분에 배치.
• stretch - 아이템 크기 미설정 된 경우, 아이템 크기 늘려 셀을 채움.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

place-self 예제 - writing-mode 속성으로 블락방향 변경 경우

 

<style>

#container {

  block-size: 60%;

  aspect-ratio: 1;

  border: 1px solid gray;

  display: grid;

  grid-template-columns: 1fr 1fr;

  writing-mode: vertical-rl;

}

#container > div {

  inline-size: 70%;

  aspect-ratio: 1;

  margin: 2px;

  background-color: pink;

}

#hz {

  border: 1px solid red;

  place-self: end;

}

</style>

<div id="container">

  <div>1</div>

  <div id="hz">2</div>

  <div>3</div>

  <div>4</div>

</div>

 

결과보기

place-self 예제 - 그리드셀 내 개별 아이템 (수직/수평) 각각 지정

[예제1] - grid 경우

 

<style>

#container {

  width: 60%;

  aspect-ratio: 3/2;

  border: 1px solid gray;

  display: grid;

  grid-template-columns: 1fr 1fr;

}

#container > div {

  width: 60%;

  aspect-ratio: 3/2;

  margin: 2px;

  background-color: pink;

}

#hz {

  border: 1px solid red;

  place-self: end center;

}

</style>

<div id="container">

  <div>1</div>

  <div id="hz">2</div>

  <div>3</div>

  <div>4</div>

</div>

 

결과보기 (※ 참고: div에 너비 설정되어서, stretch 속성값 경우 작동 X)

---

[예제2] - flex 경우

justify-self 속성은 flex와 무관해 무시됨. (∴ 2번째 속성값 stretch는 적용 X)

 

<style>

#container {

  width: 60%;

  aspect-ratio: 2/3;

  border: 1px solid gray;

  display: flex;

  flex-wrap: wrap;

  place-items: start;

}

#container > div {

  padding: 40px;

  margin: 2px;

  background-color: silver;

  

}

#container > div#hz {

  border: 1px solid red;

  background-color: pink;

  place-self: end stretch;

}

</style>

<div id="container">

  <div>1</div>

  <div>2</div>

  <div id="hz">3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

</div>

결과보기