안녕하세요. 좋은사람들 피플즈 입니다. 요즘 코감기, 목감기 때문에 아주 죽을것 같습니다. 몸살기운은 다 떨어졌는데, 위 두놈은 죽어라 안떨어지네요. 글쓰기에 집중력도 떨어지고 해서, 며칠 쉬다가.. 티스토리 미션은 수행해야 겠기에.. 수행에 맞도록 스킨도 적당히 바꿨습니다.

 

이번 미션은 블로그의 컨셉에 맞게 첫화면을 꾸미고, 부연 설명과 팁을 알려라 라는 미션인데요. 제 블로그는 아시다 시피.. 한가지 주제라기 보다는 포괄적인 광범위한 주제를 다루다 보니.. 사진 전문 블로그나, 요리전문 블로그 처럼, 특정한 주제가 없습니다. 그래서.. 무난한 컨셉의 첫화면을 잡았고, 구석구석 입맛대로 꾸며보는 시간을 가져볼까 합니다.

 

 

작업의 개요 


오늘 설명할 스킬은.. 나름 고급기술(?) 입니다만.. 이방법을 익혀두면, 티스토리가 가지고 있는 무한변신 능력에 한걸음 다가게 되니, 군침이 도실지도.ㅋ

 

아래 사진은 제 블로그 첫화면 입니다. 조합형과 목록형을 위주로 꾸며봤습니다. (저번 리뷰글에도 말씀드렸다시피.. 조합형이 너무 마음에 드네요.ㅋ)

 

▲ 첫화면 구성

 

그 중 오늘 올릴 첫화면 꾸미기 팁은 바로 CSS 수정을 통해서 첫화면의 구성요소에 접근하는 방법입니다.

아래 사진을 보시죠. 위 사진은 첫화면의 기본기능을 이용하여 만들어본 구성이고, 아래쪽은 CSS를 손봐서 만들어본 구성입니다.

 

▲ 작업 전

 

▲ 작업 후

 

(작업 후 사진) ① 타이틀에 이미지를 삽입, ②글 관련 내용 (날짜, 코멘트 등)의 색상을 수정하여 눈에 잘 띄게 만들어 주었습니다.

 

첫화면이 무채색이면 깔끔하게 보이긴 하지만, 화면 전체가 무채색이다보니, 시각적으로 구분되어 지는 무언가가 부족한것 같아서, 그런 효과를 주기 위해서.. 글 관련 세부내용에 색상을 넣어서, 구분선이 아니더라도 날짜, 코멘트만으로도 쉽게 글을 잘 띄도록 만들어 봤습니다.

 

 

① CSS를 수정해서 타이틀에 이미지를 삽입하는 방법


그럼 일단 ① 타이틀에 이미지를 삽입하는 방법을 적어 볼까 합니다. 좀 복잡하게 느껴 질수 있으나 천천히 잘 따라 하신다면 그리 어렵지 않을 겁니다.

 

물론 제 방법 이외에도 아이템을 넣고, 아이템을 다 날린다음 바로 html 디자인 설정일 이용하여 이미지를 삽입해도 되지만, 티스토리를 활용함에 있어서 css를 다루는 기술도 겸사겸사 알려드릴겸해서 올려봅니다.

 

 :: 준비물 ::

  • 더이상 손볼일이 없을 정도로 맘에 드는 첫화면 구성
  • 타이틀에 들어갈 이미지 사진들 (고정 크기 추천)
  • 넉넉한 시간, 하겠다 하는 의지!
  • 두개의 인터넷 창, 혹은 탭화면 (이게 준비물ㅋ? 그냥..)

 

요 작업은 한번 해둔 후, 첫화면을 수정하게 되면, 수정된 아이템을 다시 작업해야 하는 번거로움이 있으니, 꼭 더이상 손볼일이 없을 정도로 맘에 들게 첫화면을 구성한 다음에 작업하세요. ^^

 

