HTML DOM의 alignSelf 속성은 플렉스(flex) 컨테이너 내부에 있는 특정 아이템의 정렬 방식을 지정할 때 사용됩니다. 이 속성은 요소의 그리드(grid) 또는 플렉스 레이아웃에서 기존에 설정된 align-items 값을 개별 아이템 단위로 재정의(override)할 수 있어, 세밀한 정렬 제어가 가능합니다.
문법(Syntax)
alignSelf 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
속성값(Values)
alignSelf 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| stretch | 기본값(default)으로, 아이템을 컨테이너 크기에 맞춰 늘려 채웁니다. |
| center | 아이템을 컨테이너의 중앙에 배치합니다. |
| flex-start | 아이템을 컨테이너의 시작 지점에 배치합니다. |
| flex-end | 아이템을 컨테이너의 끝 지점에 배치합니다. |
| baseline | 아이템을 컨테이너의 기준선(baseline)에 맞춰 배치합니다. |
| initial | 해당 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
예제(Example)
다음은 Style 객체의 alignSelf 속성을 활용한 실습 예제입니다. 버튼을 클릭하면 두 번째 자식 요소의 정렬 방식이 flex-end로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
align-items: baseline;
flex-flow: row wrap;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign() {
document.getElementsByClassName("ele")[1].style.alignSelf = "flex-end";
}
</script>
</head>
<body>
<h2>데모 제목</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>아래 버튼을 클릭하면 위 div 요소의 alignSelf 속성이 변경됩니다.</p>
<button onclick="changeAlign()">변경</button>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
[변경] 버튼 클릭 후 – 두 번째 요소가 컨테이너 하단으로 이동한 것을 확인할 수 있습니다.
