티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기
- 블로그 관련 정보
- 2014. 2. 20.
반응형
티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기
블로그에서는 특정 파일을 업로드하여 사용자에게 제공할 수 있습니다. 특정 파일 양식에서부터 링크에 이르기까지 대부분의 것들을 다양한 방법으로 제공할 수 있는데요. 일반적으로 블로그 포스트를 작성할 때 많이들 사용하시는 글쓰기 에디터, 즉 위지윅 에디터에서 파일을 업로드하게 되면 아래처럼 간단한 파일 아이콘과 링크 텍스트가 제공되는 형태로 기본 설정이 되어 있습니다. ▼
위지윅 에디터에서의 파일 업로드
하지만 이 고전적인 방법의 문제점 중 첫번째는
예쁘지가 않다는 것이며, 클릭을 유도할만큼 직관적이지도 않다는 것입니다.
두번째 문제점은 파일을 꼭 티스토리 서버에 업로드 하여야만 사용자에게 제공해줄 수 있다는 점입니다. 사실 파일을 링크할 수 있는 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의 디자인된 여러가지 색상값과 크기를 조율할 수도 있습니다. 기본적으로는 다음과 같은 디자인을 마음껏 사용할 수 있습니다. ▼
최종적으로 변경된 스타일입니다. ▼
반응형