티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기

티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기


블로그에서는 특정 파일을 업로드하여 사용자에게 제공할 수 있습니다. 특정 파일 양식에서부터 링크에 이르기까지 대부분의 것들을 다양한 방법으로 제공할 수 있는데요. 일반적으로 블로그 포스트를 작성할 때 많이들 사용하시는 글쓰기 에디터, 즉 위지윅 에디터에서 파일을 업로드하게 되면 아래처럼 간단한 파일 아이콘과 링크 텍스트가 제공되는 형태로 기본 설정이 되어 있습니다. ▼

티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기

위지윅 에디터에서의 파일 업로드



하지만 이 고전적인 방법의 문제점 중 첫번째는 예쁘지가 않다는 것이며, 클릭을 유도할만큼 직관적이지도 않다는 것입니다.

두번째 문제점은 파일을 꼭 티스토리 서버에 업로드 하여야만 사용자에게 제공해줄 수 있다는 점입니다. 사실 파일을 링크할 수 있는 HTML 소스코드를 직접 때려넣는 방법을 사용하면 해결할 수 있는 문제이지만, 예쁘지도 않은 링크에 손이 많이 가게되므로, 좋은 방법은 아니라 하겠습니다.

세번째 문제점은 두번째 문제점에서 파생되는 것입니다. 바로 수정/보완/유지보수 측면에서의 문제인데요. 예를들어, A라는 양식 파일이 이미 자사 홈페이지 게시판 등에 업로드 되어 있는 상태에서 블로그에서도 파일을 공유하고 싶을 때, 보편적으로는 게시판에서 양식 파일 다운로드 - 티스토리에 파일 업로드 - 완료 라는 일련의 프로세스를 거쳐야합니다. 이때 만약 A라는 양식 파일에서 오타 등이 발견되어 해당 파일을 수정할 필요가 생기면 홈페이지 게시판에 있는 파일 수정 업로드 - 블로그에 있는 파일 수정 업로드 으로 일거리가 많아지게 됩니다. 마찬가지로 해외사이트나 저작권 보유자의 사이트에 있는 양식을 블로그에서 재배포 할 때에도 번거로운 프로세스가 반복됩니다.

마지막 문제점은, 특정 블로그 스킨에서만 한정적으로 발생하는 것이지만 파일 아이콘과 파일 이름이 세로로 배치되는 현상이 나타날 수 있다는 점입니다. 위의 이미지에서 역시 파일 아이콘과 파일 이름이 세로로 정렬되어 있습니다. 이것은 img태그를 이용하는 CSS에 영향을 받는데, 대체로 .img {display: block;}등의 코드에 의합니다. 이 코드는 블로그의 댓글창이나 방명록 등에 사용되는 파비콘과 블로그명을 세로로 정렬하기 위해 사용될 수 있습니다만 파일 업로드에서도 영향을 주고 있기 때문에 발생합니다.

이러한 여러가지 문제점들을 일련에 해결할 수 있도록 하기 위해서는 파일 다운로드를 버튼 형태로 제공해주면 됩니다. 예쁘고 직관적이며, 파일의 기본주소를 직접 링크하기 때문에, 기본소스가 되는 파일이 수정되면(링크가 바뀌지 않는다는 전제하에서) 블로그를 포함한 다른 곳에서 공유되고 있는 모든 링크에서 수정된 최신버전을 제공할 수 있고, 고전적인 파일 아이콘을 사용하지 않으므로 세로 정렬 문제 역시 동시에 해결할 수 있습니다.

국내에서 버튼을 가장 잘 사용하는 블로그라면 아마 Back to the MAC ↩님의 블로그가 아닐까 합니다. ▼
티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기

대부분의 외부 링크를 직관적인 버튼으로 사용



파일 다운로드 버튼 만들기



Note

버튼 디자인을 Bootstrap을 이용하기 때문에, 꼭 마크쿼리 스킨이 아니더라도 Bootstrap을 이용하는 스킨이라면 해당 소스를 사용할 수 있습니다.