저는 첫화면의 분류에 맞는 타이틀에 들어갈 이미지(가로 300px x 세로 60px)를 5개 준비했습니다.

 

▲ 크기 일정한 타이틀 이미지

 

이 파일들을 모두 skin 디렉토리에 업로드 해주시면 됩니다. 아래사진의 1cm0.jpg ~ 1cm4.jpg파일들이죠. (파일 명을 클릭하고, 왼쪽에 보이는 이미지에서 마우스 오른쪽 클릭하면, 해당 그림파일의 경로를 알수 있습니다. 이 방법은 티스토리를 활용하는데 있어서 다양하게 쓰이니 꼭 습득하세요!)

 

▲ 이미지 파일은 스킨폴더에 업로드

 

구글 크롬의 [요소 검사]를 이용하여, 첫화면에 해당하는 id를 알아내야 합니다. (참고로 id는 보관함에 저장후 다시 적용하면 id명 번호가 바뀌더군요; 뭐.. id이름만 다시 뽑아주면 되지만, 그래도 당황스럽습니다.;) 파이어폭스의 파이어버그를 이용하거나, 익스플로러의 개발자 도구(F12) 이용해도 됩니다. 전 크롬이 손에 익어서 구글 크롬을 이용하여 설명드릴께요.

 

:: 너의 이름은 고하라~ 각 아이템별 고유명칭 알아내기 ::

크롬을 실행시킨 후, 타이틀에서 마우스 오른쪽을 클릭하게 되면 [요소 검사] 라는 메뉴가 보입니다. 그 메뉴를 클릭하면 창이 하나 더 뜨는데, 이것이 바로 진정한 티스토리 소스입니다. 보기 어려우시다면 새로뜬 창의 내용중 id=tt-345453 class=tt-inner 등같은 곳을 클릭해보면, 그 부분이 어디에 위치한 부분인지 부모창에서도 리액션을 해주니 잘 보일겁니다.

 

동영상을 보시면 대충 어떻게 아이디명이나 클래스명을 따오는지 이해가 되실겁니다. ^^

 

 

그러면, 각각 따온 이름을 이용하여 CSS를 수정하러 가야합니다. ㅋ 티스토리 관리자 모드의 스킨수정 화면에서 css부분 제일 밑에 아래와 같이 추가하신 후 자신에게 맞게 수정해 주시면 됩니다. (탭이나 창을 두개를 띄워 작업하시는게 수월할꺼에요~ ^^)

 

/* 그룹1- 각 타이틀 부분 높이조정, 텍스트 화면 밖으로 밀어보내기, 간격 조정 8개*/

#ttItem1269596281
.tt-item-title-inner, #ttItem1269596284 .tt-item-title-inner, #ttItem1269596286 .tt-item-title-inner, #ttItem1269596289 .tt-item-title-inner, #ttItem1269596292 .tt-item-title-inner, #ttItem1269596282 .tt-item-title-inner, #ttItem1269596287 .tt-item-title-inner, #ttItem1269596290 .tt-item-title-inner {
height:60px; text-indent:-9999px !important; margin-top:20px; }

/* 그룹2- 타이틀이 들어갈 곳들 5개 */ #ttItem1269596281 .tt-item-title-inner {background:url(images/1cm0.jpg) no-repeat;} #ttItem1269596284 .tt-item-title-inner {background:url(images/1cm1.jpg) no-repeat;} #ttItem1269596286 .tt-item-title-inner {background:url(images/1cm2.jpg) no-repeat;} #ttItem1269596289 .tt-item-title-inner {background:url(images/1cm3.jpg) no-repeat;} #ttItem1269596292 .tt-item-title-inner {background:url(images/1cm4.jpg) no-repeat;}

 

[그룹1]은 공통적으로 적용되는 요소들 (높이, 텍스트 밀어내기, 아이템별 간격)을 일괄 적용하려고 따로 빼는 부분이고 [그룹2]는 개별 타이틀 이미지를 넣으려고 따로 빼는 부분입니다.

 

