HTML DOM style verticalAlign 속성 – 수직 정렬 제어 방법과 예제

HTML DOM의 style.verticalAlign 속성은 HTML 문서 내에서 특정 요소 콘텐츠의 수직 정렬(vertical alignment) 상태를 확인하고, 원하는 값으로 변경할 수 있게 해주는 속성입니다.

문법(Syntax)

verticalAlign 속성은 아래와 같은 두 가지 방식으로 사용할 수 있습니다.

1. 현재 값 가져오기

object.style.verticalAlign

2. 새로운 값 설정하기

object.style.verticalAlign = "value"

사용 가능한 값(Values)

verticalAlign 속성에 지정할 수 있는 주요 값은 다음과 같습니다.

값	설명
initial	해당 속성 값을 기본(default) 값으로 되돌립니다.
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
length	지정한 길이(px, em 등)만큼 요소를 올리거나 내립니다.
percentage(%)	line-height 속성 값에 대한 백분율 기준으로 요소를 위아래로 이동시킵니다.
baseline	요소의 베이스라인을 부모 요소의 베이스라인에 맞춰 정렬합니다.
sub	요소를 아래 첨자(subscript) 형태로 정렬합니다.
super	요소를 위 첨자(superscript) 형태로 정렬합니다.
top	요소의 상단을 해당 라인에서 가장 높은 요소의 상단에 맞춰 정렬합니다.
text-top	요소의 상단을 부모 요소 폰트의 상단에 맞춰 정렬합니다.
middle	요소를 부모 요소의 중앙에 위치하도록 정렬합니다.
bottom	요소의 하단을 해당 라인에서 가장 낮은 요소의 하단에 맞춰 정렬합니다.
text-bottom	요소의 하단을 부모 요소 폰트의 하단에 맞춰 정렬합니다.

예제(Example)

다음 예제는 버튼 클릭 시 테이블 셀(td) 안 텍스트의 수직 정렬을 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    table {
        border: 2px solid #fff;
        height: 150px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
</style>
</head>
<body>
<h1>DOM Style verticalAlign Property Example</h1>
<table>
<tr>
<td id="myTd">Table Data</td>
</tr>
</table>
<button onclick="add()" class="btn">Set verticalAlign</button>
<script>
    function add() {
        document.querySelector('td').style.verticalAlign = "top";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM style verticalAlign 속성 – 수직 정렬 제어 방법과 예제

여기서 “Set verticalAlign” 버튼을 클릭하면, td 요소의 verticalAlign 값이 top으로 설정되어 텍스트가 셀의 상단으로 이동합니다.

HTML DOM style verticalAlign 속성 – 수직 정렬 제어 방법과 예제

정리

style.verticalAlign 속성은 인라인 요소나 테이블 셀처럼 수직 정렬이 의미 있는 요소에서 유용하게 활용됩니다. baseline, middle, top, bottom 등 다양한 값을 상황에 맞게 조합하면 표나 텍스트 레이아웃을 더욱 세밀하게 제어할 수 있습니다.