블로그를 운영하다 보면 이것 저것 참 신경 쓰이는 것이 많습니다.

예쁜 그림도 넣고 싶고, 글자도 예쁘고 눈에 띄게 하고 싶고, 이왕이면 내용도 알차게 하고 싶고 말이죠.^^

저도 처음에 블로그를 시작하면서, 단순히 내가 쓰고 싶은 내용을 나만의 공간에 그냥 표현하고 싶다는 생각으로 쉽게 접근했더랍니다.

근데 점점 시각적인 것들이 신경 쓰이더라구요.

사진도 찍어야하고, 포토샵도 해야하고, 웹 관련 공부도 계속 하게 되더라구요.ㅠㅠ (이게 웬 고생 ㅋㅋ)

그래서 오늘은 블로그의 핵심이 되는 [글자]에 관련된 내용을 써보려고 합니다.

공부를 하다보니 이 [글자-font]에 관련된 내용으로만도 수십 페이지를 써야할 만큼 내용이 방대하더라구요.

모든 내용을 다 알지도 못하고, 또 속속들이 다 쓸 자신도, 시간도 없습니다.ㅋㅋ

다만 가장 많이 사용하고 궁금해하는 내용들로 포스팅을 하려고 합니다.

먼저, 폰트(font)의 속성에는 어떤 것들이 있으며, 그 속성들을 지정하려면 어떻게 해야하는지 살펴보겠습니다.

폰트는 font-style, font-variant, font-weight, font-size, line-height, font-family라는 속성을 가지는데요.

차례차례 그 내용에 대해 알아보면...

font-style

글자의 기울기를 결정하는 속성입니다.

이외에도 oblique / initial / inherit라는 속성이 있는데,
oblique는 이탤릭과 마찬가지로 글자를 기울여주며 시각적인 차이는 없습니다.

initial은 필기체, inherit은 부모요소에서 상속 받는 글꼴입니다.

이 세가지는 그렇다~ 하는 정도로만 알고 넘어 가셔도 무방합니다.

font-variant

영문 소문자를 작은 대문자로 나타내는 속성입니다.

예문에서 보듯이 small-caps는 영문 소문자를 크기가 작은 대문자로 변환해주는 속성입니다.

이 역시 뜻만 알고 넘어 가셔도 됩니다.

font-weight

글꼴의 두께를 결정하는 속성입니다.

특별히 지정을 하지 않는다면 기본값(default)은 다른 속성들과 마찬가지로 nomal이구요.

이 외에 bolder, lighter 등의 속성이 있으나, 저와 같은 초보 블로거들은 굳이 몰라도 될듯 합니다.^^

font-size

글자의 크기를 결정하는 속성입니다.

글자 크기를 지정하는 속성으로는 위의 예처럼 포인트(pt), 픽셀(px), em 등이 있습니다.

아주 전문적인 작업을 하신다거나, 민감한 분이 아니면 무엇을 사용하시던 크게 문제가 되지 않지만, 각 속성마다 차이는 분명히 있습니다.

최근에는 많은 사이트들이 em을 이용해서 텍스트 크기를 지정하는데요. 그 이유는 pt나 px가 절대 단위인 반면, em, %는 상속 받은 크기에 비례해서 변하는 상대 단위라서 화면 크기에 따라 유동적인 디자인이 가능하기 때문에 최근 표준으로 자리를 잡아가고 있다고 합니다.

사실 font-size에 대해서는 따로 포스팅을 해야할 만큼 복잡하고 내용도 방대하지만, 저와 이글을 읽고 계신 분들(?)은 블로그 정도나 남보다 예쁘게 꾸며보고 싶은 정도의 목적을 가지고 있기 때문에 과감히 패~쑤하도록 하겠습니다.ㅋㅋ

이에 대해서는 자세하고 전문적으로 다루고 있는 사이트들이 많으니 참고하실 분은 [font-size]로 검색 신공을 발휘해보시기 바랍니다.^^

line-height

텍스트의 행 높이(간격)을 결정하는 속성입니다.

글자의 모양과 관련해서 직접 영향을 주는 속성은 아니지만 행의 높이(간격)도 가독성이나 기타 시각적인 영향을 많이 주기 때문에 중요한 속성입니다.

line-height는 사실 단순하지가 않습니다.

오히려 매우 복잡하죠.ㅠㅠ

부모 요소로부터 그 값을 상속 받기 때문에, 어떤 요소에 10px/150%라고 값을 정하더라도 무시되는 경우가 허다하죠.

font-size와 line-height는 마음 단단히 먹고 공부하지 않으면 막상 내 블로그에 적용하기가 쉽지 않은 속성이랍니다.

아무튼 line-height가 행 간격을 결정하게 되며, 가독성에 지대한 영향을 준다는 정도는 꼭 알고 있어야 할 것으로 생각됩니다. 행 간격이 너무 좁으면 보기에 답답하고, 다음 줄을 찾기도 어려우니 말이죠.^^

