웹디자인에서 아이콘의 사용은 시각적인 효과로 더욱 멋진 웹사이트로 표현할 수 있는 수단입니다. 대부분의 경우 아이콘은 배경이 투명한 png 파일을 사용하지만 요즘 들어서 폰트를 이용한 아이콘의 사용이 늘고 있습니다. 이것은 CSS3의 @font-face 룰을 이용해서 서버에 폰트를 저장해두고 이 폰트를 가져와 원하는 곳에 배치하도록 합니다. 폰트는 알다시피 크기 조정도 자유롭고 색상 변경도 가능합니다. 이미지를 사용한다면 포토샵 같은 이미지 편집툴로 색상을 변경해서 파일을 만들어야 하지만 폰트는 CSS로 얼마든지 조정이 가능한 것이죠. 그러니 아이콘을 폰트로 사용한다는 것은 그만큼 웹디자인의 자유로움을 가져다주는 것입니다.
아래의 링크를 클릭하면 파일을 내려받을 수 있는 사이트로 이동합니다.
http://fortawesome.github.com/Font-Awesome/
배너의 우측에 있는 우산 이미지는 이 폰트 아이콘을 사용한 것입니다. 폰트처럼 사용할 수 있으니 크기를 늘리면 되는 것이죠. 더구나 폰트는 벡터라서 크기를 늘려도 외곽선을 부드럽게 만드는 효과도 있습니다. 이미지라면 흐리게 나오고 경계선이 매끄럽지 못하죠. 노란색의 버튼을 클릭해서 파일을 내려받습니다.
압축을 풀고 docs 폴더까지 들어가면 위처럼 나옵니다. index.html 파일을 클릭하면 이전의 웹사이트와 같은 화면이 나옵니다. 이것을 열어놓고 요소검사를 해서 폰트아이콘을 삽입해야합니다. 위 assets 폴더를 선택하고 Ctrl+C키를 눌러 복사합니다.
자식 테마 폴더에서 Ctrl+V키를 눌러 붙여넣습니다. 이 폴더 안의 폰트 파일과 CSS 파일을 워드프레스에서 사용하려면 header.php에 링크를 만들어줘야합니다.
편집기에서 헤더 파일을 선택하고 <?php wp_head(); ?> <!-- wp_head();-->의 바로 위에 빈 줄을 만들고 코드를 삽입합니다.
<link rel="stylesheet" media="print" type="text/css" href="http://localhost/wordpress31/wp-content/themes/eclipse-child/assets/css/font-awesome.css" />
빨간색 부분은 너무 길기도 하고 이 테마를 다른 곳에 설치한다면 URL의 경로가 달라질 것입니다. 그래서 자식테마의 폴더를 표시하는 템플릿 태그를 대체해주면 이런 문제를 해결할 수 있습니다. 위 빨간색 부분을 다음의 템플릿 태그로 교체합니다.
<link rel="stylesheet" media="print" type="text/css" href="<?php bloginfo( stylesheet_directory ); ?>/assets/css/font-awesome.css" />
원래는 스타일시트나 자바스크립트를 워드프레스에서 사용하려면 functions.php에 등록을 해줘야하지만 여기서는 간편하게 위처럼 사용합니다.
위에서 삽입한 스타일시트를 텍스트 편집기에 열어보면 위처럼 여러종류의 폰트 파일이 연결돼있습니다. 각 웹브라우저별로 인식가능한 폰트를 여러개 저장해놓고 인식시키는 것이죠. 이들 폰트 파일은 테마 폴더에 붙여넣은 assets 폴더의 font 폴더에 있습니다.
폰트 아이콘을 사용하는 방법은 폰트 아이콘 폴더 안에 있는 index.html을 웹브라우저에 열고 아래로 스크롤하면 아이콘과 클래스 선택자가 있습니다. 이를 삽입하고자 하는 곳에 <i> 태그를 이용해서 입력해주기만 하면 되지만 테마 폴더에는 여러개의 파일이 있어서 어느 것을 선택해서 어디에 삽입하는지 찾기도 어렵고 대부분의 요소는 함수에 의해 만들어지기 때문에 불가능 한 것도 있습니다. 그래서 여기서는 스타일시트를 복사해서 직접 입력하는 방법을 택합니다. 위처럼 요소검사를 해서 스타일시트 창에서 우선 ::before라고 된 부분을 찾아서 선택자와 중괄호 끝까지 블럭 설정해서 복사합니다.
편집기의 스타일시트 창에 붙여넣고 그 다음으로 두번째 빨간 박스 부분만 복사해서 이전에 붙여넣은 중괄호 안에 삽입합니다. 그러면 다음과 같이 됩니다. before 앞의 세미콜론은 하나는 제거하고 content 속성의 따옴표 안에서 f 앞의 기호는 역슬래시( \ )로 바꿔줍니다.
.icon-hdd:before {
content: "\f0a0";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
글 목록 앞에 이 아이콘을 배치하기 위해서 요소검사를 합니다. 선택자를 알아내기 위해서죠. archives-2 라는 div 태그 안에 있는 h2 태그입니다. 그러면 이 두 개를 이어서 다음과 같이 입력합니다.
#archives-2 h2:before {
content: "\f0a0";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin-right:10px;
display: inline-block;
text-decoration: inherit;
}
다른 곳에도 아이콘을 삽입하려면 위에서처럼 요소검사를 해서 선택자를 알아내고 아이콘의 스타일시트를 복사해서 사용하면 됩니다.
여기까지 하나의 테마를 갖고 수정해서 사용하는 방법을 알아봤습니다. 손을 대자면 끝없이 진행될 것 같아서 여기서 마치기로 합니다. 부족한 부분은 지금까지 한 내용이나 제 글중에 CSS 기초부분을 참고해서 혼자서 마무리 하면 됩니다. 질문 하셔도 되고요.
지금까지 진행한 부분은 인디자인으로 편집해서 전자책으로 만들 것이니 며칠 기다리면 공개될 것입니다. 한 방문자님이 이미 출판한 서적을 전자책으로 출판할 수 없는가 질문을 해주셨는데 전자책은 암호화 문제도 있고 피지컬 책(Physical Book: 전자책의 반대 개념)이 나온 이상 전자책은 인쇄비용이 들지 않기 때문에 가격이 거의 반 이상으로 내려갈 것인데 그러면 피지컬 책을 사려고 하지 않죠. 그래서 여러가지로 출판사의 애로사항이 있습니다. 위 과정은 전자책으로 나오게 되니 휴대폰이나 태블릿 PC로 간편하게 볼 수도 있을 것입니다. 워밍업과정이라고 해서 자세한 설명을 생략했습니다. 그래서 이해가 안되는 부분도 있겠지만 한편으로는 너무 긴 내용이 되기도 합니다. 페이지로 얼마나될지는 모르겠지만 150페이지가 된다면 거의 책 한권의 수준이 될 것 같습니다.
테마 수정 코드-->
테마수정코드1125-1.txt
