파일 첨부 서식활용하기

에디터에 파일을 첨부하는 기능이 있습니다. 

단순이 첨부하는것보다 좀더 꾸며보고 서식을 활용해서 글쓰기 에디터에서 간단하게 사용하는 방법을 알아보겠습니다.

일단 제가 사용하는 서식하나 올려보겠습니다. 
아래의 코드를 html 에 체크하시고 서식으로 저장하세요.


다운로드서식1.txt


이제 설명들어갑니다. 좀더 디테일하게 꾸미시면 멋진 서식을 만들수 있을겁니다.
저는 기존에 있는 이미지를 활용했습니다.

class="txc-textbox-download1" 부분은 기존서식과 섞어지 않게 download1 이라고 정하고 저장했습니다. 원하는 이름으로 변경해서 저장하셔도 됩니다.
class="txc-textbox 는 티스토리에서 사용하는것이므로 추가적으로 download1 이라고 수정한것입니다.

background: url(https://t1.daumcdn.net/cfile/tistory/177E6D274AF2CF7E29) no-repeat left center;
이 부분은 배경으로 본인이 마음에 드는 이미지를 업로드하고 그 주소를 적어넣으면 됩니다.

저의경우 텍스트 text-align:center; 가 적용이 되어있습니다. 아마도 거의 모든 스킨이 이렇게 적용이 되어 있을겁니다. 그래서 파일첨부하면 가운데 정렬을 합니다.
제가 사용하는 이미지는 200*50 정도의 이미지이므로 왼쪽으로 붙여놓고 , 첨부한 파일은 가운데 정렬로 했습니다.

border 도 이미지와 비슷한 색으로 했습니다.
border: 1px solid rgb(47,130,0)

한가지 더.
위의것은 이미지가 한쪽으로 나오는겁니다. 아래것은 위의칸을 전부사용하고 첨부한 파일은 그 아래에 위치하는 격입니다.
또한 파일이 하나가 아니라 여러개를 첨부할때 사용하면 유용할것 같습니다.
우선 코드부터 날립니다.


다운로드서식2.txt


이미지를 보시면 어떤 형태인지 아실겁니다. 참고하세요.



서식으로 저장하기.


사용해보기.


한가지 팁.

파일 첨부한곳 css 적용하기

서식에서도 적용할수 있지만 css편집창에서도 적용을 할수가 있습니다.
.imageblock 라는 부분입니다.
티스토리 치환자 보기 => http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=5#Imageblock

.imageblock 라는 부분에 적용을 하면 이미지와 모든 부분에 적용이 되므로 첨부한 파일의 글자에만 적용하기 위해 .imageblock a 를 사용합니다.

즉 위의 배경에서 색깔이 들어가있는걸 사용했을경우 , 만약 어두운 바탕색으로 했을경우 다운로드서식1.txt 라는 글씨가 검정색이기 때문에 잘 안보입니다.
그러때는 .imageblock a:link{color:#fff;} 이렇게 정해주면 잘 보일겁니다.

기본적으로 클래스는 상위의 디자인을 적용받는데 지정을 해주면 변경할수도 있습니다.
다운로드서식1.txt 라는 글씨가 크게 보이게 하고 싶다. 현재 본문의 글씨크기는 13px입니다. 아무지정을 해주지 않으면 13px 크기로 나옵니다.

하지만 .imageblock a:link{color:#ddd; font-size:16px;} 라고 적어주면 아래처럼 보입니다.


글씨가 커진부분이 보이시죠. 이렇게도 조정이 가능하니 맘대로 수정해서 사용하시면 됩니다.
개    개