호기심 가득! 모지모지!

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

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

검색유입 URL에 독특한 주소가 보여서 들어가보니 이런 서비스가 있었군요~ 다음 TROY? 다음카카오에서 서비스를 하고 있는 서비스인데 모바일이나 테블릿 PC등 디바이스별로 웹 사이트를 테스트해볼 수 있는 서비스입니다. 요즘은 왠만한 사이트들이 반응형으로 만들어지는데 웹디자이너나 개발자에게 매우 유용한 서비스가 아닐까 생각되는군요. 보아하니 서비스한지는 좀 된거 같긴한데. 어쨌거나 왠만한 스마트폰이나 테블릿들은 거의 포함되어 있습니다. 위의 소개글을 보시는대로 반응형 웹사이트 개발 시 다양한 디바이스 환경에서의 테스트를 도와주는 서비스입니다. URL을 접속하면 첫 화면은 위와 같이 매우 심플합니다. 간단히 레이아웃을 설명드리면 왼쪽에는 각 디바이스기기 목록이 나옵니다. 디폴트는 삼성의 갤럭시 노트4군요...

브라우저의 기본기능 개발자도구를 이용해서 CSS를 쉽게 편집하는 방법을 올려봅니다. 일반적으로 소스보기 후 해당 소스를 하나하나 찾아가며 수정하는 분들이 혹 있으실까바 조금은 편한 방법을 소개해드립니다. 이미 어느정도 HTML을 만질 수 있는 분들은 해당사항이 안될지도 모르겠네요. 위의 사진처럼 익스플로러11 기준, 오른쪽 상단을 보시면 톱니바퀴가 보이실겁니다. 클릭하시고 보시면 메뉴에 개발자도구가 있습니다. (타 브라우저도 비슷한기능들이 있습니다.) 그리고 익스 버전별로 메뉴 모양이 조금씩 다른데 기능은 거의 동일하게 들어가 있습니다. 클릭하시면 아래처럼 브라우저의 하단에 창이 열립니다. 새창으로도 열리기도 하지요~ 옵션에서 변경가능합니다만 설명은 생략할게요~ 개발자도구 창을 보시면 맨앞에 DOM탐색기..

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

티블로그를 운영하시는 분들 중에 도메인을 사서 2차주소로 연결해 운영하시는 분들이 계실겁니다. 저역시 도메인 mojimoji.co.kr를 산 뒤 2차주소를 사용하고 있습니다. 모바일과 웹에서 보시면 제 블로그 하단에 애드핏광고가 보이실겁니다. 가끔 대체광고로 제가 넣은 배너도 뜨곤하죠~ㅋ 애드핏광고를 붙이면서 가장 큰 문제가 사이트는 동일한데 주소가 두개라서 애드핏 광고단위를 각 주소마다 생성한 뒤 스크립트를 그냥 붙이면 배너가 작동을 제대로 안한다는 겁니다. 애드핏은 해당 주소값과 매칭이 되어야 배너가 뜨는데요. 서비스에서 제공해준 스크립트를 고대로 붙여넣기만 한다고 알아서 배너가 나오지 않습니다. 이것때문에 별의 별 짓을 다해보고 결국엔 질문까지 남겨 답변을 받았으나.... 늘 그렇듯 아래와 같이 별..

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

구글 애드센스는 오래전부터 신청하고 완료해놔서 일찍감치 스킨 변경 후, 바로 적용을 했는데... 다시 블로그를 손대면서 비슷한 광고가 있나싶어서 찾아봤더니 다음에서 서비스하는 AdFit이란 광고를 찾았네요. 이전에 아담인가 하는 이름으로 서비스를 했었다는데 이름을 바꾸었나봅니다. AdFit설명을 찬찬히 둘러보니 원래 모바일전용 광고용이라고하는데요. 쉽게말해 아이폰 안드로이드폰에서 보여지는 앱에 적용이 가능한 광고수익 서비스라는군요. 추가로 모바일웹에도 적용이 가능합니다. 그래서 티스토리 반응형 블로그에도 달 수 있나봤더니 달 수 있습니다. 일단 가입부터...아래 페이지가 Adift 주소 입니다. http://adfit.biz.daum.net 가입 후 로그인하면 여러메뉴가 나오는데 일단 광고관리에 들어가서..

지금 보시는 제 블로그의 폰트가 바로 나눔스퀘어입니다. 필요한 글자만 추려서 용량을 줄였다는 설명이 맘에 들어 설치했습니다. 모바일에선 아주 쏙 맘에 드는 폰트네요. 블로그에 나눔스퀘어 폰트 적용법입니다. 티스토리를 사용하시는 블로거님은 아래와 같은 위치에 파일을 업로드해주세요~ (업로드하지 않고 다른 곳의 절대주소/링크를 이용해서도 가능은 합니다) 암튼, 파일은 맨 하단에 첨부링크가 있으니 폰트파일을 받아서 업로드 하시면 됩니다. 그리고 CSS페이지 안에 아래와 같이 적어줍니다. (보통 맨위 정도에) @font-face { font-family: 'NanumSquare'; src: url(images/NanumSquareR.eot); src: url(images/NanumSquareR.eot?#iefi..

티스토리 반응형 #2 스킨 뜯어고치기~ 재미있군요. 오늘은 늘 신경이 쓰였던 TOP버튼의 추가하기입니다. 글을 읽다 내려가다보면 다시 상단으로 가야하는데 PC에선 그렇게 불편함을 모르겠는데, 이게 모바일에선 상당히 불편시렵습니다. 그래서 오늘은 상단으로 이동하는, 그것도 스크롤효과가 있는 TOP버튼을 붙여봤습니다. 글 오른쪽 아래에 보시면 동그랗게 TOP버튼이 붙어있죠? 요런 작은게 있다 없으면 또 불편하죠~ 특히나, 모바일에선 손가락으로 스크롤하는게 무척 힘이 듭니다;; 자~ 붙여볼까요? 일단, 버튼 이미지 만들기는 귀찮으니 그냥 HTML로 만들었습니다. 모양은 반응형#2 스킨의 아이콘 스타일대로 동그랗게 만들었습니다. 이미지를 사용하실 분은 요기에 배경이미지를 적용하시면 됩니다. * 추가 구글배너나 ..