호기심 가득! 모지모지!

티스토리 스킨관련해서 방명록에 질문을 남겨주신 분이 계셔서 간단하게나마 내용 올려봅니다. 기본스킨에서는 위의 이미지에서 보이는 좌측상단의 메뉴버튼을 클릭해야 펼쳐지는데 제 블로그에서는 마우스오버만해도 메뉴가 펼쳐집니다. 요 부분에 대해서 질문을 주셨네요. 마우스이벤트니 당연히 피씨에서만 해당하겠죠?^^ 별거 아니겠지만, 구지 클릭을 할 필요가 없어보여 바꿔봤네요~ 참고로 메뉴 닫을때 X버튼을 클릭하는건 변경하지 않았습니다. 암튼, 이렇게 변경하기 위해선 스킨의 script.js를 변경해야합니다. [파일업로드]에 보시면 아래쪽에 파일이 있습니다. 마우스오른쪽 클릭하셔서 속성에 들어가보시면 아래와 같이 주소가 나옵니다. 위 복사한 주소를 브라우저주소창에 넣으시면 아마 다운을 받으실 수 있을겁니다. 아참!!!..

어느 분의 요청으로 블로그 좌측화면에 방문수추가하는 방법을 간단히 적어보겠습니다. 제 블로그를 기준으로 위와 같이 PC화면(넓은화면)에서 오늘 방문자, 어제 방문자, 총 방문자 수를 표시하는 방법입니다. * 기본 스킨과는 조금 다른 부분이 있을 수 있습니다. 방법은 1. HTML상에 소스를 넣기 2. CSS에 스타일속성을 추가하기 순 입니다. 첫번째, HTML상에 좌측 붙이고자 하는 부분을 찾아 소스를 넣습니다. Today: Yesterday: Total: 는 아시겠지만 티스토리에서 제공하는 치환자입니다. 즉, 이 부분이 알아서 방문자수가 표시되는 부분입니다. HTML 상의 위치는 제블로그 기준이기 때문에 따라하시는 분은 기존 소스를 참고해서 적당한 곳에 붙여주세요. 대략 저 위에 표시된대로 74줄 근처..

CSS만으로 텍스트메뉴를 좀 더 화려하게 만들 수 있는 소스입니다. 아래와 같은 텍스트 메뉴에 마우스를 오버했을때 다양한 효과들을 손쉽게 적용할 수 있습니다. 위의 그림은 그 중의 일부분이고, 아래 페이지에 접속하면 더 많은 효과들을 확인할 수 있습니다. 괜히 어렵게 이미지를 써가며 화려하게 하기보단 이렇게 텍스트와 소스 몇 줄만으로도 그럴듯한 메뉴를 만들 수 있지 않을까 싶네요. http://tympanus.net/Development/CreativeLinkEffects/ 소스는 아래에서 받아서 사용하시면 되고, 페이지에 적용법도 간략히 나와있으니 참고하시면 됩니다. http://tympanus.net/codrops/2013/08/06/creative-link-effects/ 추가로 텍스트메뉴 효과 뿐..

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

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

우연히 페이스북을 돌아디니다 들어간 사이트~ http://www.usercible.com/ 들어가자마자 여자가 아이패드를 들고 움직인다. 뒷배경과 살짝 어긋나 움직이면서 공간감이 느껴지는 메인 배너~ 오우 너무 멋집니다. 사실 예전에도 이런 비슷한 사이트를 본적은 있습니다만, 최근 블로그 스킨 고치며 새로운 기술들을 좀 둘러보다보니 더욱 눈이 끌리네요. 최근에 메인바탕이 바뀌었네요~ 내용이 다를 수 있는 점 양해바랍니다. 그래서 좀 소스를 좀 살펴봤습니다. 그랬더니 처음보는 translate3d 속성을 보게되었네요. 이전에 transfrom:scale을 이용해서 이미지 위에 마우스를 갖다대면 살짝 커지는 효과를 주는 법을 포스팅한적이 있었는데요. 요건 또 처음 보는 속성이네요~ 그래서 검색을 좀 해봤습니..

티스토리 스킨 포럼에서 질문이 있어서 답글로만 알려드렸던 내용인데 댓글로 질문을 달아주신 분이 있어서 작성해봅니다. 티스토리스킨 반응형 #2 메인화면, 글목록화면과 게시물안의 이미지에 확대효과주기입니다. 이미지위에 마우스를 가져다 대면 이미지가 살짝 확대되는 효과입니다. 솔직히 너무 많이 주면 버벅일 수도 있어서 이런 효과는 조심해서 주는편이긴한데 나름 괜찮아서 추가해보았습니다. 현재 제 블로그화면들의 이미지를 확인해보시면 어떤 느낌의 효과인지 확인하실 수 있습니다. 본 게시물에 들어간 이미지들 위로 마우스를 가져다 대면 살짝 커지죠? 일단, 위의 CSS는 메인화면 즉, 글 목록화면의 썸네일에 적용되는 소스입니다. 줄 수를 보시고 비슷한 위치에 넣어주시면 됩니다. 소스는 아래 .list_content ...

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

아! 왠지 득템한거 같은 기분이군요. 제이쿼리니 자바스크립트니 이리저리 해메다 기가 막힌 소스를 구했네요. CSS파일로만 구성된 상단네비게이션입니다. 원래는 반응형 메뉴라서 다른 스크립트나 이런게 연결되어있었는데. 다 걷어내고, 메뉴 구현 부분만 남겨두었습니다. 인터넷 검색을 잔뜩하다 받은거라 어디서 구한건지 잊어버렸군요.ㅜㅜ.만드신분께는 죄송~ 소스를 수정하다가 처음 보는 속성을 접해봤습니다. transition란 건데... 오버시 속성이 적용되는 시간을 조절할 수 있다는거 같네요. 저는 이 소스에서 메뉴 오버시 색상변화하는 속도를 살짝 변경해봤습니다. transition: all .5s ease-out; 다운받고 확인해보시면 어떤건지 금방 알 수 있어요~ 암튼, 조금만 응용할 줄 안다면 왠만한 상단네..