HTML DIV tag: 세로 정렬하는 방법 - 세로 가운데 정렬, 세로 아래쪽 정렬 - position: relative, position: absolute
DIV 영역 안의 내용을 위쪽, 가운데, 아래쪽으로 세로 정렬하는 속성에 관한 글들을 찾아 보면, vertical-align="middle"과 같이 vertical-align 속성을 top, middle, bottom으로 한다고 나와 있습니다. 하지만, 실제로 적용해 보면, 어째서 그런지는 알 수 없지만, 되지 않습니다.DIV 영역의 내용을 세로로 가운데 또는 아래쪽으로 정렬하려면, 아래와 같이, 두 개의 DIV 영역을 설정하고, position 속성을 주어 해결할 수 있습니다.
즉, 내용이 들어 있는 DIV 영역 바깥에 또 하나의 DIV 영역을 설정하고, 내용이 들어 있는 안쪽 DIV 영역의 위치를 지정하는 것입니다. 아래의 예제에서, 빨강색은 바깥쪽 DIV 영역이고, 파란색은 안쪽 DIV 영역입니다.
1. DIV 영역을 세로 아래로 정렬하기
[예제 태그: 두 개의 DIV 영역을 설정하고, 안쪽 DIV 영역을 세로로 아래쪽으로 정렬한 모양]
<div style="width: 100%; border: 1px solid red; height: 150px; position: relative;">
<div style="width: 99%; border: 3px dotted blue; position: absolute; bottom: 0px;">
이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; bottom:0px; 로 설정하면 됩니다.
</div>
</div>
<div style="width: 99%; border: 3px dotted blue; position: absolute; bottom: 0px;">
이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; bottom:0px; 로 설정하면 됩니다.
</div>
</div>
[위의 예제 태그를 실제 적용한 모습: 안쪽의 DIV 영역을 바깥 DIV 영역의 아래쪽으로 세로 정렬한 모습]
이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; bottom:0px; 로 설정하면 됩니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; bottom:0px; 로 설정하면 됩니다.
2. DIV 영역을 세로 가운데로 정렬하기
[예제 태그: 두 개의 DIV 영역을 설정하고, 안쪽 DIV 영역을 세로로 가운데로 정렬한 모양]
<div style="width: 100%; border: 1px solid red; height: 150px; position: relative;">
<div style="width: 99%; border: 3px dotted blue; position: absolute; top: 50%; transform: translateY(-50%);">
이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; top: 50%; transform: translateY(-50%); 로 설정하면 됩니다.
</div>
</div>
<div style="width: 99%; border: 3px dotted blue; position: absolute; top: 50%; transform: translateY(-50%);">
이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; top: 50%; transform: translateY(-50%); 로 설정하면 됩니다.
</div>
</div>
[위의 예제 태그를 실제 적용한 모습: 안쪽 DIV 영역을 바깥 DIV 영역의 세로 가운데로 정렬한 모습]
이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; top: 50%; transform: translateY(-50%); 로 설정하면 됩니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; top: 50%; transform: translateY(-50%); 로 설정하면 됩니다.
참고: 위의 예에서 안쪽 DIV 영역의 너비(width)를 99%로 준 것은 바깥 DIV 영역과 같이 100%를 주면 안쪽 DIV 영역이 바깥 DIV 영역을 벗어나 표시되기 때문입니다. 실제로 적용하는 조건에 맞추어 너비를 조절하면 되겠습니다.
>> HTML DIV tag: 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
>> HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...