본문 바로가기

CSS19

티스토리 모바일 페이지 리뷰 완벽판 좋은점 아쉬운점 티스토리 모바일 페이지란? 티스토리는 테터툴즈를 기반으로 한 블로그 서비스 입니다. 무제한의 용량과 무제한의 트래픽, 그리고 XHTML,CSS 를 모두 수정 할 수 있도록 개방한것이 티스토리만의 장점입니다. 또한 티스토리는 컴퓨터 웹브라우저로 접속은 물론 스마트폰으로 접속시 모바일 페이지를 지원하여 1천만 스마트폰 시대에 발맞춰서 빠른 서비스를 지원중입니다. 모바일 페이지는 모바일기기에서 접속 시 모바일기기의 화면해상도에 맞도록 미리 제작된 페이지를 말합니다.스마트폰으로 접속하거나 태블랫PC 등으로 접속 시 모바일 페이지로 뜨도록 해서 상대적으로 성능이 낮은 모바일기기에서도 좀 더 빠른 속도로 블로깅을 즐길 수 있고 화면해상도에 맞게 뜨도록 해서 글자를 읽기 편하게 해줍니다. 왼쪽은 스마트폰에서 풀브라우.. 2011. 3. 29.
티스토리 블로그 XHTML CSS 에러 잡기 이벤트 티스토리 블로그 에러 두고 계십니까. 티스토리 블로그를 사용하면서 좋았던 점은 블로그를 다양하게 꾸밀 수 있다는 점 입니다. 그런데 블로그를 마음대로 꾸밀 수 있는 만큼 블로그 스킨에 알지 못하는 에러가 생길 수 도 있습니다. 이 에러는 블로그의 속도를 느리게도 할 수 있으며, 일정 부분이 보이지 않을 수 도 있고, 어떤 사람은 해당 블로그로 접근시 컴퓨터가 멈추기도 합니다. XHTML 검사 : http://validator.w3.org/ CSS 검사 : http://jigsaw.w3.org/css-validator/ 티스토리 블로그 XHTML CSS 오류 잡기 이런 에러를 두고만 볼 수 없겠죠. 다만 제가 예전에 XHTML , CSS 의 에러를 잡는 방법에 대해서 글을 적은게 있지만, 자신의 블로그에 .. 2010. 8. 13.
티스토리 블로그 XHTML CSS 오류 잡기 티스토리 블로그 XHTML CSS 오류 티스토리 블로그를 현재 사용 중 입니다. 티스토리는 테터툴즈 기반의 블로그로 XHTML ,CSS 를 따르는 블로그이죠. 티스토리 블로그 팁을 가끔 쓰면서 가끔은 저도 게을러서 제 블로그가 오류가 있음을 알면서도 넘어갈 때 도 있었죠. 웹표준은 W3C 에서 제안하는 내용에 맞춰서 작업을 해야하죠. 자신의 블로그에 오류가 얼마나 많은지 검사를 해보신 분이 있는분도 있을테고 안해보신 분도 계실겁니다. XHTML CSS 오류를 어떻게 잡는지 한번 살펴보고 왜 오류 잡기를 해야하는지 알아봅시다. 티스토리 블로그 오류는 한번 체크를 반드시 티스토리 블로그 오류 체크는 한번씩은 해보아야합니다. 자신이 넣은 코드나 블로그 팁등이 뭔가 어긋나게 안맞게 되어있을 수 있기 때문이죠. .. 2010. 6. 28.
티스토리 블로그 팁 비밀공간을 만들어보자 티스토리 블로그 나만의 비밀 공간 만들기 티스토리 블로그 팁 중 자신의 블로그에 나만의 비밀 공간 만드는 방법에 대해서 설명합니다. 자신의 블로그의 글을 발행 후 메타사이트로 찾아가야 하거나 또는 자주 찾아가는 블로그들 주소, 또는 블로그의 스킨 스타일 때문에 꼭 넣고 싶지만 일반인에게는 보이기에는 애매한 부분 등 다양한 이유로 자신만 보기 위한 공간이 필요할 수 있습니다. 자신의 블로그의 일부 공간중 관리자에게만 보이는 공간을 활용하는 방법에 대해서 설명합니다. 티스토리 블로그 비밀공간 엿보기 티스토리 블로그의 부분중 관리자만 보이는 부분은 이미 있습니다. 글수정/글삭제 등의 영역을 보통 표기하는 본문의 상단 부분입니다. (당연 스킨의 형태에 따라 위치는 달라질 수 있습니다.) 이 부분을 활용하면 관리.. 2010. 6. 17.
티에디션 꾸미기 솔찍한 나의 생각 티스토리 첫페이지 꾸미기 그 시작 티스토리 첫페이지 꾸미기를 티스토리에서 준비하면서 베타테스터 인원을 모집 했고, 저도 베타테스터로 참여했었습니다. 티스토리 간담회에서도 첫페이지 꾸미기에 대한 이야기를 듣고 그동안의 개발자의 고충도 듣고 했었죠. 참 여러가지 생각을 하면서 만드는 구나 하는 생각도 그때 들었었습니다. 다른 포털 사이트등의 블로그들의 첫페이지를 보면 뭔가 잡지의 첫페이지처럼 화려하게 잘 꾸며져 있죠. 그렇게 쉽게 꾸미는걸 제공하지 않아서 사실 티스토리로 넘어오는것을 꺼려하는 분도 실제로 본적이 있습니다. 그런 유저들을 위해서 만든게 티스토리 첫페이지 꾸미기이며, 블로그를 꾸미기를 좋아하는 분들의 심리를 파악한 티스토리의 리스펀스이기도 하죠. 지금은 첫화면 꾸미기가 티에디션이라는 새로운 이름.. 2010. 5. 25.
다음뷰 추천 위젯 배경 꾸미기 하이 퀄리티 테마 블로그팁 다음뷰 배경 꾸미기 그 시작 다음뷰 추천 위젯이 있습니다. 다음뷰에 추천을 할 수 있는 위젯이죠. 이 추천 위젯에 배경을 주어서 더 부곽을 시키고 스킨과 어울리게 하는데 그 첫번째 의도가 있습니다. 제가 배경을 만들어서 배포를 했었고 알게 모르게 많은 분들이 잘 쓰고 계시네요. 어떻게 사용하는지에 대해서는 아래 링크를 자세히 참조해 주세요. 여기에서는 코드만 공개하도록 하겠습니다. 넉두리지만 혼자서만 쓰려고 만들었던 코드도 하나 있는데 결국 공개해버렸네요. 다음뷰 배경 꾸미기 방법 (꼭 읽어보세요) 다음뷰 배경 꾸미는 방법 설명 및 다음뷰 배경 꾸미기 공개 코드 링크 : http://cdmanii.com/1046 다음뷰 배경 꾸미기 흰색 배경 전용 div.blogger-news-widget { backg.. 2010. 5. 15.
티스토리 본문 넓이 넓히기 방법 설명 #content 블로그의 본문폭을 넓혀보자 블로그 본문폭을 넓히는 방법에 대해서 설명합니다. 티스토리 블로그는 XHTML + CSS 구조로 되어있습니다. CSS 를 조절하면 본문의 넓이 및 높이등도 조절이 가능합니다. 의외로 쉽게 조절이 가능하죠. 보통 스킨을 만들때 이름을 비슷하게 만듭니다. 본문의 경우는 id 를 사용해서 #content 로 보통 쓰죠. 이 부분에 대한 CSS 를 조절하면 본문의 넓이를 넓히거나 줄일 수 있습니다. 예전에 젤리빈님 블로그 본문 넓히는 것에 대해서 설명해주겠다고 했었는데 이번에야 글을 정리해서 올리네요. 동영상도 만든건 좀 되었는데 이제야 공개합니다. 파이어폭스의 부가 기능중 하나인 파이어버그를 이용하면 미리 스킨을 제어해서 수정해 볼 수 있습니다. style.css 에서 #conten.. 2010. 5. 8.
티스토리 스킨 배우기 id, class 는 왜 있는가 티스토리 스킨 수정을 해보려면 몇가지 딱 알아야할게 있습니다. 이부분만 알면, 구조랑 스타일이 보이기 시작하죠. id, class 입니다. CSS 에서 지정할때는 # . 으로 사용합니다. id 는 주민등록번호와 같아서 한번만 사용이 가능합니다. class 는 여러번 반복해서 사용이 가능하죠. 스킨 열여 보시면 먼가 많이 복잡하죠? 하지만, 몇가지만 알고나면 보이기 시작합니다. CSS 내용을 한번 살펴보죠. 뭔가 복잡하게 많지만 앞부분부터 보면 # 으로 시작하는게 있고 . (점) 으로 시작하는게 있고 합니다. # 은 id 를 지정한 부분이며, . (점) 은 class 를 지정한 부분이죠. 천천히 뜯어보면 쉽죠. 이 글에서는 id 와 class 의 개념을 잡는것부터 시작합니다. 자세한 설명 모두 하고 싶지만.. 2010. 4. 1.
티스토리 첫화면 꾸미기 첫화면의 이유를 살려보자 티스토리 첫화면 꾸미기로 저 나름대로 꾸며보았습니다. 꾸미기에 대한 팁은 특별히 정답이 있지는 않습니다. 자신의 블로그 스킨과 얼만큼 어울리느냐가 중요하겠죠. 당연 여러번 바꿔 가면서 자신에게 맞는걸 선택해야할것입니다. 티스토리 첫화면 그 이유의 존재는 ? 티스토리 첫화면 꾸미기는 사실 필요가 없을지도 모릅니다. 보통 검색을 하고 들어오고 글을 보기 때문이죠. 하지만, 필요할 때가 있습니다. 블로그를 주소로 찾아왔을 때, 그리고 검색사이트가 첫화면으로 유도했을 때 입니다. 티스토리의 첫화면이 밋밋하다고 느낀 유저들 그리고 다른 타 블로그 사이트의 첫화면이 부러웠던 분은 이제는 그러지 않아야할 이유가 생겼죠. 티스토리 첫화면 꾸미기 때문입니다. 티스토리 첫화면 앞으로는 ? 티스토리 첫화면 꾸미기는 앞에서 .. 2010. 3. 31.
블로그 광고 수익 모델-구글 애드센스 본문 상단 2개 넣는 방법 본문 상단에 2단의 광고 어떻게 넣어야할까? 구글 애드센스 광고를 티스토리 블로그 상단에 넣는 방법은 많이 공개 되어있죠. 다만 구조와 스타일을 분리해서 티스토리 블로그에 넣는 방법에 대해서 소개를 해볼까 합니다. 제 티스토리 블로그의 본문 상단의 구글 애드센스 광고도 이렇게 구조와 스타일이 분리되어 적용되어 있습니다. 본문 상단에 구글 애드센스 광고를 넣은 블로거들의 블로그를 보면 상당수는 를 썻거나 또는 스타일(style) 를 분리를 안해둔 경우가 많네요. 구조와 스타일을 분리를 해서 올바르게 넣는 방법 및 설정을 하는 방법에 대해서 설명합니다. 블로그 상단에 구글애드센스를 2단으로 넣어둔 모습입니다. 파란색박스 부분은 구글애드센스 부분이며, 아래의 노란색부분은 구글애드센스를 묶고있는 박스의 하단여백.. 2010. 1. 1.
예전 블로그로 접속 시 새 블로그 주소 알려주기 한달정도 전에 저는 cdmanii.tistory.com 에서 개인도메인을 구매하여 cdmanii.com 으로 도메인을 바꿨습니다. 예전 도메인으로 접속시, 새로운 주소로 옮겨오도록 블로그에 스크립트를 사용하였었지만, 블로그에 달아둔 광고와 문제가 생겼습니다. 블로그 광고중 애드클릭스는 1차 2차 주소를 지정이 가능한데, 1차 2차 주소 모두 접속이 원활해야한다는 조건이 있더군요. 그래서 강제로 주소가 바뀌게하는걸 조금 다르게 바꿔보려고 하다가, http://chatii.tistory.com chatii 님 블로그에서 힌트를 얻었고 스크립트를 제가 좀 변경 시켜서 기능을 추가시켜 적용을 시켰습니다. 가능한 웹표준을 지키면서 깔끔하게 나타나게끔 적용한 방법을 소개합니다. 적용 예시 http://cdmanii.. 2009. 10. 12.
XHTML 웹표준 틀리기 쉬운 문법들 블로그 스킨을 수정하면서 틀리기 쉬운 부분에 대해서 이야기를 해볼까합니다. 어렵지 않으니 외워보죠 ^^ 어려운 부분은 넘기시고 붉은색 글자부분은 자세히 보세요! XHTML 을 선언해놓고 규칙을 어긴다 ? skin.html 의 윗줄 일부분 티스토리 스킨의 DOCTYPE 선언 부분입니다. 여러 브라우저에서 다 잘 보이게 하기위해서 "이 문서는 뭐에 맞춰서 만들어졌어!" 라고 알려주는 부분입니다. XHTML 을 선언해놓고 HTML 을 쓰면 안되겠죠. DTD 에는 3가지 형식이 있습니다. strict, transitional, frameset 인데요. 크게 구분하면 Transitional , Strict 가 있습니다. Transitional 는 호환성을 어느정도 준것이고, Strict 는 엄격하게 XHTML 규.. 2009. 9. 29.
티스토리 카테고리 글 더 보기 배경 꾸미기 - 블로그팁 카테고리 글 더 보기 이렇게 꾸며 보자 제 블로그 하단을 보면 카테고리의 다른 글 보기 부분이 조금 다를겁니다. 오른쪽에는 배경이 들어가있고, 기본적으로 나오는 날짜는 나오지 않고 있습니다. CSS 에 맞추어서 카테고리 다른 글 보기 꾸미는 블로그팁에 대해서 소개 합니다. 급하신 분은 붉은색 글자만 읽어보세요 ^^ 카테고리 글 더 보기 꾸미기 절차 1. 플러그인 > 꾸미기 > "카테고리 글 더 보기" 활성화 티스토리관리자 페이지의 플러그인 설정에는, 카테고리 글 더 보기 라는 설정이 있습니다. 이 옵션을 활성화 해 줍니다. 2. 카테고리 글 더 보기의 여백부분에 넣을 그림을 선택 후, 자신의 스킨에 업로드 합니다. 무료 아이콘 좋은곳이 많군요 관련된곳을 엮어봤습니다. Bloggertip.com (제트님).. 2009. 9. 28.
CCL 라이센스 표시 발행된 글에서 CSS팁으로 없애 보자 - 블로그팁 CCL ? CCL 라이센스 (Creative Commons License) 은 자신의 창작물에 대하여 일정한 조건하에 모든 이의 자유이용을 허락하는 내용의 라이선스(License)입니다. 처음에는 저도 CCL표시 를 활성화 해두었지만, 글을 재발행 하거나 복사하는걸 막기 위해서 CSS팁을 이용해서 CCL 라이센스 표시를 없앴습니다. 관련글 보기 : 윤초딩(LovedWeb) CCL 라이센스는 스크랩금지가 아닙니다 CCL 라이센스 무슨생각으로 달아놓으시나요? CCL 라이센스 표시 가 나쁘다는 뜻이 아니라, 저처럼 재발행되는걸 막고 싶으신 분은 아래의 글을 따라 가셔서 해결하길 바라는 맘에서 적은 글입니다. (CCL 라이센스 표시를 체크를 없앤 모습) 하지만, CCL 라이센스 표시 를 활성화 한 상태로 이미 .. 2009. 9. 24.
블로그 팁 다음뷰 버튼 배경 꾸미기 제가 사용하는 다음 view on 추천 위젯 입니다. 뭔가 좀 다르죠? 그렇습니다. viewon 위젯 뒤로 그림을 넣었습니다. 지금부터 view on 위젯을 이렇게 꾸미는 방법에 대해서 간단히 소개하며 응용하는 방법도 소개합니다. 11개의 제가 미리 만들어둔 다음뷰 배경을 공개하니 하나씩 다 적용해보고 맘에드시는걸 써보시고 그리고 가능하다면 직접 편집도 해서 사용해보시길 바랍니다. 다음뷰(Daum view) 추천버튼 배경 셋팅 방법 (11가지 프리셋 제공) 1. 먼저 다음 view on 추천버튼을 버튼형으로 만들어야 합니다. 티스토리 관리자 페이지 > 플러그인 > 글보내기 > Daum view > View on 박스 > 버튼형 2. CSS 코드를 복사한뒤 style.css 의 맨하단에 붙여넣기 한다.아래.. 2009. 9. 23.
블로그 광고수익 모델 CPC 광고 다음 애드클릭스 팁 다음애드클릭스 에디터링크 정렬하는 방법에 대해서 약간의 팁을 소개해볼까 합니다. 제 블로그의 경우 글을 적을때 왼쪽정렬이 우선이며 그림을 올릴때도 왼쪽정렬로 올립니다. 애드클릭스 에디터링크를 본문 상단에 설치했지만, 애드클릭스의 마크인 AdsByDaum 그림을 살펴보면 아래와 같이 생겼습니다. 그림의 양쪽에 투명공간이 있기에, 왼쪽정렬로 올리더라도 왼쪽에 11px 정도 공간이 생기게 됩니다. 공백을 그림수정없이 없애고 왼쪽에 붙여서 나오게 하는 방법에 대해서 소개합니다. * 다음 애드클릭스 에디터링크의 앞부분 그림은 임의로 손상시키거나 어떤 광고인지 알 수 없도록 변경해서는 안됩니다. 2009/04/02 - [Useful Tips] - 블로그 광고 시스템 써보고 느낀 점 애드클릭스에 실제로 이 코드를 적.. 2009. 9. 22.
파이어버그로 티스토리 스킨 미리 수정하기 블로그 스킨을 수정해주는 작업을 최근에 하고 있습니다. 그런데 어떤식으로 미리 확인을 해보는지 궁금해하는 분들이 계셔서 간략하게 글을 적어볼까 합니다. Firefox 는 현재 세계적으로 점유율 2위의 많은 부가기능과 강력한 기능으로 사랑받는 인터넷 브라우저 중 하나입니다. Firefox 의 부가기능 중 하나인 Firebug 를 이용해서 스킨을 미리 고쳐보는 방법에 대해서 소개해보겠습니다. Firebug 설치 제가 Firebug 를 알게된것은 윤초딩님이 소개해준 Firefox의 부가기능 Firebug 에서 입니다. Firefox 를 설치 또는 무설치판을 이용해서 켠 뒤, 윤초딩님의 파이어폭스 확장기능 웹개발자필수 firebug 편 을 확인하셔서 설치합니다. Firebug 의 원리는 ? Firebug 의 원.. 2009. 9. 20.
블로그 스킨 수정해 드립니다. 최초작성일 : 2009/09/11 11:12 스킨작업기한 : 2009/09/11 ~ 특별한 사유 없는한 계속 지금 현재는 많은 업무로 인해서 스킨 수정 작업을 잠시 보류합니다. 재개 할 수 있을때 다시 해드릴께요 ~ 티스토리 블로그 스킨 수정해 드립니다. 자신이 스킨을 수정하고 꾸몄지만 뭔가 느리고 뭔가 재대로 수정해보고 싶지만 망설이는 분들 도와 드릴까합니다. 저 역시 스킨에 대해서 아주 통달하고 아주 잘하느건 아니지만, 가능한 아는만큼 도와드리고 좀 더 빠르게 뜨고 좀 더 쾌적한 블로그 스킨이 될 수 있도록 방법을 제시해주고 직접 수정도 해드릴까합니다. 한분씩 정성드려 해드리겠습니다. 스킨수정이 아무래도 스킨을 모두 파악해야하고 그 블로그 운영자의 성격 및 생각도 생각해야하기때문에 댓글 달아주신 한분.. 2009. 9. 11.
CSS 사전 ,도움말 CSS 사전 파일입니다 도움말이 상세히 잘 적혀있네요 2008. 2. 27.