노무현 대통령 배너
BLOG main image
왕미친놈의 왕미친세상입니다. 미친 소리는 써도 되지만, 근거 없는 소리는 쓰면 안 됩니다.


iOS4로 아이폰 OS를 업그레이드 했습니다. 그런데 너무나 많은 '쓰지 않는' 어플 때문에 어플을 지워야 할 일이 생기더군요. 물론 폴더에 넣으면 되겠지만, 아이튠즈에서 지워도 되겠지만, 그게 귀찮은 때도 분명 있습니다.

어플 삭제

처음 화면

처음 화면

일단 아이폰 화면에서 어플 아이콘을 1초쯤 지그시 누르고 있으면 아이콘이 바들바들 떱니다.

살려 줘!

살려 줘! 죽고 싶지 않아!

떠는 모습이 안 보인다고요? 아래와 같이 놓고 보면 좀더 확실해집니다.

Zoom

위 그림에서 캘린더 아이콘의 왼쪽 아래와 한컴뷰어 아이콘의 오른쪽 아래가 약간 기울어져 있음이 나타납니다. 특히 한컴뷰어라는 글씨도 함께 기울어져 있지요.

이 화면에서 왼쪽 위에 달리 검은 X 표시를 톡 건드리면 지우겠냐고 묻습니다.

삭제

흐흐! 이 녀석을 죽여 버려도 될까요?

당연히 삭제를 누르면 지웁니다. 아니라면 취소를 누르세요. ^^a

이 화면에서 벗어나려면 홈 단추를 한 번 눌러주면 됩니다.

어플 이동

어플을 이동할 때는 아이콘과 아이콘 사이로 옮긴다.

이동 전

이동 전

위 그림에서 TeamViewer 아이콘을 손가락으로 지그시 누른 채 옆으로 이동한다. 이때 파란색 표시가 있는 부분으로 다가가면 목적지에 있는 아이콘(여기서는 한컴뷰어 아이콘)이 밀려나면서 자리가 비게 된다. 그때 손을 떼면 이동이 완료된다.

다만 iOS4를 사용한다면 어플 아이콘 위에서 손을 떼면 폴더를 만들어 버리므로 주의해야 한다. 폴더가 만들어지기 직전에는 목적지 근처의 아이콘에 네모 테두리를 두르게 되므로 눈썰미가 아주 없는 사람이 아니라면 눈치 챌 수 있다.

참고로 같은 화면이 아니라 다른 화면으로도 이동할 수 있습니다. 위 이동 전 화면에서 화면 오른쪽과 왼쪽 모서리에 아이콘을 끌고 가면(좌우의 붉은 막대 부분) 화면이 바뀌면서 옆 화면으로도 아이콘을 옮길 수 있습니다.

이동 후

이동 후

마지막으로 작업을 마친 뒤 이 화면에서 벗어나려면 홈 단추를 한 번 눌러 주면 됩니다.

정리

  1. 일단 아이콘을 꾸욱 누르고 있습니다. 마음 속으로 "하나, 둘 셋!"을 세는 것도 하나의 요령입니다.
  2. 삭제하려면 아이콘 왼쪽 위의 검은 X를 콕 눌러 줍니다.
    1. 지우겠느냐고 물어오면, 각자 알맞은 선택을 해 주면 됩니다.
  3. 한편 옆으로 아이콘을 옮길 때는 아이콘을 누르 채로 옆으로 옮겨 주면 됩니다.

한편 어플 삭제 작업은 아이콘 왼쪽 위에 검은 X가 생긴 어플만 가능합니다. 다시 말해 기본 어플은 삭제할 수 없습니다. 그러나 어플 이동은 기본 어플도 가능하며(떨고 있는 어플은 모두 옮길 수 있습니다), 기본 어플끼리 겹쳐서 폴더를 만들 수도 있습니다.

