본문 바로가기

블로그 꾸미기2

티스토리에서 div 태그만으로 첨부파일 다운로드 버튼 꾸미기(CSS) 굳이 티스토리 블로그를 이용하는 이유는 모두 같다. 사용자가 마음껏 html를 수정하며 꾸미는 재미가 있기 때문이다. 그런데 티스토리의 에디터에서 ‘파일 첨부’ 기능을 이용하면 첨부파일 화면의 디자인이 예쁘지가 않다. 무슨 말이냐 하면, 아래와 같이 ‘파일 첨부’를 이용해서 방문자가 다운로드할 수 있도록 파일을 업로드하면 이렇게 파일 아이콘과 파일명이 통째로 생성된다. 코드를 들어가 보면 이런 구조로 돼 있다. 물론 이 코드를 분석해서 파일의 URL을 추출하고 CSS를 이용해 a 태그에 예쁜 효과를 준 다음, 각 글을 쓸 때마다 버튼 속성을 달리 줄 수도 있다. 그런데 이 경우 매번 긴 태그를 입력해야 한다는 번거로움이 있다. CSS를 꾸몄다 하더라도, 첨부파일을 올릴 때마다 글에 다음과 같은 태그를 첨.. 열린노트/IT·SW·디자인
티스토리나 웹사이트에 Font Awesome 글리프 아이콘 CSS 활용하기 지난 포스트에서 Font Awesome 4.3.0 설치와 사용법을 간단하게 소개했다. Font Awesome 설치 및 사용법 포스트 바로가기 위에서 설명한 방법은 HTML 등에서 마크업하는, 그러니까 일일이 입력해 주는 방법이다. 실제로 Font Awesome 홈페이지에 있는 'Examples'에서는 거의 이 방법들만을 위주로 소개하고 있다. 그런데 글리피콘의 진가는 개별 마크업에서 오는 게 아니라, CSS에서 온다. 일정한 class 네임을 가진 요소들의 앞이나 뒤에 이 글리프 아이콘들을 넣도록 설정함으로서 웹사이트와 블로그의 디자인을 더욱 깔끔하고 예쁘게 꾸밀 수 있는 것. 그 기본적인 원리와 방법을 소개한다. Font Awesome을 CSS에 활용해 보자 리스트 앞에 사용하기 Font Awesome.. 열린노트/IT·SW·디자인