빨간색 부분이 바로 타이틀 그림을 넣을 부분이고, 파란색 부분은 조합형 아이템에서 오른쪽에 붙은 부속 아이템의 아이디명입니다. (조합형 아이템을 쓰신다면 높이를 맞추기 위해 파란색부분도 추가해야 합니다. 저는 조합형 아이템으로 3개를 구성중이기 때문에 총 8개네요~ ^^)

 

크롬을 이용하여 각 아이디명을 따온 부분을 모두 추가해 넣으시면 됩니다. ttItem1269596281 과 같은 형식으로 되어 있으니, 해당 아이템 아이디명을 따오는데 별 무리는 없으실 거에요.

 

:: 소스 설명 ::

  • height:60px
    이 높이는 각 타이틀 이미지의 세로길이입니다. (이미지의 크기가 같아야 소스수정하기 편함)
  • text-indent:-9999px !important
    이건 원래 적용된 텍스트 타이틀을 화면밖으로 밀어버리는 기능입니다. -9999px만큼 밀어버려서 어딘가에 존재하지만, 결론적으로 모니터상에는 안보입니다. (!important를 추가 시키는 이유는, 이 요소를 우선 적용하라는 뜻입니다.)
  • margin-top:20px
    이건 각 타이틀 상단쪽에 margin 값을 줘서 간격을 유지시켜 줍니다.
  • background:url(images/1cm0.jpg) no-repeat
    타이틀 이미지를 불러옵니다. 경로 수정은 파일명만 수정해 주시면 됩니다. no-repeat은 반복 출력하지 말라는 뜻이구요. (만약에 배경이미지 위에 텍스트 타이틀을 넣고 싶으시다면 위 두번째 text-indent를 지우고, background의 no-repeat을 지우거나 repeat-x 나 repeat-y 를 넣는 방법으로 다양한 시도를 해보세요..)

 

 

 

②글 관련 내용 (날짜, 코멘트 등)의 색상 수정하기

 

위 크롬 작업 동영상 뒷부분에, 코멘트, 날짜등의 클래스명을 따오는 부분을 보셨나요? 그러면 아래 소스를 이용하여 쉽게 색상을 바꿀 수 있습니다. (참고로 이 클래스 명은 공통이니 아래 소스 그대로 사용하셔도 무방합니다.)

 