그리고 작업을 마친 뒤 홈 단추를 한 번 눌러주는 것도 잊지 마시기 바랍니다.

덧붙이는 말

제 블로그에 자주 오는 사람은 제가 글 쓰는 스타일을 알게 되리라 생각합니다.

저에게 블로그는 '일기장'입니다. 영어로 표현한다면, "The Blog is the log."입니다. 그래서 그 무렵의 최고 관심사가 글로 올라옵니다. 1월에는 온통 새로 나올 '한컴오피스2010'에 관심이 가 있어서 버그 리포팅이 올라왔었죠. 3월부터는 공짜 프로그램에 관심이 생겨 Giveaway of the Day 관련 글이 많이 올라왔습니다. 그리고 지금은 예전에 작성하다 만 '천일번제'와 새로 맞춘 아이폰에 관심이 쏠려 있습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

순간이동이 뭐지?

일단 순간이란 (1) 아주 짧은 시간, (2) 어떤 현상이 일어나는 그때, 특히 두 사건이 동시에 일어나는 그때를 가리킵니다.

순간이동에서 (1)의 뜻이라면, 모든 이동은 순간이동이 됩니다. 그런데 보통 순간이동이라고 하면 (2)의 뜻으로 쓰여 '시간이 걸리지 않은 이동'을 뜻하게 됩니다.

한편 대부분의 판타지에 나오는 순간이동은 '매우 빠른 이동'이거나 '시간이 걸리지 않은 이동'을 말합니다. 그런데 대부분 순간이동이 아닌 '순간전송'을 일컫는 때가 많습니다.

순간이동은 가능한가?

일단 시간이 걸리지 않는 이동은 불가능합니다. 반대로 시간 여행을 통해 시간이 걸리지 않는 이동을 구현할 수 있으나, 이는 순간이동과는 다릅니다.

물리학에서 물체가 이동한다는 것 자체가 이미 시간이 흐르고 있다는 뜻이 됩니다. 애초에 시간이 흐름을 물체의 이동과 따로 떼어서 개념을 정의할 수 없습니다. 시간이 거꾸로 흐르지 않는 이유도 그것 때문입니다. 일단 움직임이 생기면 무조건 시간을 흐르게 된다. 설령 그 움직임이 시간을 거스르는 움직이더라도(이런 일은 일어날 수 없지만) 그와 동시 순행의 시간이 그만큼 흐르게 된다.

4차원은 선-면-입체-시간으로 정의되지만, 위치가 움직인 자취-(위치의 자취)가 움직인 자취-(위치의 자취의 자취)가 움직인 자취-(위치의 자취의 자취의 자취)의 움직인 자취로 정의해도 똑같은 완전히 동일한 4차원이 됩니다. 이때 자취 대신에 좌표라는 표현을 사용하게 됩니다.

이와 관련한 몇 가지 흥미로운 문제가 있습니다.

양자역학의 순간이동

결과가 원인을 지배하는 양자역학에서는 순간전송도 순간이동과 같습니다.

순간전송은 순간이동과 비슷합니다. 차이점은, 순간이동은 원본과 복제본이 동시에 존재하지 않지만, 순간전송에서는 원본과 복제본이 아주 짧은 시간 동시에 존재한다는 점입니다.

영혼의 존재 증명 가능?

일단 영혼이 육체와 별개로 따로 떨어져 있다면 증명이 가능합니다. 그런데 영혼과 육체가 하나로 합입되어 있다면?

일단 전제는 다음과 같습니다.

  • 영혼과 육체가 하나로 묶여 있다.
  • 영혼은 존재를 규정하는 가장 중요한 요소이다.
  • 영혼도 이동이 가능하다.

위의 전제처럼 영혼이 그 존재를 규정하는 그것이라면, 순간전송에서는 당연히 영혼이 있음과 없음을 증명할 수 있지만, 순간이동에서는 그게 불가능하죠. 처음부터 육체와 함께 이동하는데 무슨 영혼이 있는지 없는지를 증명합니까? 이것은 순간이동이기 때문에 증명할 수 없는 문제입니다.

