이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠. 현재까지 작업한 화면입니다. 헤더부분의 배경이미지가 가로로 repeat되고 있어서 지저분합니다. 워드프레스 테마스킨에는 이곳에 아무것도 없으니 이미지를 제거합니다. 이부분은 스킨위자드를 사용하고 있기 때문에 스킨위자드 설정창에서 제거합니다. 사이드바의 모듈박스는 제목과 상단부분이 많이 떨어져 있어서 세로 폭을 줄여야하고 박스와 박스 사이의 간격이 좁아서 늘려줘야합니다. 구글광고는 컨텐트영역 상단에 728X90 사이즈의 리더보드를 달것이고 사이드바 상단에 250X250 사이즈의 정사각형 광고를 달 것입니다. 사이드바 박스가 264픽셀이라고 좀 작은 느낌이 드는데 포토샵으로 수정한 이미..
사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스 선택자를 사용하여 시작태그 부분과 마감태그 부분만 삽입하고 CSS에서는 클래스 선택자를 사용하므로 한번만 적용하면 되니까 컨텐트 영역보다는 쉽습니다. 여러개의 모듈이 사이드바에 배치되어있습니다. 티스토리 블로그는 관리센터의 사이드바 메뉴에서 원하는 모듈을 제거하거나 추가할 수 있습니다. 최근에는 구글 광고가 가로세로 200픽셀과 250픽셀의 정사각형 크기가 추가되어 좁은 사이드바에도 추가할 수 있게 되었습니다. 1. HTML코드 삽입하기 html 편집 창에서 사이드바 부분을 수정하기 위해서는 코드의 구조를 알..
스킨을 만들때는 방문자를 항상 우선 생각해야하므로 가능한한 모든 웹브라우저를 설치해서 시험해봐야하지만 최소한 5대 브라우저(인터넷 익스플로러, 구글 크롬, 파이어폭스, 애플 사파리, 오페라)는 설치해 놓는 것이 좋습니다. 최근에는 구글 크롬의 사용자가 많이 늘었죠. 웹브라우저는 옛날 버전도 시험해봐야하는데 모든 버전을 설치해서 사용할 수 없으니 이를 시험할 수 있는 사이트에서 URL을 입력하면 어떻게 보이는지 알 수 있습니다. 이곳 을 클릭하면 무료로 시험할 수 있는 사이트로 가는데 스크린샷을 보려면 한참 기다려야합니다. 유료로 사용하면 바로 확인이 가능하죠. 시험삼아 해보는 것도 좋겠습니다. 1에 사이트 주소를 입력하고 2의 None버튼을 클릭하면 3의 SeaMonkey를 제외하고 체크되어 있는 곳이 ..
이전 글 에서 티스토리 스킨을 만들기 위한 환경 설정에 대해서 알아보았습니다. 두가지 방법이 있었는데 가능한한 텍스트큐브를 WAMP서버에 설치하고 작업하는 것이 좋습니다. 코드찾기나 코딩하는데 편리하고 글자도 크게 볼 수 있기 때문이죠. 이전 글에서 견본으로 제시한 워드프레스 테마 스킨은 중요한 부분이 둥근 모서리 배경이미지입니다. 어려운 작업이기 때문에 CSS기초부분에서 4개의 포스팅을 올렸습니다. 이곳을 먼저 보신 후에 진행하시면 이해가 빠릅니다. 웹사이트 만들기에서 웹브라우저의 선택도 아주 중요합니다. 개발자도구라는 것이 있어서 어떤 부분을 수정할지 찾기 쉽기 때문이죠. 이 개발자도구는 처음에 파이어폭스의 파이어버그(Fire Bug)로 시작해서 이제는 모든 웹브라우저에 기본적으로 추가되어있습니다. ..
티스토리 스킨을 만들기 위해서는 환경을 만들어야합니다. 티스토리 블로그는 원래 태터툴즈 블로그를 기반으로 하기 때문에 태터툴즈 블로그 프로그램을 사용하여 환경을 만들 수도 있고 티스토리 자체에서 별도의 블로그를 개설하여 만들 수도 있습니다. 티스토리는 1계정당 5개까지 블로그를 만들 수 있기 때문에 하나는 운영하는 블로그로, 다른 하나는 시험용 블로그로 운영할 수도 있습니다. 1. 환경 만들기 어떤 방법이 편한지는 두가지가 일장일단이 있습니다. 우선 태터툴즈를 이용하면 WAMP 서버환경 을 만들고 태터툴즈 블로그 프로그램을 설치하는 번거로움이 있지만 스킨을 만들기 위한 중요파일인 skin.html 파일과 style.css파일을 텍스트 에디터에서 직접 편집할 수 있습니다. 텍스트 에디터에서 편집을 하게 되..
오늘날짜로 추가된 관리센터의 기능을 사용하는 방법을 알아봅니다. 우선 다음뷰 송고방법 기능이 개선되었는데 글 작성후 항상 view 분류선택을 해야했었는데 까먹거나 하면 다음뷰로 보내지지도 않았죠. 하지만 이제 설정만 해 놓으면 내 글을 어떤 카테고리에 넣을 것인지만 선택하면 자동으로 view 분류선택에서 다음뷰로 보내질 항목이 추가됩니다. 다음으로 기능이 개선된 것은 관리센터 화면에 두가지의 모듈이 추가 되었습니다. 하나는 기존에 있던 것을 전면에 배치한 것이고 다른 하나는 새로운 모듈인데 글과 관련해서 새로운 메일이나 총 포스팅 수, 댓글수, 방명록 글 수 등 글의 갯수를 한눈에 볼 수 있어서 편리한 기능입니다. 1. 다음뷰 송고방법 설정하기 내 블로그 메뉴에서 Admin을 클릭하면 관리센터로 오게 됩..
안녕하세요. 오늘은 티스토리 블로그를 처음 사용하게 되면 궁금한 점 중에 초기화면인 HOME페이지 설정하는 방법을 알아보겠습니다. 대부분의 블로그는 블로그 글내용에 중점을 두기 때문에 디자인이라든가 초기화면의 필요성에 대해서는 크게 신경을 안쓰는 상황입니다. 블로그에 들어오는 경우는 포털 사이트에서 검색어를 통해 링크를 클릭하여 들어와서 하나의 글을 보고 바로 나가는 경우가 대부분이라서 방문자가 블로그의 초기화면을 본다든가 다른 글을 검색한다든가 하는 추가적인 글보기를 하지 않게됩니다. 그래서 사이드바에 보기 쉽게 카테고리를 배치하거나 최근글 목록, 인기글 목록을 배치하면 관심을 끌 수도 있습니다. 블로그에서 초기화면의 필요성에 대해서는 혹자는 위에서 예를 든 것처럼 글 하나만 달랑 보고 나가는 방문자님..
티스토리는 다음 커뮤니케이션에서 운영되는 서비스형 블로그입니다. 다음커뮤니케이션이 설치형 블로그 프로그램 메이커인 태터툴즈와 공동으로 운영하다가 2007년에 운영권이 다음으로 넘어오면서 서비스형 블로그로 전환되었습니다. 블로그는 크게 세가지가 있는데 네이버, 다음, 블로거닷컴 등 가입만하면 바로 운영이 가능한 블로그를 가입형 블로그라고 하고 블로그 프로그램을 웹호스팅에서 서버를 임차하여 설치하는 블로그를 설치형 블로그, 티스토리와 같이 가입하고 프로그램을 HTML과 CSS를 이용해서 원하는대로 디자인을 바꿀 수 있는 가입형과 설치형의 결합형을 서비스형 블로그라고 합니다. 이렇게 설치형 블로그가 다음에서 운영되기 때문에 다음에서 운영하는 블로거들을 위한 공식 블로그가 있는데 이를 "다음뷰"라고 합니다. 이..
내글에 누가 댓글을 달았는지 알려면 우선 확인할 수 있는 곳이 사이드바에 있는 "최근에 올라온 댓글(Recent Comment)"입니다. 사이드바의 설정은 관리자메뉴에서 할 수 있습니다. 그 다음으로 티스토리 블로그를 운영하면서 가장 많이 찾는 페이지는 관리자(Admin)페이지입니다. 이곳은 자신의 블로그에 관한 통계나 설정을 할 수 있는 곳으로 오늘은 누가 댓글을 달았는지 방명록에 글을 남겼는지 어떤 새로운 글이 올라왔는지 내글에 추천은 얼마나 했는지 모든 것을 한번에 알 수 있는 곳입니다. 우선 댓글에 관한 내용을 올려봅니다. 질문을 올리신 진짜사나이님의 블로그는 사이드바가 없고 하단에 푸터(Footer)에 모든 요소가 있습니다. 대부분의 경우는 사이드바에 카테고리나 댓글목록 등 여러가지 항목이 있는..
CSS에서 position:fixed; 속성은 어떤 요소를 화면에 고정시키고 스크롤해도 그대로 있게 만듭니다. 이 포지션 속성에 다른 추가속성인 위치속성을 부여하면 화면에서 요소의 위치를 변경할 수 있습니다. position:fixed의 속성과 이를 이용해서 티스토리 블로그의 다음뷰 뷰온 버튼을 추가하고 이를 화면에서 고정되어 나오도록하는 방법을 알아봅니다. HTML과 CSS를 편집할 수 있는 설치형블로그만 가능하고 네이버같은 가입형 블로그는 안됩니다. 1. 컴포우저(Kompozer) 코드 에디터의 사용 무료 HTML 에디터인 컴포우저(Kompozer)를 다운 받아 설치합니다. 한글도 지원하고 필요한 기능이 많은 편집기입니다. 설치후 열면 다음과 같은 창이 나옵니다. 간단한 편집만 할 것이므로 1,2,3..