본문 바로가기

IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포

[Tip]해상도와 상관없이 브라우저에 붙어있는 플로팅메뉴(내비게이션) 만들기


[해상도와 상관없이 브라우저 한쪽에 붙어서 따라다니는 플로팅메뉴 만드는 방법]
예전 몇번의 포스팅을 통해서 플로팅배너, 플로팅버튼 등에 대해 설명을 했었답니다.

이번 글에서는 플로팅버튼의 위치에 대한 응용으로 해상도와 전혀 상관없이 브라우저의 일정한 위치에 붙어다니는 플로팅메뉴에 대해 소개할까 합니다.



이번 포스팅의 발단

이번 플로팅버튼 응용포스팅을 하게된 계기는 한 방문자의 댓글이었습니다.


질문의 내용은 가로형 플로팅 테이블에 간단한 링크를 넣어서 사용하고 싶다는 것이었습니다.
물론 추가 댓글을 통해 질문의 내용을 대략적으로 알게 되었구요.


이번 포스팅의 내용은?

위 질문에 대한 해결과 동시에 가끔 제 블로그에서 방명록을 찾지못해 헤매는 분들을 위해서 내비게이션 테이블을 만들어 보기로 했습니다.

내비게이션 테이블에 들어갈 메뉴는 홈, 방명록, 페이스북, 트위터 이렇게 네가지로 구성했습니다.


1. 테이블 구성
가로형 1X4 테이블이며 이미지를 이용한 하이퍼링크만을 넣은 간단한 구성.
- 1X4는 1행 4열(참고 포스트:[블로그팁]테이블(표)을 티스토리에서 활용하자! - 1. 행과 열이란?)

2. 사용된 태그소스
소스를 전체 캡쳐해서 보여드리고 중요한 부분만 따로 설명을 드리겠습니다.


3. 소스의 삽입 위치
위치는 크게 상관없지만 되도록이면 <body>의 내부에 넣으실 것을 권합니다.



추천 구독 플로팅버튼과의 위치 비교

왼쪽에 보이는 추천&구독 플로팅버튼의 경우 가로 기준점은 정중앙(left: 50%)이고 여백을 지정하는 margin의 수치를 이용해서 위치를 잡은 것입니다. 세로 위치는 top: 180px인데 위에서 180px떨어진 위치라는 뜻이죠.

그럼 플로팅메뉴의 위치를 살펴볼까요?

두가지 정도로 위치를 잡아봤는데요. 첫번째는 좌상단에 딱 붙어 있도록 수치를 지정했습니다.

제 노트북의 해상도인 1366X768px에서 왼쪽 위에서 메뉴가 보여집니다.

그럼 해상도가 낮아졌다는 가정하에 브라우저의 크기를 줄여봤습니다.

보시다시피 작아진 해상도에서도 메뉴가 원하는 위치에서 보여집니다.


다음에는 왼쪽 하단에 위치를 잡아봤는데요. 먼저 상단을 뜻하는 top에서 하단을 뜻하는 bottom으로 바꿨습니다.

왼쪽 아래 메뉴가 보이시죠?


역시 해상도가 낮아져도 왼쪽 하단에 정확하게 보여집니다.

그리고 만약 오른쪽으로 위치를 잡고 싶다면 left -> right로 변경하시면 간단하게 위치를 변경할 수 있습니다.

오늘의 팁 어떠셨나요?
사실 포스팅을 준비하면서 브라우저에 붙어다니는 메뉴의 소스를 검색을 통해 알아보려고 했었답니다.
그러다가 알고 있는 소스를 조금 수정해서 적용하다보니 완벽하진 않지만 어느정도 원하는 결과를 얻을 수 있었습니다.
스킨을 수정하려면 겁부터 나시나요? 사실 저도 아직까진 그렇습니다...^^;;
하지만 신중하게 하나씩 살펴보고 수정한다면 우연찮게 원하는 결과를 얻을 수도 있다는 것 잊지마세요~