만약 순간전송이라면, 고의로 순간전송을 정지시켜서 원본과 복제본이 동시에 존재하는 시간을 임의로 늘임으로써 증명할 수가 있습니다.

'순간'의 정의 문제

'순간'이 '매우 짧은 시간'인지, 아니면 '정지 시간'인지에 대해 먼저 규정해야 합니다. 다른 경우에는 그 둘이 그리 다르지 않겠지만, 순간이동과 순간전송에서는 매우 중요한 요소입니다.

'순간'이 '매우 짧은 시간'이라면 순간이동과 순간전송은 서로 다르지만, '순간'이 '정지 시간'이라면 둘이 같습니다. 순간전송이라도 걸린 시간이 0(제로)이라면, 원본과 복제본이 동시에 존재하는 시간도 0(제로)이므로, 결국 원본과 복제본이 동시에 존재하지 않게 됩니다. 그런데 앞서 말했듯이 원본과 복제본이 동시에 존재하지 않는 이동은 순간이동이지요.

'이동'의 정의 문제

반대로 '순간이동'에서, '이동'이라는 의미상, 반드시 시간이 걸립니다. 문제는 이때 물리학 규칙상 물체가 '시간이 걸리지 않으면서' 이동하는 것은 불가능합니다. 그런데 수리적으로 가능한 '이동'이 하나 있습니다. 그것은 바로 '자취'라는 '정보'를 통째로 바꾸는 것입니다.

다시 말해 어떤 대상이 이동함으로써 자취가 변합니다. 다시 말해 대상이 움직이면, 그 대상을 가리키는 좌표가 바뀝니다. 그런데 그것을 반대로 하여 대상을 옮긴다는 뜻입니다. 실제로 컴퓨터 프로그램 등에서는 대상을 움직이는 것이 아니라 대상의 좌표를 바꿉니다.

다만 이 방법에는 얼마나 많은 에너지가 소모되는지에 대해서는 알 수 없다는 점입니다.

이 방법은 '순간이동'의 정의에 가장 부합합니다. 어찌 되었든 '이동'에 걸리는 시간은 항상 '0'(제로)입니다. 어떤 식으로든 대상을 이동시키면 시간이 소모되지만, 이 경우에 이동하는 것은 대상이 아니므로, 대상의 이동 시간은 처음부터 '0'(제로)입니다. 다만 결과적으로 대상은 항상 이동하려던 목표 지점에 존재하게 됩니다.

결국 이때의 순간이동은 물체의 이동이 아니라, 좌표의 이동이 됩니다. 그런데 이 말은 처음부터 영혼의 존재 유무를 증명할 수 없었다는 뜻입니다.

쉽게 말해 A 지점에서 B 지점으로 간다고 가정하면, 우리는 걸어가거나 다른 도구를 써서 갑니다. 그런데 순간이동에서는 A 지점의 좌표와 B 지점의 좌표를 알아내어, '물체를 보내는 것'이 아니라, 좌표를 바꿉니다. ㅡㅡ; 참고로 이 논리는 지금까지 '물체를 이동시킴으로써' 순간전송은 가능해도 순간이동은 불가능함이 이미 밝혀져 있기에 가능한 논리입니다.

이 경우 물체의 이동까지는 시간이 걸리지만, 그것은 좌표를 알아내고 바꾸거나 또는 좌표 이동을 준비하는 시간이지 순간이동에 시간이 소모되는 것은 아닙니다. 앞서 말한 이동 방법에서는 어찌되었든 이동에 시간이 걸리므로 엄밀한 의미에서는 '순간이동'이 아니게 되지만, 이 좌표 이동은 대상이 시간을 소모하지 않고 이동한다는 점에서는 진정한 순간이동이 됩니다.

관련 문서

