이 방법은 중앙 정렬되는 블로그에 해당합니다.
브라우저 창을 줄이거나 늘려도 저 위치에 고정됩니다.
(파이어 폭스3, 익스6, 오페라, 사파리에서 확인)
이 사각형들은 창을 줄이거나 늘려도 저 위치(블로그의 위치)에 고정됩니다.
그럼 소스를 보실까요.
스타일에서 position:absolute; 은 공통입니다.
- 1번 사각형 소스
<div style="position:absolute; top:120px; right:50%; margin:0 0 0 0; width:100px; height:100px; background:#0000ff">
</div>
1번 사각형의 오른쪽변은 화면의 중앙과 일치하고 있습니다.</div>
즉, right 좌표를 50%(중앙)로 설정해주면 위와 같이 나오게 됩니다.
나머지는 특별할게 없죠.
- 2번 사각형 소스
<div style="position:absolute; top:120px; left:50%; margin:0 0 0 0; width:100px; height:100px; background:#ff0000">
</div>
1번과 반대로 2번 사각형의 왼쪽 변이 화면의 중앙과 일치하고 있습니다.</div>
즉, left 좌표를 50%(중앙)로 설정해주면 되지요.
- 3번 사각형 소스
<div style="position:absolute; top:120px; right:50%; margin:0 150px 0 0; width:100px; height:100px; background:#0000ff">
</div>
3번 사각형은 1번 사각형에서 왼쪽으로 150px만큼 이동한 사각형입니다.</div>
따라서 1번 소스에서 약간의 변동을 주면되는데요.
margin을 사용합니다. margin은 1개, 2개 혹은 4개의 값을 가질 수 있는데요.
1개라면 상하좌우 모두를 나타내고, 2개이면 상하와 좌우를 나타내고, 4개이면 상, 하, 좌, 우를 따로 나타냅니다.
위의 소스에서 보시면 margin: 0 150px 0 0; 이라고 썼죠. margin: 다음 나오는 숫자는 순서대로 상 우 하 좌의 여백을 나타냅니다.(시계방향으로 생각하면 쉬워죠) 즉, 이 경우에는 오른쪽 여백을 150px 만큼 주겠다는 의미입니다.
margin은 항상 중심을 기준으로 하기 때문에 창을 줄이거나 늘려도 그 위치는 변함없지요.(벌써 세번째 말하는...)
- 4번 사각형 소스
<div style="position:absolute; top:120px; left:50%; margin:0 0 0 150px; width:100px; height:100px; background:#ff0000">
</div>
4번 사각형은 2번 사각형을 왼쪽으로 150px 만큼 움직인 사각형입니다.</div>
따라서 2번 상태에서 왼쪽 여백을 150px 만큼 주면 됩니다.
margin: 다음에 나오는 수치는 순서대로 상 우 하 좌 라고 했습니다.
따라서 네번째 값을 150px로 설정해주면 됩니다.
이것만 알면 화면 어디든지 원하는 곳에 div를 위치시킬 수 있지요.
광고 달때 유용합니다.
참고적으로 margin은 바깥여백이며, padding이라는 것은 안쪽여백입니다.
그렇다면, div를 정중앙에 위치시키려면 어떻게 해야할까요.
왼쪽 혹은 오른쪽을 기준으로 중심과 일치시킨후(right:50% 또는 left:50%) div의 가로 크기를 2로 나눈 값만큼 마이너스 여백을 주면 됩니다.
<div style="position:absolute; top:120px; right:50%; margin:0 -50px 0 0 ; width:100px; height:100px; background:#0000ff">
</div>
</div>
오른쪽이 중심 기준이라면 오른쪽에 마이너스 여백을, 왼쪽이 중심 기준이라면 왼쪽에 마이너스 여백을 주면 됩니다. 마이너스 여백은 div 가로길이의 절반이면 되지요.
위 소스는 오른쪽변을 중심으로 맞췄으므로, 오른쪽 여백을 -50px 만큼 설정했습니다.
필요한곳에 써보세요!
