안녕하세요. 4H-Life Research Center의 센터장
秀④:H 입니다.
가는 해를 정리하고 오는 해를 계획하는 현 시점에서
한 장 남은 올해 달력과 한 부씩 늘어가는 내년 달력을 바라보며,
뭔가 새로운 출발이 필요하다고 느꼈습니다.
+12/30 16:07 새로운 출발 #2 가 완료되었습니다.
요번에 댓글 입력창과 방명록 입력창을 아주 약간 바꿨습니다.
포스트 링크로 연결되어 있어 약간 불편했던
BBCode 사용법을 Alert 처리했고,
BBCode 적용 버튼을 바꿨고, 이모티콘 적용 버튼을 추가했지요.
(BBCode는 위 링크에서, 버튼은
QNSI 에서 가져왔음을 밝혀둡니다.)
이미지 몇 개 업로드하고 HTML 코드 일부 수정하면 되는 간단한 작업이었는데,
특히 수정할 때 필요한 소스가 있어 복사-붙여넣기 신공만 몇 번 하면 되는 초간단 작업이었는데,
오랜만에 스킨을 수정한다는 들뜬 마음에 수많은 삽질을 통해 근 30분만에 완성했습니다.
아래와 같은 HTML 소스가 "완성+확립+적용"되었죠.
입력창 상단 부분 소스 접기
**"javascript:bbcodeintro() "에 해당하는 부분은 <head>에 설정해 두었습니다.
**" "(공백 삽입 코드)는 제가 임의로 넣은 것입니다. 오류가 아닙니다.
**방명록 소스는 아래와 일부 글귀만 다르고 font color 등 기본 틀은 같습니다.
<div class="writecomment">
<s_rp_input_form>
<p> <font color=green>여러분의 짧은 댓글 하나가 큰 힘이 됩니다!</font><br/> <font color=darkorange>[<a href="http://4hlrs.com/login"><font color=darkorange>여기서 바로 티스토리 로그인하기</font></a>]</font><br /> <font color=darkviolet>댓글도 HTML처럼 사용해 보세요.</font> (<A onClick='javascript:bbcodeintro();' style=cursor:hand;><FONT color=darkblue>사용법 보기</FONT></A>)</p>
접기
Textarea + BBCode, 이모티콘 버튼 소스 접기
**방명록 소스는 아래와 "comment_701 " 부분만 다르고 기본 틀은 같습니다.
<textarea name="" cols="100%" rows="5" id="comment_701" class="gulim"></textarea>
<!-- bbcode, emoticon 단추 시작 -->
<DIV class="bbcode_button">
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[b]','[/b]')" title="진하게"><strong>가</strong></a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[i]','[/i]')" title="기울임"><em>가</em> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[u]','[/u]')" title="밑줄"><u>가</u> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[color=red]','[/color]')" title="글자색"><font color="red">가</font> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[quote]','[/quote]')" title="인용">"인용" </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[img]','[/img]')"><img src="./images/bbimage.gif" alt="그림 넣기" title="그림 넣기" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[ur=http://]','[/ur]')"><img src="./images/bbhyper.gif" alt="하이퍼링크" title="하이퍼링크" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'[embed=주소 폭 넓이]','[/img]')"><img src="./images/bbmov.gif" alt="영상 넣기" title="영상 넣기" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'',':)')"><img src="./images/bbcode_emoticon06.gif" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'',';)')"><img src="./images/bbcode_emoticon01.gif" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'',':P')"><img src="./images/bbcode_emoticon02.gif" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'','8D')"><img src="./images/bbcode_emoticon03.gif" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'',':(')"><img src="./images/bbcode_emoticon04.gif" align="texttop"> </a>
<a style=cursor:hand; onclick="insertAtCursor(document.getElementById('comment_701'),'','--;')"><img src="./images/bbcode_emoticon05.gif" align="texttop"> </a>
</DIV>
<!-- bbcode, emoticon 단추 끝 -->
<input type="image" name="submit" src="./images/i_submit_f.gif" onclick="BBDecode.ResetTimer(); " class="submit" />
</s_rp_input_form>
</div>
접기
수정 목적이 대단했다거나 수정 작업 강도가 센 것이 아니었음에도 불구하고,
아래와 같은 자잘한 오류들 때문에 꽤 많은 시간을 보내며
심적 압박 에 시달렸습니다. ㅠ.ㅠ
(댓글창) BBCode 버튼 코드 'textarea id=' 부분 오류
(댓글창) Textarea 코드의 위치 오류로 인해 1번 항목의 textarea id가 정의되지 않음
(방명록창) 방명록 textarea id를 댓글창 textarea id와 같게 지정해서 BBCode 버튼 미작동
(방명록창) 3번 항목 수정 중 입력창 상단 부분 Alert 관련 </a>를 삭제해서 희한한 오류 발생
(공통) 이모티콘 버튼 이미지 파일 업로드 과정에서 6개 이미지 이름이 하나씩 밀려서 설정됨 이게 오류 자체는 미미하지만 수정이 상당히 귀찮아서리.. (막장 귀차니즘 발동. ㅋㅋ)
하지만 이렇게 나름 많은 노력을 통해 확립된 New 댓글 & 방명록 창을 보니,
지금은 안도감, 안정감과 함께 스킨 수정 완료 후 오는 '경미한 무아지경'에 빠져 있습니다.
아~ 기분 좋아라~ 소스 작동도 잘 되고~ 내 마음에도 들고~ 에헤라디야~
더욱 편리해지고 시각적으로도 조금 더 즐거워진 4H-Life Research Center의 댓글과 방명록,
앞으로 더욱 더 많은 관심과 이용 부탁드리겠습니다~
P.S. 혹시 BBCode와 버튼을 달고 싶으신 블로거분들께서는 위 소스를 마음껏 가져가셔도 됩니다 ^^
이왕이면 댓글 and/or 방명록 남겨 주시는 센스를 유감없이 발휘해 주세요~ ㅋㅋ