[css] CSS - 스크롤 따라다니는 양사이드배너 (= 양쪽날개배너 = 사이드고정배너) 3단 레이아웃

1. 따라다니는 날개 배너
2. 고정 날개 배너 (= 3단 레이아웃)
3. 어사이드 배너

따라다니는 날개 배너

방법1 - untitile 님

1. 다운로드

 

untitled 님 (2015.05.06) https://sir.kr/g5_tip/2660

 

---

2. 아래 구조가 되게 업로드

 

/js

/banner_fly.php

 

---

3. /thema/Basic/tail.php 하단에 추가

 

<?php 

if(!G5_IS_MOBILE) @include_once(G5_PATH.'/banner_fly.php');  

?>

 

방법2 - 트리플 님

1. 다운로드

 

트리플 님 (181024) https://sir.kr/g5_skin/24166

 

---

2. 업로드

 

/img/left_banner_180x150.jpg

/img/left_banner_180x600.jpg

/img/right_banner_180x100.jpg

/js/sticky.js

 

---

3. 출력코드

 

사용 중/head.php 파일에 head.php 약  233 ~ 269라인 소스 복사 추가.

※ 배너 이미지 추가 후, 적당히 위 소스의 배너 (링크・이미지) 주소 수정.

 

고정 날개 배너 (= 3단 레이아웃)

[방법1] - 요소 흐름이 자연스러움.

 

<style>

.hz {

  width:50%; 

  border:1px solid blue; 

  margin:0 auto;

  position:relative;

}

.a,.b,.c {border:1px solid red;}

.a {width:100%;}

.b {width:100px; ;position:absolute; top:0px; right:110%;}

.c {width:100px;position:absolute; top:0px; left:110%;}

.clearfix {clear:both;}

@media all and (max-width:750px ) {

  .a,.b,.c {

    position:static;

    width:100%;

    margin-bottom:10px;

  }

  .c {margin-bottom:0px;}

}
</style>

 

<div class='hz'>

  <div class='a'>A</div>

  <div class='b'>B</div>

  <div class='c'>C</div>

  <div class='clearfix'></div>

</div>

 

결과보기

---

[방법2]

<style>

div {border:1px solid red;}

#view_content {width:500px; margin:0 auto; text-align: center;}

#viewbox {position:relative;}

#viewbox .left {position:absolute;right:505px}

#viewbox .right {position:absolute;left:505px}

#view_content .center {display:inline-block; border:1px solid blue;}
</style>

 

<div id="view_content"> 

    <div style="width:100%" id="viewbox">

        <div class="left">왼쪽 </div>

        <div class="right">오른쪽 </div>

        <div class="center">중앙</div>         

    </div>

</div>

결과보기

어사이드 배너

 

fm25 님 (2015.06.11) https://sir.kr/g5_skin/7975