목차
place-self 예제 - 그리드셀 내 개별 아이템 (수직/수평) 일괄 지정
place-self 정의
place-self 구문
place-self 예제 - writing-mode 속성으로 블락방향 변경 경우
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 셀 내 개별 아이템의 (횡축/종축) 정렬 지정하는 속성으로, 아래 속성을 일괄 지정 가능한 단축속성.
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>
결과보기
주소 복사
랜덤 이동