내부 문서

(없음)

외부 문서

이 글은 스프링노트에서 작성되었습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

며칠 전부터 블로그에 떠다니는 메뉴를 달려고 지랄발광을 했음에도 성공하지 못했습니다. 될듯 될듯 하면서도 끝끝내 실패했는데, 왠걸 소스 하나를 보자 맥이 탁 풀리더군요. 간단하면서도 잘 동작하는 메뉴를 만들 수 있게 되었습니다. 다만 티스토리의 버그 때문에 추천 배너에 대한 사항은 정확하게 잘 작동하지는 않습니다.

  • 참고 1 : 이 글은 어디까지나 티스토리를 기준으로 설명하였습니다. 태터툴즈의 다른 형제들(텍스트큐브 및 태터툴즈)에서는 정상 동작을 보장하지 못합니다. 그러나 몇몇 설정만 바꾸면 적용할 수 있으리라 생각합니다.
  • 참고 2 : 이 글에서 추가한 CSS 코드 및 (X)HTML 코드의 저작권도아 님께 있습니다. 또한 자바스크립트 추가 부분강팀장 님께 저작권이 있습니다. 따라서 그 두 부분은 GFDL 및 CCL의 적용을 받지 않으므로 주의하기 바랍니다.

이동 위치 및 메뉴 항목 정하기#

가장 먼저 할 일은 이동 위치메뉴 항목을 정하는 일입니다.

스킨의 구조와 이동 위치#

티스토리 스킨 제작 가이드에서 스킨의 구조를 살펴보면 스킨의 구조, 곧 태터툴즈로 만들어진 블로그의 구조는 다음과 같습니다.


티스토리 스킨의 구조 by 태터툴즈 스킨커뮤니티

대부분의 경우 header부터 footer까지 화면에 나타납니다. 이때 특별한 일이 없다면 sideinfo 영역(사이드바)은 이동 위치로 잡지 않도록 합니다. 왜냐고요? 위 그림에서 보듯이 본문에 해당하는 content 부분과 화면의 상하 위치가 겹치기 때문입니다. 대부분의 경우 화면의 좌우 이동을 고려하여 떠다니는 메뉴를 만들지는 않으므로 굳이 sideinfo 영역에 이동 위치를 잡을 필요가 없다는 말입니다.

대충 잡을 수 있는 이동 위치는 문서의 처음 또는 끝, 본문의 처음 또는 끝, 댓글의 처음 또는 끝(또는 댓글 보기 또는 댓글 쓰기) 등입니다. 거기에 더하여 블로그 홈이나 블로그 관리용 문서로 이동하게 만들 수도 있습니다.

이동 위치와 이동 메뉴#

이 부분은 제 블로그를 기준으로 설명합니다. 각자 자신의 블로그에 넣는다고 상상하면서 글을 읽어 주십시오.

왕미친 세상 블로그 구조

왕미친 세상 블로그 구조

위 그림에서 빨간색으로 표시한 부분이 화면에 나타나는 부분이며, 자주색 줄이동 위치입니다. 맨 위에서부터 차례대로 글로 나타내면, 문서 처음(top), 글 관련 태그(tag) 또는 추천 배너(recommend)[각주:1], 트랙백 / 댓글(comment1), 댓글 쓰기(comment2), 페이징(paging), 글끝(end) 등입니다.

그리고 위 그림에서 블로그 메뉴가 헤더와 꼬리에 모두 나타납니다. 그러나 여기에서는 원래 있던 블로그 메뉴는 그대로 두고 메뉴를 하나 더 추가하였습니다.

떠다니는 메뉴 구현 방법#