Important

소스코드 복사는 우측 하단에 있는 RAW 버튼을 클릭하세요.



이미 Bootstrap에 다양한 디자인이 들어있기 때문에, 사용자가 별도로 CSS를 디자인할 필요는 없으며, 버튼 형태를 사용할 수 있는 HTML 코드를 넣어준 뒤, 파일 링크 등만 적절히 수정해주면 됩니다.

소스코드는 다음과 같습니다. ▼



위 소스코드는 사용자가 적절히 수정할 수 있는 여지가 많습니다. icon-circle-arrow-down같은 다운로드 버튼 속 아이콘을 수정할 수 있으며, btn btn-primary class처럼 Bootstrap의 디자인된 여러가지 색상값과 크기를 조율할 수도 있습니다. 기본적으로는 다음과 같은 디자인을 마음껏 사용할 수 있습니다. ▼

티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기



최종적으로 변경된 스타일입니다. ▼

티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기


참고 Link


댓글(11)

  • 2014.02.20 12:28 신고

    그렇죠.. 이쁘게 잘 만들고 싶은데 말이죠^^.
    제 블로그는 이제 그냥 중구 난방이 되어 버렸어요.. 이제 답도 없다는..ㅠㅠ

  • 2014.02.20 12:43 신고

    소중한 정보 담아갑니다^^ 이제부터라도 적용해봐야겠어요~~!!!

  • 2014.02.20 16:07 신고

    이제 실명으로 활동하시는군요. 잘 보고 갑니다~

  • 2014.02.21 13:30 신고

    저에게 꼭 필요한 거네요 ㅎㅎ 고맙습니다!!! 항상 이미지로 첨부했는데 ㅠㅠ

  • 2014.02.21 15:35 신고

    좋은 정보 늘 잘 보고 있습니다
    빨리 실행하는 그날이 오기를 바랍니다..ㅋ

  • 2014.03.15 18:35 신고

    전에 말씀하신 레퍼런스 적용해서 포스팅하셨군요!
    궁금한 점이 있어 질문합니다.
    1. blockquote-blockqyote note- blckquote important는 각각 어떻게 마크다운 언어로 구분해서 쓰는 건가요?
    2. 링크나 관련 글 보기는 또 어떻게 쓰는건지 궁금합니다.
    3. 링크로 연결된 단어나 문장에 화살표는 어떻게 넣는 건가요? 전 그저 글씨가 파랑으로 바뀔 뿐 다른 기호는 달리지 않던데요...

    • 2014.03.16 10:55 신고

      1. <blockquote></blockquote> 는 마크다운 문법에서 > 를 쓰시면됩니다.

      2. note나 important는 마크다운 문법은 아니고, 별도의 HTML 소스코드이기 때문에 마크다운문법으로는 쓸 수 없고, HTML 형태로 사용해야 합니다.

      3. 폰트 클래스를 추가하면 됩니다. <i class="icon-external-link"></i>

    • 2014.03.16 14:50 신고

      나와있는 대로 html그대로 써줬고, css도 추가해 줬는데, 막상 나오는 것은 핑크나 하늘색이 아니라 여전히 회색 한 가지네요.ㅠㅠ

    • 2014.03.17 09:52 신고

      흠... 그럴리가 없는데... 이상하네요...ㅠ

    • 2014.05.14 18:26 신고

      다시 확인해 보니 제가 맥에서 쓰는 사파리 설정이 뭔가 잘못되었나 봅니다.
      인터넷 익스플로러나 파이어팍스에서는 멀쩡하게 잘 보이더군요. 어떻게 해결해야 할까요?

  • 2014.06.02 21:03 신고

    감사합니다^^
    소스좀 퍼갈께요!!

    근데 전 참고링크나 관련글보기박스를 html에 입력하면 내용만 보이고 박스는 보여지지가 않네요ㅠ

Designed by JB FACTORY