font-family

글꼴의 형태를 결정하는 중요한 속성인데요.

그 이름에서 알 수 있듯 폰트의 가족을 결정 지어주는 속성입니다.

font-family를 결정하는 속성 값은 family-name과 generic-family로 이루어지는데요.

family-name은 우리가 흔히 알고 있는 굴림, 나눔고딕, verdana, dotum 등 폰트 이름을 말하고,
generic-family는 글꼴의 종류를 말해줍니다.

generic-family는 serif, sans-serif 가 대표적으로 많이 쓰이는데요. 이외에도 monospace, cursive, fantasy 등 총5개의 대표 글꼴이 있습니다.

generic-family는 각각 특성에 따른 폰트들을 포함하고 있구요. 여러개를 묶어서 사용하기도 합니다.

예를 들어, 나눔고딕과 돋움, verdana, Century Gothic 등의 서체를 한번에 지정할 수 있고, 마지막엔 글꼴의 특성인 sans-serif를 선언함으로써 font-family를 지정하게됩니다. 이때 Century Gothic처럼 폰트명이 두 단어 이상으로 된 것은 작은 따옴표(')나 큰 따옴표(")로 묶어 줘야합니다. (ex , font-family : 나눔고딕, "century gothic", verdana, 굴림, sans-serif ; )

근데 serif는 뭐고, sans-serif는 뭐야? 하는 분이 계실 것 같네요.^^

serif는 글자의 끝 부분 모양에 장식이 있는 서체들이구요. 대표적인 폰트로는 한글 바탕체, 궁서체, 영문 Georgia, Time New Roman 등이 있습니다.

sans-serif는 반대로 글자의 끝 부분에 장식이 없는 서체들입니다. sans는 불어로 "없다"라는 뜻이랍니다. 대표적으로는 한글 굴림, 돋움, 영문 Arial, Verdana 등이 있습니다.

이외에 monospace는 글자폭이 일정한 서체를, cursive는 필기체, fantasy는 장식이 화려한 글꼴을 말합니다.

font shorthand : 한줄로 축약하는 법

CSS를 통해 폰트를 지정하다보면 위에서 나열한 속성들을 하나 하나 지정하기가 귀찮아질 때가 있습니다.

그래서 한줄로 축약(shorthand)을 많이 하는데요.

이때는 font : [font-style] [font-variant] [font-weight] [font-size/ling-height] [font-family] ; 의 순서를 지켜서 정의해야 합니다.

이 중에서 앞의 세가지 속성, style, variant, weight는 생략 가능하지만 font-size와 font-family는 반드시 들어가야 합니다.

사실 블로그에 서체를 적용하는데 어려워 하시는 분들을 위해 간단히 포스팅 한다고 시작한 글인데...

쓰다보니 내용이 만만치가 않네요.

조금이라도 도움이 되는 분들이 계셨으면 합니다.^^

추천 버튼 누르는데는 1초도 안걸리는거 아시죠??? ㅋㅋ

유익한 포스팅을 하는데 아주 큰 힘이 된답니다. ^^

div 혹은 p 태그 속에서 폰트 지정하기

이럴때 폰트를 바꾸는 일은 흔히 알고 있는 것처럼 <font></font>를 이용하면 됩니다.

그렇다면 <div>이나 <p>와 함께 쓰려면 어떻게 할까요?

예를 들어 글 전체의 폰트와 다르게 요소(여기서는 div) 내에서 궁서체를 따로 적용하고 싶다면...

<태그 작성 예문>

음... 예를 들어야 하는데 무슨 문장을 써야할지 모르겠네요. ㅋㅋ

<div style="margin: 0 auto; border: 1px solid #999; padding: 5px 10px 5px 10px; font-family:궁서체; font-size:20px; color:red; font-weight:bold; font-style:italic; ">적용된 예문입니다.^^</div>

이렇게 작성하면 됩니다.

<적용된 상태>

음... 예를 들어야 하는데 무슨 문장을 써야할지 모르겠네요. ㅋㅋ

이렇게 작성하면 됩니다.

자~~ 그런데 여기서 혹시 의문이 생기지는 않으셨나요? 위의 예문에서 font-family / font-size / font-weight 등의 속성을 따로 정했는데요.  이것을 한꺼번에 정해주는 방법은 없을까요?

<폰트 속성 한번에 적용하기>

font 속성을 한번에 지정하려면 아래와 같이 속성의 순서를 지켜야 합니다.

그럼 위의 예문을 이용해서 font를 한번에 적용해보겠습니다.

<div style="margin: 0 auto; border: 1px solid #999; padding: 5px 10px 5px 10px; font: italic bold 20px 궁서체; color:red; ">적용된 예문입니다.^^</div>

이렇게 순서를 지켜 작성하면 되구요.

그럼 이렇게 적용됩니다.^^

이해가 좀 되셨나요?

font 속성별 내용에 대해서는 다음에 다시 자세히 살펴보도록 하겠습니다.^^

크롬 Pig Toolbox 마우스제스쳐 증상해결

너무 오랜만에 글을 쓰네요. ㅠㅠ

사는게 바쁘다보니......

새해가 밝은지도 한참 지났고, 설도 지났지만...

새해 복 많이들 받으시구요. 올 한해 하고 싶은 일, 이루고 싶은 소망들 다 이루어지시기 바랍니다.^^

너무 오랜만에 포스팅을 하다보니 서론이 길어지네요.ㅎㅎ

각설하고 본론으로 들어가 볼까요...

아직은 익스플로러를 사용하시는 분이 대다수이지만, IE의 여러 불편함 때문에 크롬, 파이어폭스, 오페라 등 기타 브라우저를 사용하시는 분들도 많을거라 생각합니다.

그중에서 크롬 브라우저를 사용하시는 분은 Pig Toolbox라는 확장 프로그램을 많이들 사용하시는데요.

가장 대표적인 이유가 마우스제스쳐 기능때문이 아닐까 생각합니다. 그 편리함에 한번 빠지면, 이 기능없이는 넷서핑을 하는데 많은 불편을 느끼게 되죠.

저 역시 사용하고 있고, 필수라고 생각하는 확장 프로그램입니다.

그런데 언제부턴가 (정확히는 모르겠지만 작년 하반기 언제쯤인거 같은데...) 잘되던 마우스제스쳐가 안되는 겁니다. ㅠㅠ

'Pig Toolbox가 잘못되었나?' '다시 깔아야하나?'

그래서 다시 깔아도 봤는데 안되더군요.ㅠㅠ

그러던 중 Pig Toolbox의 요런 공지사항을 발견하게 되었습니다.

NPAPI플러그인이 어쩌구~ 머 이런 어려운 내용은 패스하구요.ㅋ

결론은 수퍼제스쳐만 안쓰면 일반적인 마우스제스쳐는 사용이 가능하다는 얘기입니다.^^

자~ 그럼 이제 마우스제스쳐를 다시(?) 사용하는 방법을 알아보겠습니다.

아~! 여기까지 보시고 어찌하는지 아시겠다는 분은 아래 내용은 안보시고 패쓰...하시면 됩니다.

그래도 쪼~아래 손가락은 한번 눌러주시고 가는 매너는 있으시겠죠? ㅋㅋ

크롬에 Pig Toolbox를 깔았다면 브라우저 우측 상단에 프로그램 아이콘이 있을겁니다.

클릭~!!!

클릭하시면 아래 그림처럼 팝업창이 열립니다.

그럼 빨간네모에 보시는 수퍼제스쳐라는 옵션이 있는데요.

그걸 클릭하면 상세 옵션을 설정할 수 있는 새탭이 열립니다.

새탭이 열리면 다 하신겁니다.ㅋ

아래 그림에서 보시는 것처럼 수퍼제스쳐 앞에 있는 박스의 v 를 체크 해제 하시면 됩니다.

이제 다 오셨습니다.^^

성급하게 가시면 아니~ 아니~ 아니되오~ㅋㅋ

이제 마지막...

마무리를 하셔야 완성입니다.

옵션 탭을 제일 아래로 내리시면,

이 설정을 저장하는 버튼이 있습니다.

이 버튼을 눌러줘야~ 설정의 완성~~(자체 음성지원 좀 부탁해요~ㅋ)

잘 되셨죠???

이래도 안되시면~ 저도 몰라요. ㅠㅠ

잠시만요~ 손가락 버튼 한번 누르고 가실께요~~~

이번에 소개해 드릴 스킨은 OneRoom 이라는 스킨입니다.

제가 맘에 들어서 소개를 해야겠다고 생각하는 스킨은 대부분 워드프레스 스킨의 컨버팅 버전이더군요.

오늘 소개하는 OneRoom 도 워드프레스용 테마를 iBizstory님이 티스토리용으로 바꾸신 버전이구요.

Web-Kreation 이 원작의 저작권을 갖고 있습니다.

티스토리용 OneRoom 스킨은 버전이 여러 갠데요.

iBizstory 님이 사용자들의 요구에 따라 본문의 폭을 여러가지로 만드셨더군요.

필요에 따라 다운로드 하셔서 사용하시면 되겠습니다.

제가 소개를 위해 적용한 버전은 기본 버전이니 참고하시구요.

자~ 그럼 만나러 가 보실까요?

일단 생김새부터 보면,

보시다시피 굉장히 깔끔하면서도 독특한 디자인이 맘에 듭니다.

위 그림에는 없습니다만 특히 댓글과 트랙백이 특이하게 적용되더군요.

나머지 사항들은 보시는 바와 같으니 특별히 설명을 안드려도...

스킨이 맘에 드시는 분은 아래 파일 중 필요한 버전을 다운 받으셔서 사용하시면 됩니다.

또는 전부 적용해 보시고 맘에 드시는 걸로 정하셔도 상관 없구요.

기타 550px 버전이나 1024px 버전도 있는데 혹시 필요하신 분은 직접 iBizstory 님의 블로그를 방문하셔서 다운 받으시기 바랍니다.

맘에 드는 버전을 다운 받으셨으면 설치를 하시구요.

혹시 스킨 적용하는 법을 모르시는 분은, 제 예전 글 [ 티스토리 스킨 적용하기] 를 참고 하시면 되겠습니다.

스킨을 적용하셨으면 이것 저것 본인에게 맞게 수정을 해야겠죠?

가장 먼저 블로그 주인의 이미지를 적용해 보겠습니다.

처음 스킨을 적용하면 아래 그림처럼 깜짝 놀랄 비쥬얼의 이미지가 떡하니 나옵니다. ㅋ

맘에 드시면 그냥 사용하시구요. ^^

우선 본인의 블로그 프로필 사진으로 대체하는 방법을 보면,

아래 그림처럼 skin.html을 간단하게 수정해서 본인이 블로그 기본 정보에 입력해 놓은 블로그 이미지가 나오도록 해 보겠습니다.

이렇게 수정하면 아래 그림처럼 자신이 블로그 기본 프로필에 입력해 두었던 이미지가 출력됩니다.

잘 수정이 됐네요.

그런데 문제가 한가지 있습니다.

뭔지 아시겠죠?

원래 스킨에 적용됐던 이미지에 배해 너무 커서 조금 부담 스럽기도 하고 이미지 옆으로 출력되던 메세지가 아래로 내려 왔습니다.

이렇게 그냥 사용하셔도 되구요.

디자이너의 원래 의도대로 좀 작은 이미지에 그 우측에 메세지가 출력되도록 해 보겠습니다.

아래 그림처럼 skin.html 항목의 각주를 원래대로 두고, 대신 본인이 사용할 이미지의 파일이름으로 변경을 해주거나,

혹은 본인이 사용할 파일의 이름을 아예 about.jpg로 만들어서 업로드 해도 결과는 같습니다.

이때 이미지 파일 크기는 폭과 높이가 80px 정도면 적당하니 참고하셔서 만드시구요.

자, 그럼 결과를 봐야죠?

내용을 이해하고 잘 따라 하셨다면, 아래 그림처럼 의도대로 적용된 스킨을 확인 할 수 있습니다.

다음으로 상단 메뉴 중 typography 를 수정해 보겠습니다.

아래 그림처럼 typography 메뉴는 기본값으로 <www.ibizstory.com 845> 이 설정되어 있습니다.

그냥 두고 사용하셔도 문제는 없구요.

필요없는 분은 수정하셔도 상관 없습니다.

다음은 카테고리의 형태인데요.

스킨을 적용하면 카테고리의 기본 형태는 트리 구조가 숨겨져 있는 형태입니다.

즉, 대표 주제만 출력되고 서브 주제가 있는 경우 앞에 (+) 표시로 추가적인 주제가 더 있다는 걸 표시하는 형태죠.

그냥 사용하셔도 크게 불편한 점은 없습니다만,

저 처럼 카테고리 내에 주제가 몇개 없어서 방문자로 하여금 한 눈에 보게 하고 싶으신 분은 풀어 놓는 것이 좋을 듯해서 방법을 소개해 드릴까 합니다.

아래 그림을 보면서 설명을 드리겠습니다.

skin.html 편집 창에서 보시면,

빨간색 박스가 기본형태로 적용되어 있는 거구요.

카테고리를 펼쳐 놓는 형태는 파란색 박스의 각주로 묶여서 비활성화 되어 있는 상태입니다.

빨간 박스를 통째로 삭제해 버리셔도 되고, 나중에 다시 변경할 분은 파란색 각주를 빨간 박스 앞과 뒤에 각각 옮기셔도 됩니다.

빨간 박스를 통째로 버리셨다고 바로 적용되는 게 아니라 파란 박스도 삭제 해야 된다는 걸 알아 두시구요.

나중을 위해 두 형태 모두 남겨 두실 분도 꼭, 파란 색으로 표시된 각주는 위나 아래 한군데에만 있어야 한다는 점 기억하세요.

잘 이해하셨다면, 아래 그림처럼 카테고리가 펼쳐진 형태로 적용된 걸 확인하실 수 있을 겁니다.

잘 되셨나요?

사실 아주 기초적인 건데, 혹시나 너무 기본적인 설명으로는 도무지 뭐가 뭔지 이해를 못하시는 초보 분들을 위해 장황하게 설명하는 점 이해해 주시길 바랍니다.

제가 처음에 너무 헤맸던 경험이 있거든요.

자세한 설명을 해주는 곳이 없어서 애를 먹었더랍니다. ㅋㅋ

그 때의 아픈 기억을 생각하며 조금이라도 도움이 될까해서 쓰는 글이니 고수님들은 스킨 프리뷰만 보시고 패스 하시면 될 듯 합니다. ^^

갑자기 얘기가 삼천포로 빠졌네요.

암튼 다시 이어가 보죠.

이번에 말씀 드릴 내용은 이미지 적용에 관한 건데요.

아래 그림처럼 이미지가 본문 폭보다 크게 되면 자동으로 폭에 맞춰지지 않고, 잘려 나갑니다.

물론 그림을 클릭하게 되면 아래처럼 원본 사이즈대로 감상할 수 있습니다.

제가 사용한 버전은 이미지를 본문 폭에 자동으로 맞춰 준다는 버전인데 왜 그런지 확인을 해봐야 할 것 같습니다.

아직까지는 확인을 못했구요.

혹시 확인이 되면 추가 내용을 포스팅 하겠습니다.^^

지금까지 iBizstory 님이 공개해 주신 OneRoom 스킨에 대해 살펴 봤습니다.

개인적으론 참 마음에 드는 스킨인데 어떠실지 모르겠네요.

암튼 필요하신 분들은 잘 사용하시길 바랍니다.

좋은 스킨을 공개해 주신 iBizstory 님에게 감사 드립니다. ^^

이번에 소개해 드릴 스킨은 Ply2-Line 이라는 스킨입니다.

Ply2-Line 스킨은 원래 리체님이 만드신 2단 스킨인데요.

오리지날 버전인 2단 스킨을 Juostory 님이 3단으로 수정한 버전을 소개해 드릴까 합니다.

그 동안 스킨 소개 글을 쓰면서 <"이건 이렇게 바꾸시면 됩니다."> 라는 안내를 많이 드렸는데,

이 번에 소개 하는 Ply2-Line은 정말 심플해서 뭐 자기 블로그에 맞게 수정하고 할 필요도 없는 스킨입니다.

전체적으로 하얀 배경 때문에 글에 집중할 수 있다는 장점도 있습니다.

또 스킨에 따라서 티스토리에서 바로 적용이 안되는 아이콘이나 뭐 기타 등등 그런 것이 전혀 없이 바로 잘 적용이 되더군요.

그냥 받아서 바로 사용하시면 될 겁니다. ^^

자~ 일단 만나 보실까요?

일단 생김새부터 봐야겠죠?

괜찮은가요?

3단 스킨이기 때문에 스킨의 폭이 약간 넓은 감이 있지만,

요즘은 웬만하면 화면 폭이 1280px 이상을 사용하기 때문에 부담 없이 사용하셔도 될 것 같습니다.

오히려 사용하는데 시원한 느낌을 주는 장점이 더 커 보입니다.

다만 제 눈에 조금 불편해 보이는 것이 하나 있는데요.

포스트의 제목이 좀 작아서 처음엔 익숙치가 않았습니다.

이 점만 빼면 깔끔하게 사용할 수 있겠네요.

Ply2-Line-3단 스킨이 맘에 드시는 분은 아래 파일을 다운 받으셔서 사용하시면 됩니다.

티스토리에 스킨을 등록하는 방법은 제 예전 글 [ 티스토리 스킨 적용하기] 를 참고 하시면 됩니다.

다른 스킨들에 비해 굉장히 가볍기 때문에 페이지 이동이나 블로그로 접속 했을 때도 부담 없다는 걸 확인할 수 있을 겁니다.

필요하신 분들은 잘 사용하시길 바랍니다.

이상으로 Ply2-Line-3단 스킨 소개를 마칩니다.

그리고 좋은 스킨을 제공해 주신 리체님과 주오님에게 감사 드립니다. ^^

오늘 글은 여기까집니다.

읽어 주셔서 감사합니다.

오늘 소개해 드릴 스킨은 PIANO BLACK이라는 스킨입니다.

PIANO BLACK은 지난 시간에 소개해 드린 neutral 스킨을 제작한 Mono-lab의 또 다른 작품입니다.

이 스킨도 마찬가지로 원래는 워드프레스 용으로 제작되었는데, Juostory님이 티스토리용으로 배포하신 스킨입니다.

제가 스킨을 소개하면서 유독 Juostory님의 스킨을 많이 소개해 드리게 되네요.

그만큼 제가 좋아하는 스타일이 많다는 거겠죠?

나름 코드가 맞다고나 할까요. ㅋ

자~ 일단 만나 보실까요?

일단 생김새부터 봐야겠죠?

어떠신가요?

지난 시간에 소개해 드린 neutral 스킨이 순백의 깔끔함을 추구한 것과는 반대로 PIANO BLACK 스킨은 블랙이 주는 시크하면서도 깔끔한 컨셉이 참 좋습니다.

사실 저는 neutral과 piano black 사이에서 살짝 고민을 하고 있답니다. ㅎㅎ

포토샵으로 여러분께 보여드릴 이미지를 작업하면서도 참 깨끗하고 군더더기가 없다고 느끼면서 즐겁게 작업 했답니다.

piano black 스킨이 맘에 드시는 분은 일단 다운 먼저 받아 주시구요.

티스토리에 스킨을 등록하는 방법은 제 예전 글 [ 티스토리 스킨 적용하기] 을 참고 하시면 됩니다.

세부적인 걸 살펴 보면,

그 동안 다른 스킨들을 사용하면서 상단에 표시되던, DAUM, Tistory, 관리, 로그아웃 등 기본 메뉴가 표시되지 않고, 대신 piano black 스킨이 제공하는 기본 메뉴가 큼지막하게 자리합니다.

neutral 스킨과 마찬가지로 메뉴는 마우스를 올리면 서브 메뉴들이 아래로 펼쳐지는 방식을 취하고 있습니다.

본문의 삽입하는 그림은 폭 549px까지 입력이 되지만 이보다 큰 그림이 삽입되면 클릭시 원래 사이즈로 출력됩니다.

사이드바에는 카테고리와 최근 글, 달력, 블로그롤 등이 위치하고 있는데, 이중 블로그롤은 현재 적용이 되지 않더군요.

html 파일을 확인해 봐야 할 듯 합니다.

수정 방법을 확인하게 되면 추가 글을 통해 알려 드리도록 하겠습니다.

달력의 경우 포스팅 된 날에는 동그라미 표시로 알려 줍니다.

화면 우측 하단에 항상 고정되어 있는 Top 복귀 버튼(Return Top)이 있고, 스킨 가장 하단에도 복귀 버튼이 있습니다.

요즘은 마우스 제스쳐를 많이 사용하기 때문에 사실 많이 사용하지 않지만 제스쳐 기능을 사용하지 않는 분들은 유용할 듯 하네요.

메뉴 버튼의 서브에 위치하는 미디어 메뉴는 아래 그림처럼 포스팅되어 있는 글 목록들이 그림과 함께 출력되면서 약간의 미리보기를 제공 함으로써 카테고리 별로 자신이 보고 싶은 글을 찾기 쉽게 해줍니다.

지금까지는 스킨의 대략적인 특징에 대해 살펴 보았구요.

이제부터 사용자에 맞게 스킨을 수정하는 법에 대해 알아 보겠습니다.

먼저 상단에 있는 PIANO BLACK 스킨 로고를 자신에게 맞게 수정해 보겠습니다.

원래의 형태처럼 문자 형태로 로고를 만드시려면 검정(#000000) 바탕에 문자로 만드시면 되는데요.

파일의 크기는 211*15로 문자가 높이로 가득차게 만드시면 됩니다.

파일의 이름은 logo.gif로 저장하신 후,

스킨 관리 페이지에서 업로드 해줍니다.

그러면 원래의 logo.gif 파일이 새로 업로드한 파일로 바뀝니다.

이렇게요. ↓ ↓

다음은 우측에 있는 INFORMATION 창을 수정해 보죠.

스킨 관리 페이지의 skin.html 창에서 아래 부분을 찾으신 후 자신이 출력하고 싶은 문구를 입력하면 됩니다.

참~ 쉽죠~잉~~~ ㅋㅋ

이번엔 댓글에 사용자의 아이콘이 표시되게 해보겠습니다.

먼저 아이콘이 있어야겠죠?

아이콘으로 사용할 파일은 41*41인데, 좀 더 크게 80*80 정도로 만들어 두시면 나중에 다른 스킨에서 사용할 때 쓰시기 좋겠습니다.

스킨마다 지원하는 아이콘의 크기가 다르니까 말이죠.

준비되셨으면, 아까 logo 파일을 올리는 방법과 마찬가지로 아이콘 파일도 업로드 해줍니다.

업로드가 완료되면 아래 그림처럼 skin.html을 수정해 주면 됩니다.

아참, 이 때 본인이 사용할 파일의 이름을 bg-none.png로 준비하시면 안됩니다.

그러면 손님의 댓글에도 같은 아이콘이 출력되어 버립니다. ㅋ

그러면 안되겠죠?

손님 아이콘은 bg-none로 그냥 두시고, 본인의 파일은 별도의 이름으로 준비하셔서 업로드 하셔야 합니다.

그리고 아래 그림의 skin.html 부분을 자신이 사용할 아이콘 파일의 이름으로 수정하시면 완료입니다.

여기까지 잘 진행하셨다면, 요렇게 아이콘이 성공적으로 등록된 걸 확인 하실 수 있을 겁니다.

스킨 소개와 수정 방법에 대해서 말씀 드렸는데요.

제가 며칠 사용해 본 바로는 다른 스킨에 비해 약간은 무거운 경향이 있더군요.

물론 제 컴이 좀 오래되기는 했지만...ㅋ

암튼 로그인 버튼이 따로 출력이 되지 않기 때문에 메뉴의 admin 패널로 들어가야 되는데, 이 메뉴의 서브 항목들이 로딩되는데 시간이 꽤나 걸리더군요.

물론 손님으로 오신 분들도 하위 항목인 [미디어]나 [태그]를 보시려면 조금 답답할 수도 있겠네요.

이 점 외에 저는 대부분 만족하고 잘 쓰고 있습니다.

필요하신 분들은 잘 사용하시길 바라면서...

오늘 글은 여기까집니다.

읽어 주셔서 감사합니다.

최근 연이어 티스토리 스킨 소개 글만 쓰고 있네요. ㅋ

제가 당분간 쓸 시킨도 고를 겸, 또 고르다가 추천해 드릴 만한 스킨이 있으면 소개도 할 겸 포스트를 작성하고 있답니다.

참고로 저는 화려하고 복잡한 스킨보다는 심플한 걸 좋아라 한답니다.

심플하고 깔끔한 스킨을 찾으시는 분들에게는 좋은 소개가 될 거라 생각합니다.

오늘도 지난 포스트에 이어 Juostory님이 공개하신 다른 스킨을 소개 할까 합니다.

neutral 이라는 스킨인데요.

원래는 워드프레스용으로 일본의 mono-lab에서 만든 스킨입니다.

워낙 투명하고 깔끔한 스타일이라 자칫 밋밋해 보일 수도 있지만 제 눈에는 너무 예쁘더라구요.

일단 스킨 모습부터 보실까요?

<image-1> 클릭하시면 큰 사이즈로 볼 수 있습니다.

어때요? 너무 예쁘지 않나요?

저는 보자마자 홀딱 반했는데. ㅋㅋ

원래는 사이드바가 글 옆에 있는 2단 스킨인데, Juo님이 글을 넓게 쓰고 싶어 하는 분들을 위해 본문을 넓히고 사이드바는 원할 때만 볼 수 있게 따로 배치한 스타일 입니다.

음.... 무슨 말이냐면요.

그림을 보면서 설명 드려야겠네요.

아래 그림처럼 사이드바를 클릭하면 글 목록이 나오면서 사이드 바가 출력된답니다.

<image-2> 클릭하시면 큰 사이즈로 볼 수 있습니다.

위에서 설명한 대로 글의 내용을 볼 때는 사이드바가 없는 상태로 글이 넓게 나오구요.

사이드바 메뉴를 클릭하면 다른 2단 스킨처럼 글 목록과 Recent Post 등 다른 항목 들이 출력되는 방식입니다.

저는 이방식에 금방 적응됐는데 어떨지 모르겠네요.

스킨이 맘에 드시면 일단 다운 받으셔야겠죠?

혹시 티스토리에서 스킨 등록을 해 본 적 없으시거나, 잘 모르시는 분은 지난 글을 참고해주세요.

자, 이제 본격적으로 요놈에 대해서 파헤쳐 볼까요?

상단 page-navi 항목 중 메뉴<menu> 부분은 마우스를 올리면 서브메뉴가 펼쳐지는 방식으로 되어 있습니다.

스킨 우측 상단에 보시면 twitter 버튼이 있는데요.

스킨을 설치 하시면 기본적으로 세팅이 안되어 있으니 나에게 맞게 설정 해야겠죠?

위 그림에서 회색 박스는 이 스킨의 skin.html 내용의 일부를 크롭한 건데요.

티스토리 관리 화면, html/css 수정화면으로 가셔서 그림처럼 twitter 항목을 찾으세요.

twitter.com/xxx 에서 xxx를 자신의 트위터 계정으로 바꿔 주시면 됩니다.

쉽죠?

다음으로 누군가의 댓글에 추가로 코멘트를 하게 되면 내 아이콘이 출력되게 하는 법을 알아 보겠습니다.

아래 그림을 참고 하시구요.

일단 출력될 아이콘이 필요하겠죠?

사이즈는 64x64 정도의 이미지 파일을 준비해주시구요.

준비한 파일을 티스토리 관리 모드의 html/css 편집 → 파일업로드 → 추가 버튼을 클릭해서 올려줍니다.

그런 다음 skin.html 편집 창을 엽니다.

그림에 보시면 파란색으로 children 이라는 ul 항목을 찾을 수 있습니다.

항목을 따라 내려가다 보면 img src='./images/bg-none.png라고 되어 있는데,

이 내용 중 bg-none.png 를 아까 본인이 업로드 한 파일 이름으로 바꿔 줍니다.

잘 되셨나요?

혹시 모르시겠다면 댓글을 남겨 주세요.

이상으로 Juo님의 Neutral 스킨을 소개해 드렸습니다.

제 눈이 더 번쩍 뜨이게 하는 스킨을 발견하기 전까지는 이 스킨을 쭉 사용할 것 같아요. ^^

오늘 글은 여기까집니다.

아시죠? 추천은 저를 춤추게 한다는 걸... ^^

오늘 소개해 드릴 스킨은 Juostory님이 공개해 주신 chocotheme 스킨입니다.

원래 이 스킨은 cssmayo.com에서 워드프레스용으로 개발한 스킨으로 인기 있는 스킨입니다.

저도 잠시 사용했던 스킨인데요.

우선 스킨이 어떻게 생겼는지 확인해 보죠.

예쁘지 않나요?

마치 예쁜 가죽 다이어리를 펼쳐 놓은 것 같은 모습입니다.

사이드 바 메뉴 부분의 스티치 무늬까지 딱 가죽 다이어리의 모습입니다.

디테일이 솨~라~있~네~~ ㅋㅋ

투명한 느낌의 화이트 계열 스킨들도 예쁘긴 하지만 너무 밋밋하다는 생각이 들어 좀더 개성 있는 칼라 테마의 스킨을 원하시는 분들에게 권하고 싶네요.

마음에 드신다면 스킨을 다운로드 해주시구요.

특징을 살펴보면,

아래 그림을 보시면 아시겠지만, Category 외의 사이드 바 영역이 플립플롭(Flip-Flop)방식으로 되어 있습니다.

이 방식이 맘에 들지 않아서 항상 메뉴를 펼쳐 놓고 싶으신 분은 skin.html 을 수정해 주셔야 합니다.

아래 그림처럼 skin.html 창에서 pagenav 요소를 찾으시고 display:none 부분을 display:block 으로 수정 하시면 됩니다.

나머지 Recent Post 모듈, Recent Comment 모듈, Archives 모듈, Book Mark 모듈도 마찬가지로 display 방식을 변경하시면 됩니다.

요건 귀찮아서 그림은 없습니다. ^^

암튼 수정을 마치고 변경된 사항을 저장하고 내 블로그로 다시 돌아와 보면 아래 그림처럼 Pages 메뉴가 펼쳐져 나오는 걸 확인할 수 있을 겁니다.

잘 되셨나요?

오늘은 Juostory님의 chocotheme 스킨을 소개해 드렸는데요.

맘에 드셨으면 좋겠네요.

읽어 주셔서 감사합니다.

이글이 도움이 되셨다면 추천 버튼을 꼬~~~옥 눌러 주세요. ^^

TYZEN님이 공개 해주신 티스토리 스킨인 iNove_tyzen 스킨을 소개해 드렸는데요.

지난 포스팅을 통해 font-size 사이즈를 수정하는 방법에 대해 알아봤습니다.

지난 포스팅 말미에 말씀 드린대로 이번 포스팅은 iNove 스킨의 skin.html 수정을 통해 원본의 mail to:address와 twitter/계정을 내 정보에 맞게 변경하는 방법을 안내해 드릴까 합니다.

더불어 제가 미처 확인하지 못했던 상단 광고 배너에 대해서도 수정하려합니다.

스킨을 소개하면서 제 블로그에도 바로 바로 적용하며 글을 쓰다 보니 수정 사항을 한꺼번에 말씀 못드린 점 양해 부탁 드립니다. ^^

본론으로 들어가서 바로 시작 하죠.

관리 페이지로 들어가셔서 왼쪽 메뉴에서 HTML/CSS편집 버튼을 누르면 아래 그림처럼 오른쪽에 skin.html 수정 창이 나옵니다.

skin.html 내용 하단쪽에 내려가 보시면 아래 그림처럼 mailto:tyzen@tyzen.net이라는 항목을 찾을 수 있습니다.

찾기 어려우신 분은 내용 창에 마우스를 클릭하신 후 CTRL+F 를 누르시면 검색창이 나오는데 거기에 mailto 라고 입력하시면 바로 찾을 수 있습니다.

너무 친절하죠. ㅋ

암튼 찾으셨으면,

mailto: 뒤의 값을 자신에게 맞게 수정하시면 됩니다.

mailto:mysecretblue@tistory.com 이런 식으로 말이죠.

다음으로 트위터 계정을 수정해야겠죠?

메일 주소 바로 밑에 보면 twitter.com/tynkr 이라고 돼 있을 겁니다.

이걸 twitter.com/본인계정 으로 수정하시면 됩니다.

간단한 내용이니 쉽게 할 수 있을 겁니다.

제가 사용하는 브라우저 특성으로 사실 미처 발견하지 못했던 부분입니다. ㅠㅜ

다른 컴으로 블로그에 접속했다가 광고 배너가 있는 걸 보고 깜짝 놀라서 이 내용도 말씀 드려야 할 부분 같아서 안내해 드립니다.

아래 그림처럼 배너가 출력 되는데요.

이부분을 삭제할 겁니다.

다시 관리 페이지의 skin.html 을 수정해야 하는데요.

창을 확인 하시면 내용 중에 <div class="banner">라는 항목을 찾을 수 있습니다.

아래 그림을 참고 하셔서 빨간색 부분을 전부 지워 주세요.

자 이제 잘 됐는지 확인 해봐야죠?

잘 되셨나요?

혹시 잘 안되시는 분은 댓글로 남겨 주세요.

미천한 지식이지만 능력 내에서 도와 드릴께요. ^^

도움이 되셨다면 추천 버튼 한번 눌러 주시는 것도 잊지 마시구요. ㅋ

여러분의 추천은 저를 춤 추게 한답니다. ^^