티스토리에서 div 태그만으로 첨부파일 다운로드 버튼 꾸미기(CSS)

굳이 티스토리 블로그를 이용하는 이유는 모두 같다. 사용자가 마음껏 html를 수정하며 꾸미는 재미가 있기 때문이다. 그런데 티스토리의 에디터에서 ‘파일 첨부’ 기능을 이용하면 첨부파일 화면의 디자인이 예쁘지가 않다.
무슨 말이냐 하면,
아래와 같이 ‘파일 첨부’를 이용해서 방문자가 다운로드할 수 있도록 파일을 업로드하면

 

이렇게 파일 아이콘과 파일명이 통째로 생성된다.

 

코드를 들어가 보면 이런 구조로 돼 있다.

물론 이 코드를 분석해서 파일의 URL을 추출하고 CSS를 이용해 a 태그에 예쁜 효과를 준 다음, 각 글을 쓸 때마다 버튼 속성을 달리 줄 수도 있다. 그런데 이 경우 매번 긴 태그를 입력해야 한다는 번거로움이 있다. CSS를 꾸몄다 하더라도, 첨부파일을 올릴 때마다 글에 다음과 같은 태그를 첨부파일이 있는 글마다 다 마크업해 줘야 하는 것이다.

<span class="css_button">  
	<a href="../attatchment/2452724870C.zip">다운로드 : 예제소스.zip </a>
</span>

위 작업은 너무 번거롭다. 기왕이면 그냥 일반 p 꾸미듯, CSS에서 일정한 속성 하나를 지정해 주고, 글을 올릴 때는 p의 클래스 네임만 지정하면 참 편할 것 같다. 하지만 p를 이용하게 되면 가로 사이즈가 고정돼 버린다. 나는 p를 쓰면서도 파일 이름의 길이에 따라 너비가 자동으로 조절되는 버튼을 원했다. 그렇게 찾고 찾은 곳이 아래 사이트이다.

http://cssgradientbutton.com/

위 사이트는 그라데이션 버튼의 CSS 속성을 자동으로 만들어주는 곳이다. 여기서 원하는 스타일의 그라데이션을 골라 코드를 복사하면 편리하면서 동시에 그럭저럭 예쁜 파일 다운로드 버튼을 연출할 수 있다.

---

1. 버튼 속성 만들기

위의 사이트에서 마음에 드는 버튼을 클릭한다.

 

‘Edit’ 버튼을 눌러 세부 설정을 마음대로 바꿀 수도 있다.

 

마음에 드는 색상이 나왔다면 아래의 코드 창에서 CSS 속성 부분만 드래그해 복사한다. ‘.button_example’부터 ‘ } ’까지 복사하면 된다.

2. 버튼 속성 적용하기

티스토리 관리자 화면으로 가서 복사한 코드를 ‘style.css’ 맨 뒤에 붙여넣기한다. 편의성을 위해 이때 클래스네임인 ‘.button_example’를 간단한 것으로 바꾸는 것이 좋다. 나는 간단히 ‘.down’으로 변경했다.(코드에 ‘.button_example’이 두 개이므로 둘 다 바꾸어야 한다.)

 

그 다음 글을 쓸 때 파일첨부를 한 다음, HTML 모드로 간다.

 

첨부파일 소스 앞뒤로 이렇게 p 태그만 붙여 주면 된다.

 

이렇게 글 작성을 마치면 아래와 같이 그라데이션 버튼이 자동 출력된다. 편리하다.

3. 조금 더 꾸미기

파일 앞에 글자 넣기

CSS를 수정해 이렇게 파일 앞에 ‘DOWNLOAD’ 같은 말을 붙일 수도 있다.

 

위 예제와 같이 ‘DOWNLOAD’라는 말을 붙이고 싶다면 CSS에서 다음 코드를 추가한다.(서체와 같은 속성은 변경할 수 있다.)

 .down:before {content: "DOWNLOAD :"; font-family: 'PT Sans'; font-weight: bold; margin-right: 0.4em;}

Font Awesome 글리피콘 넣기

글리피콘을 이용해 이렇게 파일 앞에 다운로드 아이콘을 출력할 수도 있다.

 

‘Font Awesome’의 글리피콘을 붙이고 싶다면 CSS에서 다음 코드를 추가한다.(단, Font Awesome이 설치되어 있어야 한다.) 콘텐츠 코드인 "\f019"를 변경해서 다른 아이콘으로 적용 가능하다.

.down:before {
	content: "\f019"; font-family: 'FontAwesome'; font-weight: normal; margin-right: 0.2em;
}

 

글리피콘 설치 방법은 아래 포스팅에서 볼 수 있다.

http://somgle.tistory.com/49