Blog Tip/Design22 CSS를 이용해 블로그 상단 메뉴바 만들기(2) CSS를 이용해 블로그 상단 메뉴바를 만드는 방법에 대한 두 번째 글입니다. 지난 시간에는 기본적인 내용들에 대해서 다루어봤고, 이번 글에서는 보다 세부적인 사항들에 대해서 설명드리겠습니다. 지난 글에서 이어지는 글로, 이전 글을 확인하지 않을 경우 진행에 어려움이 있을 수 있습니다. source : 1. 메뉴의 배경 색 / 글자 색 / 크기 변경하기 현재까지 완성된 메뉴바는 실제로 이용하기에는 너무 밋밋합니다. 이 메뉴바의 배경과 글자를 꾸밈으로써 변화를 주도록 하겠습니다. 배경 색은 background-color라는 스타일을 ul에 적용함으로써 변경할 수 있으며, 레이어에도 적용하면 보다 다양한 효과를 낼 수 있습니다. 글자 색은 color 스타일을 ul이나 li에 사용할 수 있고, 크기는 font-.. 2013. 2. 22. CSS를 이용해 블로그 상단 메뉴바 만들기(1) 대부분의 블로그들의 상단을 살펴보면 메인이나 특정 카테고리로 이동할 수 있는 메뉴바가 있음을 살펴볼 수 있습니다. 대개의 티스토리 스킨에서는 이를 기본적으로 지원해서, 화면 설정 > 메뉴로 접속하게 되면 편집을 할 수 있으나 그 모양을 다르게 꾸밀수는 없다는 단점이 있습니다. 이번 글에서는 먼저 CSS를 이용하여 메뉴바를 만드는 방법에 대하여 자세히 살펴보고난 후, 특정 스킨에서 기본으로 제공하는 메뉴바를 편집하는 법에 대해서 살펴보도록 하겠습니다. source : 1. 메뉴 리스트 작성하기 먼저 어떤 것들을 메뉴로 만들것인지를 정합니다. 편의상 메뉴1 ~ 메뉴5로 정하고, 과 를 이용하여 리스트를 만들어 보겠습니다. - ul태그는 순서가 없는 블릿 리스트이며 li는 ul 아래의 항목들을 의미합니다. 메.. 2013. 2. 21. 최근 글과 댓글을 스크롤링 형태로 출력시키기 네이버나 다음의 인기검색어 부분을 살펴보면 현재의 인기검색어가 하나씩 스크롤링 되며 보여지는 것을 확인할 수 있습니다. 이러한 텍스트 스크롤링 스크립트를 티스토리에서도 적용이 가능합니다. 원하는 내용을 입력하여 스크롤링 할 수도 있으며, 최근 글이나 최근 댓글과 같이 지속적으로 변하는 내용의 경우에도 스크롤링이 가능합니다. 현재 블로그 상단메뉴에 최근 댓글이 스크롤링 되어 출력되고 있는 것을 살펴볼 수 있습니다. 이번 글에서는 최근 글이나 댓글을 스크롤링 할 수 있는 방법에 대해서 살펴보겠습니다. 단, 이를 사용할 시 사이드바에 있는 최근 글과 최근 댓글 모듈은 정상적으로 출력되지 않을 수 있다는 점에 유의하시길 바랍니다. 사이에 삽입할 내용 HTML/CSS 편집 모드에서 skin.html의 사이에 추가.. 2013. 2. 19. 배경과 테두리, 그림자로 레이어 꾸미기 지난번 '블로그에 플로팅 배너(플로팅 레이어) 달기'포스트에서 예고드린바, 이번 포스트에서는 레이어를 꾸밀 수 있는 방법에 대해서 설명드리도록 하겠습니다. 레이어는 배경과 테두리, 그림자 등을 넣음으로써 꾸밀 수 있습니다. 이번 포스트에서 소개하는 방법들의 상당수는 CSS3을 이용한 것들로 IE8 이하의 하위 브라우저에서는 원하는 모양대로 출력되지 않을 수 있습니다. 이번 포스트는 플로팅 레이어를 꾸밀 수 있는 방법들을 설명하는 포스트입니다. 때문에 해당 속성들의 세부적인 내용이나, 속성의 값이 변함에 따라 어떻게 출력되는지 등의 자세한 내용은 다루지 않았습니다. 보다 자세한 내용은 추후에 다루도록 하겠습니다. 이번 포스트도 지난 포스트와 유사하게 다음의 순서로 구성됩니다. 1. 사전 지식 2. 레이어에.. 2013. 2. 12. 블로그에 플로팅 배너(플로팅 레이어) 달기 플로팅 배너(또는 플로팅 레이어)는 많은 블로그에서 쉽게 찾아볼 수 있습니다. 본 블로그에도 우측과 상단에 플로팅 레이어가 위치해 있습니다. 이 내용을 지난번 '떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너)'라는 포스트를 통해 다뤄드린바 있습니다. 그러나 설명이 장황한면이 없잖아 있고, 특정 스킨에서는 정상적으로 작동하지 않는 등의 문제점이 있던 바, 보다 일반화 하고 간단하게 다시 포스팅하고자 합니다. 두 번째 포스팅이기 때문에 자세한 설명을 추가하지는 않고 방법적인 측면에 중점을 두겠습니다. 보다 자세한 설명을 필요로 하실 경우 지난번 포스트를 확인해주시길 바랍니다. 이번 포스트는 다음의 순서대로 작성되어 있습니다. 1. 블로그 레이아웃(화면)이 좌측정렬일 때 2. 블로그 레이아웃(화면)이 .. 2013. 2. 11. 트위터 리트윗(Retweet) 버튼 달기 역시나 지난번에 플로팅 배너다는 법을 설명드리면서 얘기했었던, 트위터 리트윗 버튼 다는 방법에 대해서 알아보도록 하겠습니다. 페이스북 좋아요(Like) 버튼 다는 방법은 지난번에 올린 글을 참고해주세요. 오늘 소개해드릴 트위터 리트윗 버튼은, 엄밀하게 따지면 사실 리트윗의 개념은 아닙니다. 본래 리트윗이라는게 다른 사람의 트위터에 올라와 있는 트윗을 자신의 타임라인에 올리는 것이기 때문에, 이번 글에서 다루는 내용은 정확하게 하자면 '트위터를 통해 방문객이 포스트를 공유할 수 있도록'하는 것이라고 하는게 가장 올바른 표현이 아닐까 생각합니다. 그러나 편의상 리트윗 버튼이라고 부르겠습니다. 이 리트윗 버튼 다는것 역시도 페이스북 좋아요 버튼이 그랬던것처럼, 티스토리 내에서 자체적으로 플러그인을 지원하고 있.. 2013. 1. 29. 페이스북 좋아요(Like) 버튼 달기 지난번 '떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너)'글에서 언급했듯이 이번에는 페이스북 좋아요(Like) 버튼을 다는 방법에 대해서 살펴보겠습니다. 좋아요 버튼을 블로그에 삽입하는 방법은 크게 두가지가 있습니다. 하나는 티스토리에서 자체적으로 제공하는 플러그인을 사용하는 방법입니다. 이 방법은 간편하게 좋아요 버튼을 블로그에 추가할 수 있으나 그 위치가 본문 하단으로 제한된다는 단점이 있습니다. 또 다른 방법으로는 좋아요 버튼 코드를 직접 발급받아 사용하는 방법입니다. 이 방법은 플러그인을 통해 좋아요 버튼을 넣는 것보다 다소 복잡할 수 있지만 원하는 곳 어디에라도 버튼을 추가할 수 있다는 장점이 있습니다. 이전에 설명드린 플로팅 배너에 이 좋아요 버튼을 추가할 수 있다면 플로팅 배너를 보다.. 2013. 1. 28. 떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너) 다른 블로그를 둘러보면 좌측이나 우측에 뷰 온 버튼과 함께 RSS 구독 등 여러 버튼이 스크롤과 함께 떠있는 경우를 많이 살펴볼 수 있습니다. 개인적으로는 포스트를 읽어보지도 않은 방문객에게 뷰 버튼을 누르게끔 강요하고 글의 내용에 집중하지 못하게끔 한다고 생각해서 블로그에 다른것을 꺼려하고 있었습니다. 물론 그 밖의 다른 기술적인 이슈도 있긴 있었습니다. - 포스트 하단 정리를 하기 위해 작업하던 도중 다음 뷰온 버튼이 정상적으로 작동하지 않아 이것저것 확인하던 도중에 문제점이 있는것을 발견해서 플로팅 배너 역시 작업하려고 생각하지 않았습니다. 이 내용은 아래에서 다시 설명드리겠습니다. 하지만 크기를 작게 하고 본문에 연관없게끔 플로팅 배너를 달아 놓으면 방문객에 쉽게 구독할 수 있게끔 편의를 제공하면.. 2013. 1. 23. 하위 브라우저에서 HTML5 표현되게 하기 웹표준에 대한 관심이 높아지면서 많은 사이트들이 HTML5를 이용하고 있습니다. 티스토리 블로그의 경우에도 예외는 아니라서, 대부분의 스킨들이 HTML5로 코딩되어 웹표준을 지키고 있음을 확인할 수 있습니다. 티스토리에서 공식적으로 지원해주는 스킨들의 경우에는 하위 브라우저와의 호환성 문제를 걱정할 필요가 거의 없습니다만, 개인적으로 배포된 블로그 스킨들의 경우에는 HTML5를 지원하지 않는 브라우저에서 해당 화면을 봤을때와 그렇지 않을 경우가 많이 발생합니다. 본인의 블로그가 하위 버전의 브라우저와 지금의 브라우저에서 어떤 차이가 나는지를 확인하기 위해서는 이전에 소개해드린 툴(IEtester, MS SuperPreview, Adobe BrowserLab)을 이용하면 되지만 수정하는 방법에 대해서는 알.. 2013. 1. 15. 이전 1 2 3 다음 반응형
