HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법
DIV 영역 그 자체를 페이의 가로 가운데에 위치시키려면 크게 두 가지 경우를 생각해 볼 수 있을 것 같습니다.하나는 DIV 영역에 포지션(position)을 지정하는 것이고, 또 하나는 포지션을 지정하지 않고 margin 속성을 이용하는 것입니다.
1. 포지션을 지정하지 않고 margin 속성으로 DIV 가운데 위치시키기
<div style="margin: 0 auto;">
내용........
</div>
내용........
</div>
[실제 예제]
<div style="background-color:gold; padding:10px; margin: 0 auto; width:300px; height: auto;">
이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함
</div>
이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함
</div>
이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함
2. DIV 영역을 두 개 겹쳐서 가운데 위치 시키기
위의 첫 번째 방법으로 하면 대체로 잘 작동을 하지만, 특정한 경우에는 위치가 제대로 잡히지 않을 때가 있습니다. 그럴 때는, 위와 같은 방법으로 하되, 그 바깥에 DIV 영역을 하나 더 설정해 줌으로써, 해결할 수 있습니다.
<div style=" border: 1px solid gold;">
<div style="margin: 0 auto; width:50%; border: 3px dotted blue;">
DIV 영역 안의 내용........
..........................
..........................
</div>
</div>
<div style="margin: 0 auto; width:50%; border: 3px dotted blue;">
DIV 영역 안의 내용........
..........................
..........................
</div>
</div>
[실제 예제]
<div style=" border: 1px solid red;">
<div style="margin: 0 auto; width:50%; border: 3px dotted blue;">
이곳은 안쪽 DIV 영역이며, 위 1번 방법과 같이 DIV에 margin 속성을 이용하여, DIV영역을 가로로 가운데 위치하도록 함. .....................
</div>
</div>
<div style="margin: 0 auto; width:50%; border: 3px dotted blue;">
이곳은 안쪽 DIV 영역이며, 위 1번 방법과 같이 DIV에 margin 속성을 이용하여, DIV영역을 가로로 가운데 위치하도록 함. .....................
</div>
</div>
[실제 적용한 모습]
이곳은 안쪽 DIV 영역이며, 위 1번 방법과 같이 DIV에 margin 속성을 이용하여, DIV영역을 가로로 가운데 위치하도록 함. .....................
3. 포지션을 지정한 DIV 영역을 페이지 가운데 위치시키기
이 방법은 이론적으로는 좋아 보이지만 실제에서는 쉽지가 않은 측면이 있습니다. 페이지에서 절대적 거리(px)를 지정하다 보니, 페이지의 구조나 내용이 변경되거나, 반응형 페이지에서 페이지 폭이 변경되면, 절대적 위치가 바뀌게 되므로 제대로 되지 않습니다. 브라우저에 따라서도 다르게 표시됩니다. 그러므로, 페이지가 완전히 고정되어 변경될 일이 없을 때 사용할 수 있습니다.
<div style="position: absolute; top:300px; left: 50%;">
<div style="position: relative; left: -50%; ">
내용.........
</div>
</div>
<div style="position: relative; left: -50%; ">
내용.........
</div>
</div>
[실제 예제]
<div style="position: absolute; top:690px; left: 50%;">
<div style="position: relative; left: -50%; background-color: #ddd; padding:10px;">
방법 3 : 이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다
</div>
</div>
<div style="position: relative; left: -50%; background-color: #ddd; padding:10px;">
방법 3 : 이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다
</div>
</div>
방법 3 : 이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다
HTML DIV tag: 세로 정렬하는 방법 - 세로 가운데 정렬, 세로 아래쪽 정렬 - position: relative, position: absolute
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...