이 글에서는 떠다니는 메뉴를 스타일(CSS)을 이용하여 구현해 보았습니다. 소스코드는 Fixed Layer Hack for IE6에 나오는 코드를 참고하였습니다. 또한 자바스크립트를 최소로 하는 것이 호환성에 더 좋고, 코드도 더 간단하다고 생각하여 그렇게 결정했습니다. 실제로 그와 비슷하게 적용된 블로그는 도아의 세상사는 이야기입니다. 특히 도아의 세상사는 이야기 블로그에서는 표(테이블)이 아닌 리스트를 활용하고 있으므로 따라해 보았습니다.

스킨에 넣을 이동 메뉴(X)HTML 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#item1">항목1</a></li>         <li><a href="#item2">항목2</a></li>         <li><a href="#item3">항목3</a></li>         <li><a href="#item4">항목4</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

이동 메뉴만으로는 아무런 동작도 하지 못합니다.

[code html] <a name="top"></a> <a name="item1"></a> <a name="item2"></a> <a name="item3"></a> <a name="item4"></a> <a name="end"></a> [/code]

위의 코드를 스킨의 (X)HTML 코드에 추가해야 합니다.

item항목 대신 a 태그의 name(또는 id)이동 위치의 이름이 와야 합니다.

스킨에 넣을 CSS 코드는 다음과 같습니다. 이것을 CSS 부분(style.css)의 맨 끝에 넣으면 됩니다.

[code css] /* 떠다니는 메뉴 (Floating Menu) */ #floatdiv {     position:fixed; _position:absolute; _z-index:-1;     width:65px;     overflow:hidden;     right:0px;     top:30%;     border: #5D5D5D 1px solid;     background-color: transparent;     font-size: 14px;     margin:0;     padding:0; }
#floatdiv ul  { list-style: none; } #floatdiv li  { margin-bottom: 2px; text-align: center; } #floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; } #floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; } #floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; } [/code]

기본적으로 위의 코드가 들어가며, 더 추가될 수도 있습니다.

블로그 화면과 이동 위치#

실제 블로그에서 위치를 찾아 보겠습니다. 자주색 가로선은 떠다니는 메뉴에서 이동하게 될 이동 위치를 가리킵니다.

이동 위치 1 : 맨 위

이동 위치 1 : 맨 위


이동 위치 2 : 글 끝 또는 추천 배너

이동 위치 2 : 글 끝 또는 추천 배너


이동 위치 3 : 트랙백/댓글 보기

이동 위치 3 : 트랙백/댓글 보기


이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)

이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)


이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)

이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)


이동 위치 6 : 맨 아래

이동 위치 6 : 맨 아래

위에서 보면 대충 어느 위치인지 감이 오지 않습니까? 일단 글의 맨 처음 부분에 이동할 수 있게 하고, 그 다음으로 추천 배너의 위치[각주:2], 트랙백/댓글 보기, 댓글 달기, 페이징, 문서의 맨 끝 등으로 구성할 수 있습니다.

이때 이동 위치 5 : 페이징 그림을 보면 사이드바에 파란색으로 이동 위치를 표시했습니다. 이것은 1단 스킨에서는 유용하지만, 2단 스킨이나, 3단 스킨에서는 조금 불합리한 점이 생깁니다. 여기에 이동 위치를 지정하면 페이지가 위아래로 왔다 갔다를 반복하게 될 수도 있으므로 꼭 필요하지 않다면, 그리고 1단 스킨이 아니라면, 이동 위치를 지정하지 않는 것이 좋습니다.

블로그 스킨 코드에서 이동 위치 찾기 및 코드 넣기#

스킨 소스와 관련한 기본 사항은 티스토리 스킨 가이드를 참조하기 바랍니다.

티스토리 관리 화면 - 스킨 편집 화면

티스토리 관리 화면 - 스킨 편집 화면

실제로 넣을 코드는 다음과 같습니다. 각각의 위치에 <a name="이름"></a>와 같은 식으로 붙여 주면 됩니다. 구성할 메뉴와 이동 위치에 넣을 코드는 아래와 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#recommend">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code] [code html] <a name="top"></a> <a name="recommend"></a> <a name="comment1"></a> <a name="comment2"></a> <a name="paging"></a> <a name="end"></a> [/code]

