웹페이지에서 특정 요소를 화면에 고정하기(다음뷰 뷰온버튼 추가하여 특정위치에 고정)

CSS에서 position:fixed; 속성은 어떤 요소를 화면에 고정시키고 스크롤해도 그대로 있게 만듭니다. 이 포지션 속성에 다른 추가속성인 위치속성을 부여하면 화면에서 요소의 위치를 변경할 수 있습니다. position:fixed의 속성과 이를 이용해서 티스토리 블로그의 다음뷰 뷰온 버튼을 추가하고 이를 화면에서 고정되어 나오도록하는 방법을 알아봅니다. HTML과 CSS를 편집할 수 있는 설치형블로그만 가능하고 네이버같은 가입형 블로그는 안됩니다.

1. 컴포우저(Kompozer) 코드 에디터의 사용

kompozer-0.8b3.ko.win32.exe

무료 HTML 에디터인 컴포우저(Kompozer)를 다운 받아 설치합니다. 한글도 지원하고 필요한 기능이 많은 편집기입니다. 설치후 열면 다음과 같은 창이 나옵니다.

간단한 편집만 할 것이므로 1,2,3 과 같은 것은 안보이게 해서 보기 쉽게 만듭니다. 4에서 표시/숨기기를 선택해서 서식도구막대1과 2, 탐색창을 체크하면 없어집니다. 5는 WYSWYG 에디터의 장점인 디자인뷰인데요, 7의 소스에서 입력된 코드가 웹페이지에서 실제로 어떻게 보여지는지 미리보는 창입니다. 6의 분할은 5와 7의 창이 아래위로 두개의 창으로 분리돼서 나오는데 편집기에 코드입력하면서 같이 볼수 있는 창모드입니다.

2. CSS에서 position:fixed;의 사용연습

웹페이지는 페이지의 내용을 담당하는 HTML코드와 이 HTML코드의 위치를 배정하는 CSS코드로 나누어지고 입력하는 위치도 다릅니다. 에디터의 소스버튼을 클릭하면 다음과 같은 창으로 나옵니다.(이글에서 나오는 코드는 첨부파일에 있습니다.)

1의 [스타일시트 CSS가들어갈 부분]에 다음 코드를 입력합니다.

<style type=text/css>

#view-on { width: 67px; height:80px; position: fixed; left:50%; top:50%; }

</style>

2의 [HTML코드가 들어갈 부분]에 다음코드를 입력합니다.
<div id="view-on">
  <p>뷰온버튼</p>
</div>

아래의 사진에서 디자인버튼을 클릭하면 다음과 같이 나옵니다.

CSS코드에서 가로세로 크기인 67과 80픽셀은 뷰온버튼의 사이즈이고 position: fixed는 이 요소를 고정시킨다는 의미이며 left:50%는 좌측에서 화면의 50%지점에,top:50%는 화면에서 위로부터 50%지점에 배치한다는 의미입니다. 2의 최대화버튼을 클릭해서 화면을 크게하면 제대로 나옵니다. 제 블로그 화면처럼 좌측에 붙이려면 left: 0%; 로 합니다. 

<div id="view-on">
  
</div>

위 코드는 뷰온버튼이 들어갈 자리인데 HTML에서는 어떤 요소를 배치하려면 이러한 div태그를 이용해서 코드를 만들고 CSS로 위치를 지정합니다. 위의 줄 사이에 뷰온 코드를 넣고 블로그의 HTML코드에 넣으면 됩니다.

3. 뷰온코드만들기

블로그의 마이뷰창에서 어느 하나의 글을 클릭하고 상단에서 1의 퍼가기를 클릭하면 사진처럼 나옵니다. 2에서 4가지 형태를 선택하면 버튼의 모양이 달라지고 소스를 보면 3에서 숫자와 width, height도 달라집니다. 박스형은 1 이고 버튼형은 3입니다. 원하는 형태를 선택하고 3의 숫자와 width와 height를 메모합니다. 4는 글의 주소로 내 블로그 주소와 글의 주소를 만들어내는 php코드로 바꿔줘야합니다.

위코드가 div태그 사이에 들어갈 HTML코드입니다. 내블로그의 주소를 빨간 부분의 주소와 교체하고 메모한 가로 세로 수치를 파란색의 수치와 교체합니다. 버튼형이면 그대로 사용합니다.

4. 블로그 HTML/CSS편집 - HTML코드의 편집

블로그에서 코드편집을 하기전에 망칠 수 있으니 항상 저장을 먼저하고 편집합니다. 스킨선택항목에서 우측에 보면 스킨저장 버튼이 있고 이것을 클릭하면 이름입력란이 나오는데 날짜나 일련번호같은 적당한 이름을 입력하면됩니다. 잘 안되면 스킨선택 항목의 저장한 스킨 탭에서 다시 불러오면 됩니다.

Admin메뉴에서 HTML/CSS편집을 클릭하면 위와 같은 창이 나옵니다. Ctrl+F키를 누르면 검색창이 나오는데 웹브라우저마다 다르지만 검색하는 기능은 다 있습니다. 검색어로 div class="article"를 넣으면 skin.html창에 다음과 같은 곳이 나옵니다. 안나오면 검색창의 화살표버튼으로 아래 위로 이동하면 나옵니다.

[뷰온코드가 들어갈 자리]에 코드가 들어가면 다음과 같이 됩니다. 이자리에 반드시 <div id="view-on">부터 </div>까지만 입력합니다. notice_rep_desc부분이 추가로 들어가면 안됩니다.

5. 블로그 HTML/CSS편집 - CSS코드의 편집

"블로그 레이아웃"으로 검색해서 style.css창에서 1부분에 다음의 코드를 입력합니다. 

#view-on { width: 67px; height:80px; position: fixed; left: 0%; top:50%; }

이렇게 하면 좌측끝, 위에서부터 중간에 위치하게 됩니다. 좌측 하단 코너에 위치하려면 top:50%를 bottom: 0%;로 하고 우측하단 코너는 right: 0%; bottom: 0%;입니다. 코드 편집기에서 연습한 다음 입력하시는 것이 좋습니다.

이렇게 설치하고 난 후에 Admin의 플러그인에서 다음뷰를 표시하지 않기를 선택해도 이렇게 추가한 것은 나옵니다. 

코드.txt