미령의 웹툰 블로그

그려
안녕하세요.
요즘 블로그를 다니다 보면 애드센스를 상단에 가로로 두개 배치하는 것을 자주 보게됩니다.
저는 주로 파이어폭스를 사용하는데 어쩌다 보면 애드센스가 이상하게 배치되어 있는 경우가 있더군요.
이상해서 익스플로러에서 열어보니 역시 파이어폭스에서만 그렇게 보이는 것이더군요.

대부분이 익스플로러를 쓰긴 하지만 여러 브라우저에서도 다 똑같이 잘 나오는것이 좋겠지요?
그래서 div의 개념을 약간 알려드리고자 합니다.

일단 제가 쓰는 코드는
<div style="width:300px; float:left; padding:0 0 10px 0;">       
 애드센스 코드1
</div>

<div style="margin:0 0 10px 350px; ">       
애드센스 코드2
</div>

이렇습니다.
그러면 하나하나 분석해볼까요?
(애드센스 크기에 맞게 width를 변경해줘야 하는건 다 아시죠?)


사실 어려운건 아닌데 설명할것이 상당히 많네요. 검색하시면 더 좋은 정보들이 많을꺼에요^^;
아무튼 최소한의 필요한 것들만 설명드려 보았습니다.

그 외에 그냥 코드1은 왼쪽정렬, 코드2는 오른쪽정렬. 이렇게 해주셔도 됩니다.

<div style="width:300px; float:left; padding:0 0 10px 0;">       
 애드센스 코드1
</div>

<div style="width:300px; float:right; padding:0 0 10px 0;">       
애드센스 코드2
</div>
(사실 대부분 이렇게 사용하시는데... 처음 설명한 코드를 제가 사용하는 이유는... 설명하기 좀 애매하지만 아무튼 뭔가 이유가 있긴 있습니다;;;)

제가 설명드린 것만으로도 원하는 위치(약간 밑으로 내리고 싶다거나 사이를 벌리고 싶다거나)를 쉽게 수정하실 수 있겠죠?

한가지 더 응용해보죠. 애드센스의 오른쪽 광고클릭률이 더 높다면 어떻게 해야할까요? 코드상 제일 위에 있는 코드가 단가가 제일 높다는 것은 다 아시죠? 단가가 제일 높은 애드센스 즉 코드의 제일 위의 애드센스를 오른쪽으로 이동시켜야겠죠?

사실 이미 다 아시겠지만 방법은 이렇습니다!

<div style="width:300px; float:right; padding:0 0 10px 0;">       
 애드센스 코드1
</div>

<div style="width:300px; float:left; padding:0 0 10px 0;">       
애드센스 코드2
</div>


여기서 조금만 더 공부하면 왠만한 홈페이지나 블로그의 디자인은 모두 이 div로 표현이 가능해진답니다^^
저작자 표시 비영리 변경 금지