이것을 스킨에 실제로 적용하면 다음과 같습니다. 빨간 네모기준이 되는 (X)HTML 코드 또는 티스토리 치환자입니다. 그것을 찾은 뒤 알맞은 위치에 이동위치를 표시하면 됩니다.

이동 위치 (스킨) 1 : 맨 위

이동 위치 (스킨) 1 : 맨 위

맨 위로 이동하게 만들려면 위 그림의 자주색 줄이 있는 부분, 곧 body 태그의 바로 다음에 a 태그(앵커 태그)를 넣어야 한다.

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이때 추천 배너를 플러그인에서 추가했기 때문에 위 화면에는 나타나지 않고 있습니다. 저와 달리 추천 배너의 코드를 직접 입력했다면 위 스킨 화면에 나타나게 됩니다. 또한 위와 같이 추천 배너의 코드가 나타나지 않는다면,[각주:3] 저 위치가 본문의 바로 다음인데, 블로그 소스 보기를 통해 정확한 위치를 찾아야 합니다.

다만 이 경우에는 임시로 저곳에 붙여 두겠습니다.

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동할 위치는 트랙백과 댓글의 내용이 나오기 바로 전입니다. 이동 위치 3 : 트랙백/댓글 보기 그림을 참조하십시오.

이동 위치 (스킨) 4 : 댓글 쓰기

이동 위치 (스킨) 4 : 댓글 쓰기

댓글 쓰기도 앞의 설명과 마찬가지입니다.

이동 위치 (스킨) 5 : 페이징

이동 위치 (스킨) 5 : 페이징

페이징은 보통 1~3줄로 나타납니다. 아무쪼록 페이징 영역의 맨 앞으로 이동 위치를 잡아야 합니다.

이동 위치 (스킨) 6 : 맨 아래

이동 위치 (스킨) 6 : 맨 아래

맨 아래는 </body>의 바로 앞에 이동 위치를 두면 됩니다.

각각의 위치에 앞서 설명했던 앵커 태그(a 태그)를 넣으면 됩니다. 이때 a 태그의 역할은 링크 걸기가 아닌 위치 지정입니다. 링크를 걸 때는 href 속성(href attribute)을 사용하며, 링크의 대상을 지정할 때는 name 속성(href attribute)을 이용합니다. 다만 링크 대상을 지정할 때 (X)HTML 공통 속성(Common attribute) 가운데 코어 속성(core attribute)에 속하는 id 속성을 사용할 수도 있습니다.

참고 1 : id 속성은 공통 속성이기 때문에 a 태그(a 엘리먼트) 이외에 다른 곳에도 쓰일 수 있습니다.

참고 2 : a 태그(a element / a 엘리먼트)는 앵커(anchor), 곧 을 가리킵니다.

위에서 추천배너에 대한 메뉴와 이동 위치 코드는, 앞서 설명했고 또한 보았듯이, 스킨에서는 넣을 수 있는 위치가 없습니다.[각주:4] 그러나 블로그 소스 보기를 통해서 그 위치를 찾아낼 수는 있습니다.

일단 여기까지 마친 뒤에 저장합니다. 저장은 선택이 아닌 필수입니다.

[저장]을 클릭하여 저장합시다.

[저장]을 클릭하여 저장합시다.

이동 메뉴 적용#

HTML 코드(skin.html) 적용#

일단 앞에서 이동할 위치를 스킨에 지정해 넣었습니다. 이번에는 그 위치로 이동하게 만들 메뉴를 넣어 보겠습니다.

빨간 네모 부분이 메뉴입니다.

빨간 네모 부분이 메뉴입니다.

저 부분을 스킨에서 찾으면 다음과 같습니다.

스킨(skin.html)에서 찾은 메뉴

