본문으로 바로가기

안녕하세요. 오늘은 간단한 HTML 및 CSS로 스크롤바에 움직임에 따라

화면에서 따라다니는 메뉴를 만들어 보겠습니다.


화면에서 따라다니는 광고를 만들 수 도 있고, 추천 모듈 또는 즐겨찾기 메뉴 등을 만들 수 있습니다.

자바스크립트를 사용해 부드럽게 스크롤되는 방법도 있지만,


 html 및 CSS 편집 만으로 간단하게 화면에 고정시켜

스크롤 이동을 시켜도 보이는 방식으로 소개하겠습니다.


※구글애드센스는 플로팅 방식의 설치는 정책위반이므로 참고 바랍니다. 

지금 제 개인블로그는 플로팅 메뉴 및 광고를 사용하고 있지 않습니다.


 따라다니는 플로팅 메뉴는 예시는 아래와 같습니다. 



우측의 광고부분이 스크롤을 내려도 가려지지 않고 같이 화면 아래로 내려오게 됩니다.

스크롤바에 붙어서 따라다니는 것 처럼 보이지만,

화면에 고정되어 있는 상태이므로 화면 변환에 반응 하지 않습니다. 


자 이제 플로팅 광고 만들기 따라해봅시다.



skin.html  안  </body> 윗 부분에 아래 코드를 적어줍니다.



<div class="floating">
	광고코드붙혀넣는곳
</div>:



style.css  안 아무곳에 아래 코드를 붙혀 넣어줍니다. 젤 아래쪽이 괜찮겠죠?



.floating {
  position: fixed; 
  right: 50%; 
  top: 180px; 
  margin-right: -720px;
  text-align:center;
  width: 120px;
}


그럼 끝입니다. CSS에서 수치를 조정하면

광고의 위치조절이 가능합니다.




이번엔 플로팅 추천 및 공유 메뉴 만들기 따라해봅시다.





이번에도 마찬가지로 skin.html</body> 윗 부분에 적어줍니다.



<div class="floating">
  <div>	다음뷰 추천위젯코드 삽입</div>
  <div>트위터 공유코드 삽입</div>
  <div>	페이스북 공유코드 삽입</div>
</div>


다음 뷰의 경우는 2014년 6월30일부 로 서비스 종료가 됩니다.

새로운 공감 이라는 서비스로 돌아온다고 하니 추가되면 다시 수정하겠습니다.



트위터 공유코드도 화면에 보이는 것 처럼 상단에 숫자 카운팅 코드는

공식적으로 지원하지 않습니다.

https://about.twitter.com/ko/resources/buttons


여기서 트위터 새로운 코드로 버튼 생성이 가능합니다.



위에 보이는 옛버전(카운팅박스가 윗쪽에 위치) 코드는 다음과 같습니다.


트위터 공유 버튼 위젯(구버전)소스코드.rtf



페이스북 공유코드는 아래 주소에서 생성가능합니다.

https://developers.facebook.com/docs/plugins/like-button


위 공유추천 외에도 구글+ 및 다양한 소셜SNS 공유버튼을 설치 가능합니다.



그 뒤 style.css 안에 아래 코드를 삽입해줍니다. 마찬가지로 젤 아랫부분이 좋겠죠?



.floating {
background-color:#f9f9f9;
border:2px solid #000;
position: fixed; 
right: 50%; 
top: 180px; 
margin-right: -615px;
text-align:center;
width:70px;
border-radius: 8px;
-webkit-border-radius: 8px;
 }
.floating div:nth-child(1){
   border:2px solid #ff3535;
   border-radius: 8px;
}
.floating div:nth-child(2){
   border:2px solid #ff3535;
   border-radius: 8px;
}
.floating  div:nth-child(3){
   border:2px solid #ff3535;
   border-radius: 8px;
}

위 코드의 완성된 모습입니다. 정상적으로 배치 되었다면 해당 박스가 나타 나야합니다.

다음뷰 추천위젯코드 삽입
트위터 공유코드 삽입
페이스북 공유코드 삽입

메뉴박스 색상을 #f9f9f9; 에서 투명으로 하고싶으면 #transparent;를 적어주면 됩니다.

border-radius: 코드는 박스 테두리를 둥글게 만들어 주는 코드입니다.

자세한 강의는 아래 링크를 참조하세요.


http://cocosoft.kr/147 - [CSS3]border-radius:테두리 및 모서리 둥글게 표현


자 그럼 다들 플로팅 메뉴를 잘 활용해서 좀더 편리하고

효율성있는 블로그를 만들길 바랍니다. 문의사항은 댓글 남겨주세요.^^



댓글을 달아 주세요

  1. BlogIcon PAPAM 2014.06.03 02:18 신고

    좋은 정보 입니다.

  2. BlogIcon COCOSOFT COCO Media 2015.05.31 18:48 신고

    와 오지게 트래백 달았네;; 이글에 트랙백 600개 달리네 ;;; 서양 봇들이 이글왜케좋아하지

  3. BlogIcon CRSSK 2016.11.09 14:45

    좋은 자료 감사합니다~