그동안 CSS 기초부분에서 진행한 내용을 기반으로 티스토리 블로그 스킨 만들기를 진행하였는데 사실 블로그 스킨 만들기는 대단한 CSS 기술이 사용되는 것은 아닙니다. 기초적인 레이아웃에 관한 지식만 있으면 누구나 스킨을 만들 수 있습니다. 가장 많이 사용하는 것이 div 태그를 이용하여 요소를 배치하고 마진과 패딩을 이용하여 세부 조정을 하는 것입니다. 인터넷 익스플로러가 CSS3의 둥근 모서리와 그림자 효과를 지원하지 않는 관계로 글 내용이 많이 길어졌지만 둥근 모서리 이미지를 만들어 웹페이지의 배경을 삽입하는 것은 아주 많이 사용하는 방법입니다. 인터넷 익스플로러 10버전이 나온다해도 다른 웹브라우저에서처럼 반강제적으로 업그레이드를 하도록 하지 않는 이상 구버전의 인터넷 익스플로러는 계속 사용될 것이고 복잡한 둥근 모서리의 이미지를 사용한 CSS는 지속될 것입니다. 구글에서는 이미지를 사용하지 않고 복잡한 CSS를 사용하여 둥근 모서리를 구현하는데 CSS 기초부분에서 소개드리겠습니다.
이번 글에서는 아이콘을 삽입하고 스킨만들기 과정을 마무리하겠는데요. 중점적인 내용은 스프라이트(Sprite)입니다. 이것은 하나의 이미지에 여러가지 아이콘 이미지를 포함시켜서 아이콘이 필요한 곳에 배경이미지로 삽입하면서 포지션만 조정하는 것입니다. 즉 파일이름은 다 동일하지만 포지션만 바꾸므로서 필요한 아이콘만 나타내도록 하는 것입니다. 이러한 이미지를 스프라이트라고 합니다. 이미지가 한번에 로딩되어 다시 로딩되는 시간이 절약되므로 웹페이지의 속도도 빨라집니다. 특히 슬라이딩 도어테크닉을 이용한 메뉴바 는 이미지가 이미 로딩되어있기때문에 빠른 이미지 전환이 가능합니다.
압축파일을 풀고 iconset-0.png 파일을 포토샵에 열면 위와같니 나옵니다. 포토샵이 없어도 대략적인 위치만 파악하면됩니다. 메뉴에서 윈도우-info를 선택하면 우측과 같은 패널이 나옵니다. 마우스를 이미지의 일정한 위치에 올리면 좌표가 나옵니다. 포토샵으로 이미지를 만들때는 규칙적인 위치를 정하는 것이 사용하기 편리합니다. 예를들어 20픽셀의 간격으로 배치한다든가 하는 것이죠. 위에서는 어떤 규칙이 없지만 사용하는데는 문제는 없습니다. 2에서 X Y좌표가 나오고 사각형선택툴로 클릭드래그하면 대략적인 사이즈가 나옵니다. 이 자료를 토대로 배경이미지 포지션을 설정합니다. 위 이미지와 다른 아이콘 이미지를 블로그에 업로드합니다. 위 스프라이트에서 사용할 아이콘은 1, 4, 5, 6의 아이콘이고 다른 두개의 아이콘은 하나의 이미지로 되어있습니다.
우선 댓글 부분 상단에 있는 글작성자 앞과 태그 앞에 아이콘을 삽입합니다. 아이콘의 삽입은 기존에 있는 태그의 배경으로 삽입할 수도 있지만 스프라이트를 사용하면 여러개의 아이콘들이 있기 때문에 쉽게 배치할려면 <span>태그를 별도로 삽입하여 사용하는 것이 편리합니다. 특히 글자가 있는 부분의 배경으로 삽입하게 되면 이미 글자의 사이즈가 정해져 있기 때문에 서로 크기가 맞지 않습니다. html 편집창에서 author로 검색하여 3앞에 <span class="iconset"></span>를 삽입합니다. 선택자는 클래스로 하고 이름을 정합니다. tagTrail 로 검색하여 4처럼 같은 태그를 삽입합니다.
CSS에서 .iconset 앞에 부모요소의 클래스 선택자를 삽입합니다. 아이콘 크기의 가로세로 크기를 입력하고 배경이미지를 입력한 다음 XY 좌표를 입력합니다. 좌표값은 이미지의 좌측 상단을 기준으로 마이너스값을 갖습니다. span태그에는 내용이 아무것도 없으므로 이대로 두면 배경이미지가 나타나지 않습니다. 패딩값을 설정해야하고 수치는 폭을 입력합니다. 패딩은 left나 right로 해도 됩니다. 태그의 배경이미지는 다음에 오는 글자와 간격을 두기위해 10처럼 우측 마진을 설정합니다. 그리고 tagTrail에 이미 있는 배경이미지는 제거( background: url(images/icon_tag.gif) left 3px no-repeat; )합니다. 12의 패딩 속성 부분도 삭제합니다.
댓글부분에 아이콘을 삽입합니다. class="comment"로 검색하여 1처럼 같은 태그를 입력합니다. 현재 "댓글을 달아주세요"라는 글자는 보이지 않도록 설정해놓았는데 .comment h3로 검색하여 2부분을 inline으로 바꿉니다. 이것은 h3가 블럭요소라서 자신 외에는 좌우에 아무것도 올 수가 없어서 span 태그를 앞에 둘 수가 없게 되는데 inline으로 설정하면 블럭요소에서 인라인요소로 전환되고 span 태그와 나란히 있을 수가 있게 됩니다. 3처럼 iconset앞에 부모요소 클래스 선택자를 입력하고 아이콘의 가로세로 수치를 입력합니다. 배경이미지를 삽입하고 좌표를 입력합니다. 5처럼 패딩값을 width 보다 크게하면 다음에 오는 글자와 간격이 만들어지게 됩니다.
사이드바의 아이콘은 카테고리부분은 치환자로 관리되기 때문에 티스토리 센터에서 직접오는 이미지입니다. 이것은 배경이미지로 사용되는 것도 아니고 img 태그로 이미지가 직접입력되는 것이라서 수정이 안됩니다. 동그란 점으로된 아이콘은 스킨에서 사용되는 것이기 때문에 수정이 가능합니다. 사이드바의 아이콘은 모두 bullet_dot.gif파일로 리스트 앞에 위치합니다. 이것을 이미 업로드한 png 파일로 수정만 해주면 모든 아이콘은 변경됩니다. 사이즈가 다르므로 세로 위치를 조정하기 위해 2의 수치를 70%로 수정합니다. 또한 3처럼 좌측 패딩을 20픽셀로 설정해야 글자와 간격이 만들어집니다. 사이드바 아이콘 중에서 링크부분과 글보관함의 아이콘은 다른 것을 사용하므로 별도로 설정해줍니다.
링크 아이콘은 스프라이트에 있는 것을 사용하므로 이 이미지 파일이름을 입력하고 좌표를 설정합니다. 패딩값을 25픽셀 설정해서 글자와 간격이 떨어지게 합니다. 글보관함은 별도의 아이콘이 있으므로 이 아이콘 파일 이름을 입력하고 7처럼 세로 50%로 해주면 중간에 배치됩니다.
이로써 부족하나마 워드프레스 테마인 Suffusion을 티스토리 스킨으로 만드는 과정을 마칩니다. 워드프레스 테마은 아래 이미지처럼 제목부분의 날짜가 나오는 부분이 핵심인데 티스토리에는 날짜를 분리하는 치환자가 없습니다. 제가 찾아보았는데 찾지를 못한건지도 모르죠. 나중에 알게되면 추가로 변경하도록 합니다.
위처럼 날짜에서 day, month, year가 분리되자면 치환자가 별도로 필요한데 티스토리의 치환자는 분리돼서 나오는게 없더군요. 그래서 제목부분을 리본으로 대치했습니다.
최종 수정화면입니다. 메뉴바의 배경이미지는 제이쿼리 플러그인 다운로드 사이트에서 다른 색상의 파일을 다운받아 이미지만 추가 업로드하면 색상이 바로 수정됩니다. 메뉴부분의 글자 색상이 어두운데 취향에 따라 밝게 수정하면됩니다.
최종 스킨파일입니다.
사용법은 이곳 으로 가시면 이전에 스킨 파일 올리면서 설명을 올린 부분이 있으니 참고하세요. 처음 설치하면 검색창은 사이드바에 추가로 나옵니다. 검색모듈을 사이드바에 사용하실 분을 위해 그대로 둔 것이고 헤더부분에서만 사용할 경우 관리자 센터의 사이드바 설정에서 검색모듈을 제거하면 됩니다. 메뉴와 검색모듈의 사용위치에 따라서 여러가지 버전으로 올릴 예정이나 우선 사이드바의 검색모듈을 제거하고 메뉴부분을 수정해서 올렸습니다. 상단의 제이쿼리 메뉴는 컬럼이 두개 있는 경우 가끔 에러가 나서 배경이미지가 나오지 않는 증상이 있어서 컬럼을 하나만 있는 것으로 수정했습니다. 우측 상단의 티스토리 센터메뉴는 화면설정-화면출력에서 글자색을 변경하세요. 방법은 위의 링크 글을 참고하세요.
이번 글에서는 아이콘을 삽입하고 스킨만들기 과정을 마무리하겠는데요. 중점적인 내용은 스프라이트(Sprite)입니다. 이것은 하나의 이미지에 여러가지 아이콘 이미지를 포함시켜서 아이콘이 필요한 곳에 배경이미지로 삽입하면서 포지션만 조정하는 것입니다. 즉 파일이름은 다 동일하지만 포지션만 바꾸므로서 필요한 아이콘만 나타내도록 하는 것입니다. 이러한 이미지를 스프라이트라고 합니다. 이미지가 한번에 로딩되어 다시 로딩되는 시간이 절약되므로 웹페이지의 속도도 빨라집니다. 특히 슬라이딩 도어테크닉을 이용한 메뉴바 는 이미지가 이미 로딩되어있기때문에 빠른 이미지 전환이 가능합니다.
images8.zip압축파일을 풀고 iconset-0.png 파일을 포토샵에 열면 위와같니 나옵니다. 포토샵이 없어도 대략적인 위치만 파악하면됩니다. 메뉴에서 윈도우-info를 선택하면 우측과 같은 패널이 나옵니다. 마우스를 이미지의 일정한 위치에 올리면 좌표가 나옵니다. 포토샵으로 이미지를 만들때는 규칙적인 위치를 정하는 것이 사용하기 편리합니다. 예를들어 20픽셀의 간격으로 배치한다든가 하는 것이죠. 위에서는 어떤 규칙이 없지만 사용하는데는 문제는 없습니다. 2에서 X Y좌표가 나오고 사각형선택툴로 클릭드래그하면 대략적인 사이즈가 나옵니다. 이 자료를 토대로 배경이미지 포지션을 설정합니다. 위 이미지와 다른 아이콘 이미지를 블로그에 업로드합니다. 위 스프라이트에서 사용할 아이콘은 1, 4, 5, 6의 아이콘이고 다른 두개의 아이콘은 하나의 이미지로 되어있습니다.
우선 댓글 부분 상단에 있는 글작성자 앞과 태그 앞에 아이콘을 삽입합니다. 아이콘의 삽입은 기존에 있는 태그의 배경으로 삽입할 수도 있지만 스프라이트를 사용하면 여러개의 아이콘들이 있기 때문에 쉽게 배치할려면 <span>태그를 별도로 삽입하여 사용하는 것이 편리합니다. 특히 글자가 있는 부분의 배경으로 삽입하게 되면 이미 글자의 사이즈가 정해져 있기 때문에 서로 크기가 맞지 않습니다. html 편집창에서 author로 검색하여 3앞에 <span class="iconset"></span>를 삽입합니다. 선택자는 클래스로 하고 이름을 정합니다. tagTrail 로 검색하여 4처럼 같은 태그를 삽입합니다.
CSS에서 .iconset 앞에 부모요소의 클래스 선택자를 삽입합니다. 아이콘 크기의 가로세로 크기를 입력하고 배경이미지를 입력한 다음 XY 좌표를 입력합니다. 좌표값은 이미지의 좌측 상단을 기준으로 마이너스값을 갖습니다. span태그에는 내용이 아무것도 없으므로 이대로 두면 배경이미지가 나타나지 않습니다. 패딩값을 설정해야하고 수치는 폭을 입력합니다. 패딩은 left나 right로 해도 됩니다. 태그의 배경이미지는 다음에 오는 글자와 간격을 두기위해 10처럼 우측 마진을 설정합니다. 그리고 tagTrail에 이미 있는 배경이미지는 제거( background: url(images/icon_tag.gif) left 3px no-repeat; )합니다. 12의 패딩 속성 부분도 삭제합니다.
댓글부분에 아이콘을 삽입합니다. class="comment"로 검색하여 1처럼 같은 태그를 입력합니다. 현재 "댓글을 달아주세요"라는 글자는 보이지 않도록 설정해놓았는데 .comment h3로 검색하여 2부분을 inline으로 바꿉니다. 이것은 h3가 블럭요소라서 자신 외에는 좌우에 아무것도 올 수가 없어서 span 태그를 앞에 둘 수가 없게 되는데 inline으로 설정하면 블럭요소에서 인라인요소로 전환되고 span 태그와 나란히 있을 수가 있게 됩니다. 3처럼 iconset앞에 부모요소 클래스 선택자를 입력하고 아이콘의 가로세로 수치를 입력합니다. 배경이미지를 삽입하고 좌표를 입력합니다. 5처럼 패딩값을 width 보다 크게하면 다음에 오는 글자와 간격이 만들어지게 됩니다.
사이드바의 아이콘은 카테고리부분은 치환자로 관리되기 때문에 티스토리 센터에서 직접오는 이미지입니다. 이것은 배경이미지로 사용되는 것도 아니고 img 태그로 이미지가 직접입력되는 것이라서 수정이 안됩니다. 동그란 점으로된 아이콘은 스킨에서 사용되는 것이기 때문에 수정이 가능합니다. 사이드바의 아이콘은 모두 bullet_dot.gif파일로 리스트 앞에 위치합니다. 이것을 이미 업로드한 png 파일로 수정만 해주면 모든 아이콘은 변경됩니다. 사이즈가 다르므로 세로 위치를 조정하기 위해 2의 수치를 70%로 수정합니다. 또한 3처럼 좌측 패딩을 20픽셀로 설정해야 글자와 간격이 만들어집니다. 사이드바 아이콘 중에서 링크부분과 글보관함의 아이콘은 다른 것을 사용하므로 별도로 설정해줍니다.
링크 아이콘은 스프라이트에 있는 것을 사용하므로 이 이미지 파일이름을 입력하고 좌표를 설정합니다. 패딩값을 25픽셀 설정해서 글자와 간격이 떨어지게 합니다. 글보관함은 별도의 아이콘이 있으므로 이 아이콘 파일 이름을 입력하고 7처럼 세로 50%로 해주면 중간에 배치됩니다.
이로써 부족하나마 워드프레스 테마인 Suffusion을 티스토리 스킨으로 만드는 과정을 마칩니다. 워드프레스 테마은 아래 이미지처럼 제목부분의 날짜가 나오는 부분이 핵심인데 티스토리에는 날짜를 분리하는 치환자가 없습니다. 제가 찾아보았는데 찾지를 못한건지도 모르죠. 나중에 알게되면 추가로 변경하도록 합니다.
위처럼 날짜에서 day, month, year가 분리되자면 치환자가 별도로 필요한데 티스토리의 치환자는 분리돼서 나오는게 없더군요. 그래서 제목부분을 리본으로 대치했습니다.
최종 수정화면입니다. 메뉴바의 배경이미지는 제이쿼리 플러그인 다운로드 사이트에서 다른 색상의 파일을 다운받아 이미지만 추가 업로드하면 색상이 바로 수정됩니다. 메뉴부분의 글자 색상이 어두운데 취향에 따라 밝게 수정하면됩니다.
최종 스킨파일입니다.
사용법은 이곳 으로 가시면 이전에 스킨 파일 올리면서 설명을 올린 부분이 있으니 참고하세요. 처음 설치하면 검색창은 사이드바에 추가로 나옵니다. 검색모듈을 사이드바에 사용하실 분을 위해 그대로 둔 것이고 헤더부분에서만 사용할 경우 관리자 센터의 사이드바 설정에서 검색모듈을 제거하면 됩니다. 메뉴와 검색모듈의 사용위치에 따라서 여러가지 버전으로 올릴 예정이나 우선 사이드바의 검색모듈을 제거하고 메뉴부분을 수정해서 올렸습니다. 상단의 제이쿼리 메뉴는 컬럼이 두개 있는 경우 가끔 에러가 나서 배경이미지가 나오지 않는 증상이 있어서 컬럼을 하나만 있는 것으로 수정했습니다. 우측 상단의 티스토리 센터메뉴는 화면설정-화면출력에서 글자색을 변경하세요. 방법은 위의 링크 글을 참고하세요.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
