호기심 가득! 모지모지!

티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~ 이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다. 방법을 간단히 요약하자면, 1. 각 영역별 이미지를 업로드한다. 2. 각각의 CSS상의 이미지 URL을 바꿔준다. 정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ 일단, 교체할 영역을 살펴보죠~ 가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠? 두번째는 중간 크기로 브라우..

오래전에 추가한다 해놓고 크게 쓰임이 있지 않아서 생략했던 내용인데, 댓글로 요청해주신 분이 계셔서 간단히 적어봅니다. 블로그를 하다보면 어쩔 수 없이 방문자수를 계속 지켜보게되더라고요. 다른 블로거님들도 마찬가지일거라 생각됩니다. 물론 크게 신경쓰지 않는 블로거들도 분명 있을테지만요~ 반응형 스킨#2의 경우 모바일버전에서는 표시가 되지 않습니다. 그래서 별도의 특별한 디자인은 하진 않고, 치환자를 적당한 위치에 위치시켜서 추가해봤습니다. 방법은 매우 간단합니다. 일단 아래 사진을 참고해주세요~ 위와 같이 HTML상에 티스토리 방문자 치환자를 추가해줍니다. Today : Yesterday : Total : 순서대로 오늘, 어제, 총 방문자를 나타내는 치환자입니다. 그런 다음, 이제는 CSS상에서 clas..

CSS를 조금 아신다는분은 뭐 사실 많이들 아실 내용이긴 하지만, 간단히 border-radius를 넣어 글에 들어간 이미지나 기타 박스형태의 디자인을 라운드형태로 변경해주는 방법입니다. 티스토리 반응형 스킨이 모바일대응에 초점이 맞춰진 바 큰 이미지를 박스형태로 보여주는 디자인이 많은데요. 그런 박스가 너무 딱딱하게 여겨진다는 분들이 따라하면 좋을거같네요. 일단, 위의 이미지처럼 본문에 삽입된 이미지를 포토샵 작업에서 라운드처리를 하지않고도 라운드된 형태로 변경할 수 있습니다. 그리고, 티스토리스킨 반응형#2에서 관련글 리스트의 형태가 위의 그림에서처럼 박스형태인데 그것또한 라운드처리할 수 있습니다. 윗부분은 바로 본문이 들어가는 위치 클래스명이 area_view이군요. CSS창을 열어서 위와 같은 위..

티스토리 반응형#2을 쓰다보니 먼가 아쉬운것들이 많이 있네요. 그래서 자꾸 고치게 됩니다.^^ 새로운 글이 떳을 경우, NEW아이콘이 붙어야 먼가 살아있는 블로그 같은 느낌이 드는 건 저만 그런걸까요?ㅎ 그래서 좀 뒤져봤습니다. 매우 간단합니다. 일단, 100줄 근처를 찾아봅니다. .tt_category li a .c_cnt와 .tt_category li a img의 속성이 display:none으로 되어있을겁니다. .tt_category li a .c_cnt는 카테고리의 글수를 표시하는 것이고, .tt_category li a img이 바로 New 아이콘을 표시해주는 부분입니다. 저는 글수는 필요없어서 그대로 두고, img를 보여주기 위해 위와 같이 변경해주었습니다. 소스 .tt_category li ..