스킨(skin.html)에서 찾은 메뉴

기준이 되는 것은 위치로그, 미디어로그, 방명록 등입니다. 각자 자신의 블로그 스킨에서 알맞은 문자열을 찾기 바랍니다. 때로는 메뉴가 그래픽 이미지 및 플래시 배너로 되어 있는 경우도 있습니다.

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

다 마쳤으면 일단 저장합니다.

CSS 코드(style.css) 적용#

style.css 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

style.css 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

제 경우는 맨 마지막 부분에 화면에 보이지 않을 부분이 자리 잡고 있습니다. 각자 자신의 CSS 설정의 맨 마지막 부분쯤에 코드를 넣으시면 됩니다.

넣은 뒤에는 저장하면 외형은 완성됩니다.

작동 확인 및 수정#

떠다니는 메뉴의 작동 확인#

떠다니는 메뉴에서 [처음으로]를 클릭했을 때의 화면

떠다니는 메뉴에서 [처음으로]를 클릭했을 때의 화면

하지만 저것이 정상 동작한다는 보장은 못합니다. 배경을 투명으로 했기 때문에 조금 이상하지만, 어쨌든 겉모양은 도아의 세상사는 이야기와 거의 같습니다. 왜? 그것을 베꼈으니까요.

떠다니는 메뉴에서 [추천배너]를 클릭했을 때의 화면

떠다니는 메뉴에서 [추천배너]를 클릭했을 때의 화면

추천배너를 클릭했으나 엉뚱한 곳으로 갔습니다. ^^a 다른 메뉴를 확인한 뒤 나중에 고치겠습니다. 아랫부분은 필요가 없어서 잘랐습니다.

떠다니는 메뉴에서 [댓글보기]를 클릭했을 때의 화면

떠다니는 메뉴에서 [댓글보기]를 클릭했을 때의 화면


떠다니는 메뉴에서 [댓글달기]를 클릭했을 때의 화면

떠다니는 메뉴에서 [댓글달기]를 클릭했을 때의 화면

이미 티스토리에 로그인했으므로 댓글 달기에서 이름이나 비밀번호 등을 묻지 않고 있습니다. 그러므로 다르게 나타날 수도 있습니다.

떠다니는 메뉴에서 [이동메뉴]를 클릭했을 때의 화면

떠다니는 메뉴에서 [이동메뉴]를 클릭했을 때의 화면


떠다니는 메뉴에서 [맨끝으로]를 클릭했을 때의 화면

떠다니는 메뉴에서 [맨끝으로]를 클릭했을 때의 화면

[맨끝으로]를 클릭했을 때는 반응이 조금 다릅니다. 이는 이동 메뉴는 화면에서 전체 높이의 30% 되는 곳에 둥둥 떠 있게 되지만, 이동 위치맨끝은 화면 전체 높이 100% 되는 곳입니다. 따라서 항상 떠다니는 메뉴보다 아래쪽에 위치하게 되므로 위의 그림은 정상입니다.

추천 배너 관련 수정 1#

앞서 추천 배너는 스킨에서 나타나지 않았습니다. 이것을 제가 임의로 지정하였는데, 그 위치는 추천 배너의 위치가 아닌 글의 끝이었습니다. 따라서 옳게 작동하게 만들려면, 떠다니는 메뉴의 항목을 글끝으로라고 고치거나, 또는 추천 배너의 올바른 위치를 지정해야 합니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#ccl-icon-[\##_article_rep_id_##]-0">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

