"티스토리 블로그 스킨 만들기"라는 타이틀로 만들고 있는 스킨은 이웃블로거이신 이츠하크님의 요청으로 시작해서 거의 마무리 단계에 있습니다. 지금까지 만든 것으로도 충분히 스킨으로 사용할 수 있으며 메뉴 부분과 각종 아이콘을 삽입만 하면 완료됩니다. 그동안 따라하시는 분들이 어려워하시는 것은 본 스킨 만들기 과정이 제 포스팅의 CSS기초부분을 기반으로 해서 진행된 것이라 스킨만들기부분만 하셔서 그렇습니다. 스킨이 완료되면 공개하려고 하였지만 과정의 중간부분도 중요하다고 생각되어 스킨 만들기 부분만 하시면서 따라하기 어려워하시는 분들을 위해서 지금까지 진행된 부분을 공개하니 참고하세요. 각 단계마다 저장을 해서 공개했어야하는데 미처 생각을 못했군요. 제가 다시 작업하면서 각 과정의 마무리 부분에 그 과정에서..
이번 글에서 진행할 내용은 세가지입니다. 컨테이너 영역 외부에 있던 Footer를 내부로 들여오고 이 footer와 페이징을 CSS기초에서 만든 배경이미지로 둥근 모서리를 만듭니다. 그리고 검색 모듈을 헤더로 이동하고 이미지를 삽입합니다. 검색 박스는 평상시에는 Search라는 단어가 나오고 클릭하면 검색어를 입력할 수 있도록 사라지게 합니다. 이것은 자바스크립트를 사용합니다. 간단한 내용이니 알아두는 것도 좋습니다. 검색버튼은 워드프레스의 아이콘으로 교체할 예정입니다. 그동안 설명이 길어서 마무리가 늦어졌는데 이전 글들과 중복되는 내용들이 있고 그동안의 내용을 잘 파악하시면 바로 할 수 있는 것들입니다. 되도록 간결하게 해서 이 세가지를 이 포스팅으로 끝내고 다음 글에서 각 아이콘을 삽입한 후에 메뉴부..
이전글에서 티스토리 블로그 스킨의 사이드바는 티스토리 고유의 태그를 사용한다고 했습니다. 그 태그란 로 일반적인 html에서 사용하는 태그 괄호를 사용하므로 태그라고 하였지만 실제 명칭은 치환자라고 합니다. 티스토리는 원래 텍스트큐브(or 태터툴즈)라는 블로그 프로그램을 사용하고 있고 현재 설치형 블로그 프로그램으로서도 존재하고 계속 개발되고 있습니다 . 그래서 티스토리 블로그는 텍스트큐브에서 사용되는 치환자를 사용하는데 이 치환자라는 것은 일반적으로 변수나 함수를 말합니다. 대부분의 블로그 프로그램은 php라는 웹프로그래밍 언어를 사용합니다. php에서 임의로 변수나 함수를 만들 수 있으므로 텍스트큐브도 만들어 사용하고 있습니다. 이러한 변수나 함수를 치환자라고 하는 것이죠. 이 치환자가 하는 일은 데..
블로그나 웹사이트는 광고를 다는 것이 보통이죠. 구글 애드센스 광고는 이미지도 좋아서 웹페이지나 블로그에 하나의 장식요소로서의 작용도 합니다. 멋진 이미지가 있는 것과 없는 것은 많은 차이가 납니다. 광고달아 수익도 생기고 웹페이지의 모양도 좋아지니 누구나 달고 있습니다. 하다못해 구글 애드센스 광고 달기 적합한 워드프레스 테마 스킨도 나오는 상황입니다. 광고는 돈 벌려고 하는 목적도 있지만 여러가지 부수적인 효과로 인해서 많은 웹사이트에서 사용하고 있습니다. 구글 애널리틱스를 사용하면 웹사이트 방문자에 대한 분석을 무료로 받을 수 있습니다. 아주 상세하고 어떤 포스팅에 몇명의 방문자가 보았는지도 알 수 있고 각종 자료가 많습니다. 이번 글의 목적은 광고를 다는 것에 있는 것이 아니라 컨텐트 영역과 사이..
이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠. 현재까지 작업한 화면입니다. 헤더부분의 배경이미지가 가로로 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파일을 텍스트 에디터에서 직접 편집할 수 있습니다. 텍스트 에디터에서 편집을 하게 되..
이름이 잘 알려지지 않은 컨텐트 관리시스템(Content Management System, CMS)인 킴스큐 레드블럭입니다. 블로그 뿐만아니라 웹사이트 제작도 가능합니다. WAMP 서버에 설치하고 둘러보니 우선 디자인이 좋은 것 같습니다. 홈페이지에 접속하고 회원가입하면 소셜네트워크 관리가 가능한데 블로그 서비스까지 가능한지는 모르겠네요. 킴스큐는 마이크로소프트와 파트너십을 갖고 있고 공개(Open Source) 소프트웨어 개발자대회에서도 대상을 받는 등 기술력이 있는 회사이고 드루팔, 줌라, 워드프레스를 경쟁상대로 세계적인 시장에 진출할 예정이라고 하니 지켜볼만한 회사로 생각됩니다. 우선 설치를 해보고 어떤지 살펴보는 것이 좋을 것 같습니다. 이곳 을 클릭하면 위 이미지가 나오는 사이트로 이동합니다. ..
텍스트큐브는 제로보드처럼 오랜 한국형 블로그 프로그램중에 하나입니다. 전신인 태터툴스로 시작해서 블로그 서비스인 텍스트큐브닷컴(textcube.com)은 구글과 공동운영하다가 구글에 통합되었고 티스토리는 다음과 공동운영하다가 다음으로 이전되었습니다. 티스토리 홈페이지의 하단에 보면 태터툴즈라는 이름이 아직 남아있습니다. 블로그 프로그램은 니들웍스(Needlworks)에서 계속 개발하고 있고 텍스트큐브닷오그(textcube.org)에서 다운 받을 수 있습니다. 이곳 을 클릭하면 텍스트큐브를 다운 받을 수 있는 텍스트큐브닷오그로 이동합니다. 티스토리를 시작하면서 원래의 프로그램은 어떤지 알아보려고 WAMP 서버에 설치를 하려고 했지만 MySQL 5.5버전과 충돌이 일어나서 설치에 실패를 했는데 텍스트큐브를 ..
이 글에서 WAMP를 사용했는데 설치시 문제점이 있으니 아래 링크에서 오토셋을 설치하고 XE를 설치하세요. http://martian36.tistory.com/1256 익스프레스 엔진(XE)는 대표적인 한국형 블로그 프로그램중에 하나입니다. 전신인 제로보드를 네이버 NHN에서 인수하면서 익스프레스 엔진으로 바뀌었습니다. 요즘은 외국 블로그 프로그램과 경쟁하면서 해외에 진출하기 위해 설치시에 외국어를 선택할 수 있도록 버전업되었습니다. 이 프로그램도 다양한 모듈을 설치해서 단순한 블로그가 아닌 기업형 웹사이트를 제작할 수 있습니다. 이전 글 에서 이러한 블로그 프로그램을 내 컴퓨터에 설치하여 웹호스팅에 업로드하기전에 디자인 제작을 하기 위해 시험가동하는 방법에 대해서 알아보았습니다. 워드프레스를 WAMP ..
드루팔의 강력한 모듈은 아주 다양한 사이트를 만들기에 적합합니다. 드루팔은 블로그 프로그램이지만 블로그를 떠나서 일반 웹사이트, 기업용 웹사이트를 만들어도 손색이 없습니다. 물론 방문자가 아주 많은 포털사이트는 대부분 php가 아닌 asp언어를 사용합니다. 데이터베이스도 커야하기 때문이지요. 드루팔의 명성을 알 수 있는 가장 흔한 예로 백악관 홈페이지가 드루팔로 만들어졌다고 합니다. 그만큼 신뢰성이 있고 대단한 프로그램이기 때문입니다. 이번 글에서는 사용언어를 바꾸는 방법을 알아봅니다. 사용언어란 드루팔 프로그램을 사용하면서 나오게 되는 안내문이라든가 경고문 등, 드루팔을 사용하면서 보이는 글자의 언어를 말합니다. 드루팔은 원래 영어로 만들어져 있지만 세계 각국의 드루팔 사용자들이 자원해서 번역팀을 만들..
처음에 웹디자인을 공부하면서 프로그래밍 언어를 php프로그램으로 정하고 이제 좀 재밋다 싶을때 알게된 블로그 프로그램이 드루팔이었습니다. php 언어로 만들어진 블로그 프로그램이 많더군요. 대표적인 것이 외국의 경우 워드프레스, 줌라, 드루팔이고 국내에서는 그누보드, XE엔진(제로보드), 태터툴즈가 있습니다. 워드프레스는 사용이 쉽기 때문에 세계적으로 수천만개의 프로그램이 블로그로 사용되고 있습니다. 처음 블로그를 공부하기엔 쉬운 프로그램이므로 많이 접근하는 프로그램이죠. 하지만 좀 지나고 보면 좀더 어렵고 다양한 모듈이 있는 프로그램을 찾게 되는데 그것이 드루팔입니다. 드루팔은 개발자들이 선호하는 프로그램이라서 모듈만해도 수천개나 개발이 되어있고 드루팔 전용 모듈이 아니라 해도 드루팔이 워낙에 인기가 ..
오늘날짜로 추가된 관리센터의 기능을 사용하는 방법을 알아봅니다. 우선 다음뷰 송고방법 기능이 개선되었는데 글 작성후 항상 view 분류선택을 해야했었는데 까먹거나 하면 다음뷰로 보내지지도 않았죠. 하지만 이제 설정만 해 놓으면 내 글을 어떤 카테고리에 넣을 것인지만 선택하면 자동으로 view 분류선택에서 다음뷰로 보내질 항목이 추가됩니다. 다음으로 기능이 개선된 것은 관리센터 화면에 두가지의 모듈이 추가 되었습니다. 하나는 기존에 있던 것을 전면에 배치한 것이고 다른 하나는 새로운 모듈인데 글과 관련해서 새로운 메일이나 총 포스팅 수, 댓글수, 방명록 글 수 등 글의 갯수를 한눈에 볼 수 있어서 편리한 기능입니다. 1. 다음뷰 송고방법 설정하기 내 블로그 메뉴에서 Admin을 클릭하면 관리센터로 오게 됩..
안녕하세요. 오늘은 티스토리 블로그를 처음 사용하게 되면 궁금한 점 중에 초기화면인 HOME페이지 설정하는 방법을 알아보겠습니다. 대부분의 블로그는 블로그 글내용에 중점을 두기 때문에 디자인이라든가 초기화면의 필요성에 대해서는 크게 신경을 안쓰는 상황입니다. 블로그에 들어오는 경우는 포털 사이트에서 검색어를 통해 링크를 클릭하여 들어와서 하나의 글을 보고 바로 나가는 경우가 대부분이라서 방문자가 블로그의 초기화면을 본다든가 다른 글을 검색한다든가 하는 추가적인 글보기를 하지 않게됩니다. 그래서 사이드바에 보기 쉽게 카테고리를 배치하거나 최근글 목록, 인기글 목록을 배치하면 관심을 끌 수도 있습니다. 블로그에서 초기화면의 필요성에 대해서는 혹자는 위에서 예를 든 것처럼 글 하나만 달랑 보고 나가는 방문자님..