.tt-post-date {font:11px Trebuchet MS !important; color:#258C99 !important;}
.tt-post-comment {font:11px Trebuchet MS !important; color:#FF9966 !important;}


티스토리 첫화면의 폰트는 모두 돋움이나 굴림으로 기본설정되어 있는데요. 영문폰트는 좀더 부드럽게 보이고, 한글폰트는 픽셀하나하나 또력하게 보이는 특징이 있습니다. 아래 사진을 참고하여 자신에 맞는 한/영 폰트를 쓰시면 되고요. 색깔을 수정하시려면 위 코드중 color뒤 코드만 변경하면 됩니다.

 

▲ 영문폰트

▲ 한글폰트


 

 

③ 조합형 아이템의 좌우 위치 바꾸기, 넓이 수정해보기


조합형 아이템의 특징하면 좌우로 나뉜 두개의 아이템을 가졌다는 특징이 있는데요. 저번에도 언급했다 시피, 한쪽은 글을 출력할 수도 있고, 다른 한쪽엔 위젯이나 구글광고같은 코드를 삽입 할수도 있습니다.

다만 단점이라고 한다면, 크기가 고정되어 있어서.. 다양하게 활용하기 어렵다는 정도..?

 

하지만 위 방법을 응용한다면 이것도 문제가 되지 않습니다.

 

 

일반적으로 아이템이라고 불리우는 것들은 티스토리 소스상에서는 tt-component 라는 이름으로 불리고 있습니다. (제 메인은 총 5개의 컴포넌트로 구성되어 있는 거군요.~ㅋ) 컴포넌트 안에는 ttitem이라고 불리우는 div로 감싸져 있구요. 다만, 조합형의 경우에는 ttitem이 두개라는 데에 특징이 있고, 요걸 수정한다면, 좌우 위치는 물론이고 넓이 까지 수정할 수 있습니다.

 

위 구글 크롬 동영상을 참고해서, 원하는 ttitem의 아이디명을 따옵니다.

 

제 경우엔 일상속 이야기 카테고리 글을 조합형으로 만들었는데, 왼쪽 사진나오는게 ttItem1269596286 , 오른쪽 글목록만 나오는게 ttItem1269596287 요 이름들이네요. 그렇다면 이걸 좌우 변환하면 되겠죠?

 

#ttItem1269596286 {float:right !important; margin:0 !important;}
#ttItem1269596287 {float:left !important;  margin:0 !important;}

 

원래는 ttItem1269596286 요기에 붙은 속성이 float:left 였는데 right로 바꿔주면서 우선순위를 강조해 줬구요. 그 밑에 ttItem1269596287 이것도 역시 오른쪽에 위치하던걸 left로 바꿔줬습니다. (!important의 기능은 위에서 설명했죠? ^^)

 

그리고 margin:0 으로 줌으로써 익스6에서 나타나는 float 버그도 잡아 주고요. 

 

▲ 좌우 변경한 모양. (이미지 타이틀 재작업 요구; 역시.. 작업은 계획적으로.ㅋ)

 

▲ 클릭해서 보세요. (넓이 수정은 다소 복잡한 작업이 요구될듯;)

 

단.. 넓이를 수정해 주면, 일부 글이 화면밖으로 밀리는 현상이 있으므로, 넓이를 수정해 주는것은 비추합니다. 하지만 따로 작업하면 이것도 보완은 가능합니다만.. 한 두개 수정해서 될일은 아니것 같고, 일단은 허용된 범위를 넘어서는 것 같아서.. 넓이를 조절하는것은 보류...

 

 

마무리


막상 글로 쓰려니 뭐 부터 손대야 할지 막막했는데, 쓰다보니 다 적었군요.(서너시간 족히 걸린듯; 아.. 나 환잔데;) 너무 활용도가 다양해서 일일이 다 적지 못한점 이해해 주세요.
 
하나씩 찾아들어가는 요 방법을 응용해서 다양한 메인페이지를 구성해 보는것도 재미있을 것 같아요.

 

 

이번 티스토리 첫화면의 업데이트는, 티스토리를 블로그로의 가치를 넘어 홈페이지까지 흡수 할 수 있는 광범위한 활용도를 보여주고 있습니다.

 

언젠가 한번은 이런 강좌 써보고 싶었는데, 이번 티스토리 첫화면 베타테스터로 참여하면서 좋은 기회가 된것 같습니다. (첫화면뿐아니라 티스토리 전반적으로 스킨을 수정하거나, 사이드바를 꾸밀때 유용하게 써먹을 수 방법들이 곳곳에 숨어있죠? ^^)

 

치환자가 적용된다면, 워드프레스 에서 자주 보이던 jcarousel이용한 멋진 슬라이딩 구성도 가능할것 같습니다. 나중에 이게 적용되는걸  확인하면, 따로 글을 올리던가 할께요.

 

너무 쉬었더니.. 적응도 안되지만,ㅋ 오랜만에 이런 장문의 글을 작성하려니 엉덩이에 땀나네요;

 

# 썸네일방식은 어떻게 작동되는 건가요?;;

 

파일 첨부 최상단에 있는 파일의 썸네일이 자동 등록되는거 아니었나요~...?

보통 파일작업 다 해두고, 썸네일 할만한 이미지는 나중에 따로 만들어 추가하는데..

이번 첫화면의 썸네일은 파일의 용량 별로 자르는 건지.. 음..

갈피를 못잡아서 썸네일을 요령 껏 골라 넣을 수가 없네요.