처음에는 위와 같이 고쳤습니다. 그런데 작동을 안 했습니다. 태터툴즈에는 분명히 [##_article_rep_id_##]라는 치환자가 있지만, 티스토리에는 없기 때문입니다. 저렇게 할 수 있다면 매우 간단하게 이동 메뉴를 만들 수 있게 되지요.

추천 배너 관련 수정 2#

해결책을 찾아서 검색하다가 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2라는 페이지는 발견했습니다. 그곳에서는 자바스크립트로 처리하였으며, 저도 그것을 따라했습니다. 이 방법의 단점은 항상 CCL 마크를 달아야 합니다. 실수로 안 달면 추천배너는 작동하지 않게 됩니다.

강팀장 님의 게시글을 참조하여 고친 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><script type="text/javascript">             //<![CDATA[                var str1 = "[\##_article_rep_link_##]";                str2 = str1.slice(1,str1.length);                str2 = "ccl-icon-"+str2+"-0";                document.write("<a href='#"+str2+"'>추천배너</a>");             //]]>             //</script>         </li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

그런데 안 되더군요. ㅡㅡ;; 분명히 강팀장 님의 게시글에서는 잘 작동하는데, 왜 제 블로그에서는 안 될까요?

여러 가지 실험을 반복하여 티스토리에 문제가 있음을 알게 되었습니다. 고유주소permanant link, 곧 permalink를 뜻하므로,고유주소는 항상 블로그주소/아라비아수의 꼴(예컨대, http;//xyz.tistory.com/12345)로 이루어져야 합니다. 그런데티스토리가 제 블로그의 고유주소를 정의하지를 않았습니다. 다시 말해 티스토리의 버그 때문에 제 블로그에는 저 코드가 작동하지 않았다는 뜻입니다.

그런데 분명히 정의된 경우도 있습니다. 글제목에는 정의되어 있는데, 막상 자바스크립트에 적용하려고 보니 정의되지 않았다고 나옵니다. 이런 현상은 트랙백에서도 나타납니다. 스킨에서 트랙백과 관련한 부분에서는 잘 작동하는데, 사용자가 임의로 설정하면 작동하지를 않습니다. 미치고 환장할 노릇이죠. 테스트 블로그를 보시면 이 버그가 나타남을 볼 수 있습니다.

결국 버그 때문에 적용할 수 없게 되었습니다. 당분간 저 부분을 적용하지 않기로 했습니다.

덧붙이는 말#

팁을 적용하면서 발견한 버그는 티스토리에 정나미가 떨어지게 만들었습니다. 오죽하면 블로그를 (텍스트큐브닷컴으로) 합쳐야 하나?라는 생각을 했겠습니까?

다음과 통합된 뒤에 가입해서 그런지, 티스토리 버그 리포팅 등을 티스토리가 아닌 다음에서 처리한다는 것도 마음에 안 드는데, 버그 리포팅을 해도 답변이 없는 것은 진짜 열 받습니다. 제가 버그 리포팅을 한 것 가운데 맨 처음 한 번만 답변을 받았고, 나머지는 지금까지 수정이 안 되고 있고, 답변도 못 받았습니다.

그들은 사용자를 언제까지 기다리게 만들어야 직성이 풀리려는지 모르겠습니다.

관련 문서#

내부 문서#

외부 문서#

이 글은 스프링노트에서 작성되었습니다.


  1. 왕미친세상 블로그에서는 추천 배너를 글 끝과 태그 사이에 넣고 있습니다. [본문으로]
  2. 내가 생각하기에는, 추천 배너 위치로 이동하기는 블로그 방문자보다는 블로그 주인(블로거)의 입장을 고려한 위치 선정으로 보입니다. 하지만 대부분 추천 배너 위치로 이동하도록 메뉴를 구성하고 있으므로 저도 추가했습니다. [본문으로]
  3. 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않습니다. [본문으로]
  4. 다시 강조하건대, 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않고, 그러므로 스킨만 참조해서는 넣을 방법이 없습니다. [본문으로]
글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

카테고리

분류 전체보기 (1005)
스크립트 (22)
벌레와 팁 (126)
소프트웨어 (240)
하드웨어 (6)
이야기 (24)
말의 나무 (506)
미쳐보자 (22)
일기 (48)
아이폰 (10)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

글 보관함