요소 내 콘텐츠의 수직 정렬을 조정하려면 JavaScript의 verticalAlign 속성을 사용하면 됩니다. 이 속성에 원하는 정렬 위치를 값으로 지정하면 텍스트나 콘텐츠가 해당 방향으로 이동합니다. 예를 들어 특정 텍스트를 셀의 맨 위로 옮기고 싶다면 top 값을 설정하면 됩니다.
이 속성은 주로 테이블 셀이나 인라인 요소에서 유용하게 사용되며, CSS의 vertical-align 속성과 동일한 역할을 JavaScript로 동적으로 수행할 수 있습니다.
예제
아래 코드를 실행하면 버튼 클릭 시 첫 번째 테이블 셀의 콘텐츠가 상단으로 정렬됩니다. JavaScript로 요소의 수직 정렬을 반환하고 설정하는 과정을 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 2px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<table>
<tr>
<td id = "myTable">Demo Text1</td>
</tr>
<tr>
<td>Demo Text2</td>
</tr>
<tr>
<td>Demo Text3</td>
</tr>
</table>
<br>
<button type = "button" onclick = "display()"> Set top position </button>
<script>
function display() {
document.getElementById("myTable").style.verticalAlign="top";
}
</script>
</body>
</html>코드 설명
- 테이블은 파란색 테두리와 함께 200x200 크기로 설정되어 있어 정렬 변화를 쉽게 확인할 수 있습니다.
- 버튼을 클릭하면
display()함수가 호출되어getElementById()로 id가 myTable인 첫 번째 셀을 선택합니다. - 해당 셀의
style.verticalAlign속성에"top"값을 할당하여 'Demo Text1'이 셀의 맨 위로 이동합니다.
verticalAlign 속성에는 top, middle, bottom, baseline 등 다양한 값을 사용할 수 있으므로, 필요에 따라 원하는 정렬 방식을 동적으로 변경할 수 있습니다.