묻고답하기
좌측에 배너를 삽입 했는데요~;;
2014.05.05 00:57
<div style="left: -325px; top: 98px; width: 100px; height: 300px; margin-left: 485px; position: absolute; background-color: white;">배너</div>
위 태그를 layout.html 제일 밑에 넣었습니다.
잘 나오는데
화면 크기가 바뀔때마다 배너 위치가 바뀌네요
어디에 삽입하면 되나요~??
Express999레이아웃 쓰고 있습니다.
[좌측에 넣고 싶습니다..]
댓글 7
-
BJ람보
2014.05.05 04:42
-
유묭커뮤늬2
2014.05.05 08:09
태그를 독립적으로 놔둬서 그런가 배너가 고정되어 있지 않아요.
-
BJ람보
2014.05.05 09:29
저거 같은경우 독립적으로 알아서 자리 배치 되는 형태인 것 같습니다.
그대로 두는 편이 좋을 것 같은데요?ㅎㅎ
-
유묭커뮤늬2
2014.05.05 19:19
아 다른거 보신듯 해요 ㅠ;;
해상도가 바뀌면 배너가 화면을 가려서 아~까 빼뒀어요~;;
왼쪽 사이드 쪽에 들어가는건데 태그를 어디에 둬야할지...
배경에 콕 박아두고 싶은데..
-
Double'U'
2014.05.05 21:40
홈페이지 소스를 보지 못한 관계로...
<div style="left: -325px; top: 98px; width: 100px; height: 300px; margin-left: 485px; position: absolute; background-color: white;">배너</div>
css의 style에 대한 이해가 부족하신거죠??
하나 하나 따져봅시다.
(영어는 귀찮아서 한글로 대충)
1. 포지션 : 앱솔루트
해당 객체의 기준점을 어디로 정하느냐를 설정합니다.
앱솔루트는 다른 건 다 상관없이 해당 객체의 상위 객체의 좌상단을 기준으로 삼겠다는 것입니다.
다만 상위 객채도 기준점이 잡혀야 브라우져에 따라서 이상하게 보이지 않을 것입니다.
2. 탑, 레프트
기준점으로부터 탑은 위쪽으로부터 픽셀 이동, 레프트는 왼쪽으로부터 픽셀이동입니다.
탑 98px이니 위에서부터 98px내려오고 레프트 -325px이니 왼쪽 기준점으로부터 -값이므로 왼쪽으로 325px이동합니다.
+면 오른쪽으로 이동하겠죠.
3. 위드, 헤이트
객체의 넓이와 높이값입니다.
4. 마진-레프트
마진과 패딩은 여백을 준다는 것에서는 동일하지만 패딩은 안쪽의 여백이고 마진은 바깥쪽의 여백입니다.
그래서 패딩은 -값을 가질 수 없지만 마진은 -값을 가질 수 있습니다.
또한 배경색에도 영향을 주기 때문에 두 가지를 잘 구별해서 사용해야 합니다.
마진 레프트는 바깥쪽으로 왼쪽방향에 485px만큼 여백을 주는 것입니다.
5. 백그라운드 컬러
객체의 배경색입니다.
해상도에 따라 배너가 화면을 가린다고 했죠?
배너의 기준점이 어디인가 보세요.
기준점을 명확하게 설정한다면 한자리에 딱 고정되어 있을 것입니다.
그러나 기준점이 움직인다면? 따라서 움직이겠죠.
요즘 레이아웃은 가운데 정렬을 많이 합니다.
상위 레이어로 넓이, 높이를 100%를 잡고
그 안에 특정 넓이를 주고 margin: 0 auto, 외부 여백을 상하단은 0으로 하고 좌우는 오토! 자동을 똑같이 주라는 것입니다.
이렇게 중앙정렬을 시켜주죠.
안타깝게도 세로방향으로는 오토가 안먹습니다. -0-;;;
이 부분은 넘어가고 1000px짜리 중앙정렬의 왼쪽에 배너를 두고 싶다면 예를 들면 이런식으로도 가능하죠.
(바디에도 100%를 주고 독타입도 맞춰서 설정해줘야 합니다!)
<body>
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: relative; margin: 0 auto; width: 1000px; height: 100%;">상하단과 본문 내용 등등</div>
</div>
<div style="position: absolute; left: 50%; top 100px; margin-left: -610px; width: 100px; height: 100px;">배너</div>
</body>
배너만 보자면 바디를 기준으로 독립적으로(포티션 앱솔루트) 위치를 잡습니다.
기준 위치는 100px * 100px의 div의 좌상단 지점이 맨위에서 100px(탑 100px), 왼쪽으로는 중앙지점(레프트 50%)입니다.
이렇게 하면 배너는 중앙에서 오른쪽으로 치우쳐 있으니 원하는 위치가 아닙니다.
마진 레프트로 마이너스 여백을 줘서 왼쪽으로 이동시켜 줍니다.
-500만큼 움직이면 기준 점이 본문의 시작점과 동일해집니다. 그래서 배너의 크기만큼 더 이동시키면 600px이고 본문와 약간 떨어져 있으라고 10px을 더 줍니다. 그래서 최종 값은 -610px로 예를 들었습니다.
단점은 창이 좁으면 본문은 스크롤로 나와도 배너는 안나온다는 것입니다.
영역 밖이니까요.
-
유묭커뮤늬2
2014.05.05 22:56
긴글 감사합니다~!!! 정확히 이해했습니다!
-
유묭커뮤늬2
2014.05.06 00:57
<body><div style="right: 55.3%; top: 174px; width: 100px; height: 300px; margin-right: 485px; position: fixed; "> 배너</script></div></body>
사이트의 실제 주소를 알려주세요.
적용된 사이트가 있어야 답변이 가능합니다.