친효애드온: 티스토리 첨부파일 디자인 변경 설치 및 적용 방법 (마크1)
현재 일부 스타일을 변경해서 적용하고 있습니다. 스킨은 현재 순조롭게 완성되어가고 있습니다. 그 중에서 당장 사용 가능한 몇가지들을 공유하려고 합니다. 현재 친효스킨은 부분별로 업그레이드가 가능한 파츠형 스킨으로 개발 중 입니다. 누구라도 쉽게 커스터마이징 해서 사용하기 편리한 그런 스킨으로 완성하는데 목표를 두고 있습니다.
티스토리에서 기본적으로 제공하는 첨부파일 스타일이 뭔지 아시죠? 상당히 촌스럽습니다. 그리고 눈에 잘 띄지도 않습니다. 개인적으로 두번째 문제가 가장 심각하다고 생각합니다. 첨부파일이 어디에있나 한참을 찾을 이유가 없습니다. 누가봐도 "아, 이게 첨부파일이군!" 싶어야 합니다.
이게 기존 티스토리 첨부파일 디자인 입니다. 눈에 잘 안띕니다. 이것을 수정하려면 CSS 내부에서 클래스값이 .imageblock 인 요소를 찾아서 수정해주시면 됩니다. 이것은 스킨마다 다를 수 있습니다. 그리고 원본은 반드시 백업해 두세요. 그리고 스킨 수정 전에 한번 전체적으로 백업을 해주시기 바랍니다. 문제가 발생되면 언제든 롤백할 수 있도록 말입니다.
See the Pen :: before -&rt; FontAwesome CSS Unicode Use by rgy0409 (@rgy0409) on CodePen.
이것이 수정 후 모습입니다. 마우스를 올려 보세요. 반전되는 효과도 확인하실 수 있습니다. 무엇보다도 눈에 확 들어와서 확실히 첨부파일의 위치라던지 파일명을 직관적으로 알 수 있습니다. CSS3 태그 요소들을 모두 메모장에 복사해두세요. 그대로 사용할 것 입니다. 아래에 첨부파일로도 남기겠으니 다운받으셔서 사용하세요.
CSS 세팅
적용 방법도 어렵지 않습니다. 먼저 현재 사용하시는 스킨의 CSS 화면으로 이동합니다.
이곳에서 Ctrl + F를 누르셔서 .imageblock 을 검색합니다. 만약 검색이 된다면 기존 요소를 주석처리를 하거나 아예 삭제를 합니다. 저는 저 위에 표시된 것 처럼 주석 처리를 해놨습니다. 참고로 제가 사용하는 스킨은 JB131 반응형 스킨 입니다. 그리고 그 아래로 쭈욱 붙여넣기를 해주시면 됩니다. 이게 끝입니다. 간단하죠? (위의 예제와 첨부파일의 코딩 상태는 다를 수 있습니다. 첨부파일이 가장 최신 버전 입니다.)
Script 세팅
다음은 스크립트 링크 입니다. HTML의 <head> 안쪽에 붙여넣기를 해주시면 됩니다.
이렇게 붙여넣기 해주세요. 위치를 잘 모르시겠다면, <title> 바로 아래에 넣으시면 됩니다. 위의 링크 태그는 아래의 첨부파일에 있습니다.
HTML 세팅
아래는 구 버전 방법입니다. 현재는 일괄 적용됩니다.
이 부분은 세팅이라고 할 건 없고, 본문에서 이 첨부파일 스타일을 적용시키고 싶다면 수동으로 div를 감싸줘야 합니다. 원래 일괄적용되게 만들었었는데, imageblock 이라고 하는 클래스명이 본문의 두 군데 이상에서 사용되고 있어서 혹시 중복 적용되지 않을까 싶어서 따로 뺐습니다.
먼저 일반적으로 첨부파일을 올립니다.
그러면 이런식으로 글을 작성하실 때 보여지게 됩니다. 이제 오른쪽 상단에 있는 HTML 메뉴를 체크해서 수동으로 태그 수정을 할 것입니다. 어렵지 않습니다.
여기를 먼저 체크해서 html 수정 모드로 들어갑니다. 그리고 아래와 같은 태그 부분을 검색합니다.
<div id="rgyFile">
<p>##_1N|cfile9.uf@99D86E3A5C2ED0372AA4B5.txt|filename="친효애드온-첨부파일(CSS).txt" filemime="text/plain"|_##</p>
</div>
찾으셔야 할 부분은 검정색 태그 부분입니다. 이 태그가 첨부파일을 구성하고 있는 요소들 입니다. 올리신 첨부파일의 파일명으로 찾으시면 금방 찾으실 수 있습니다. <p>태그로 감싸고 있는 부분을 제외한 나머지를 저 빨간색으로 작성되어 있는 div 태그로 수동 입력을 하여 감싸줍니다. 이게 끝 입니다. 간단하죠? 글쓰기 모드에서는 구별이 안 되지만, 미리보기나 글 작성 완료 후 본문을 확인해 보시면 적용이 되어 있다는것을 확인하실 수 있습니다.
주의사항 :
친효애드온 이미지 테두리 자동 감싸기와 중복 사용이 가능하지만, 이미지에 링크를 걸게 되면 이미지가 삭제됩니다. 이점 참고하시기 바랍니다.
친효애드온의 저작권은 저에게 있습니다. 코딩에 마크업된 태그 요소들은 수정하셔서 사용하셔도 됩니다. 하지만 주석처리된건 절대로 지우시면 안 됩니다. 한번 첨부파일을 올려서 테스트해보세요. 잘 적용이 될 것입니다. 이제 답답했던 첨부파일 디자인을 버리고 새로운 옷으로 갈아입으십시오! 앞으로 여러가지 티스토리에 도움되는 애드온을 많이 만들도록 하겠습니다. 끝.
