사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스 선택자를 사용하여 시작태그 부분과 마감태그 부분만 삽입하고 CSS에서는 클래스 선택자를 사용하므로 한번만 적용하면 되니까 컨텐트 영역보다는 쉽습니다. 여러개의 모듈이 사이드바에 배치되어있습니다. 티스토리 블로그는 관리센터의 사이드바 메뉴에서 원하는 모듈을 제거하거나 추가할 수 있습니다. 최근에는 구글 광고가 가로세로 200픽셀과 250픽셀의 정사각형 크기가 추가되어 좁은 사이드바에도 추가할 수 있게 되었습니다. 1. HTML코드 삽입하기 html 편집 창에서 사이드바 부분을 수정하기 위해서는 코드의 구조를 알..

스킨을 만들때는 방문자를 항상 우선 생각해야하므로 가능한한 모든 웹브라우저를 설치해서 시험해봐야하지만 최소한 5대 브라우저(인터넷 익스플로러, 구글 크롬, 파이어폭스, 애플 사파리, 오페라)는 설치해 놓는 것이 좋습니다. 최근에는 구글 크롬의 사용자가 많이 늘었죠. 웹브라우저는 옛날 버전도 시험해봐야하는데 모든 버전을 설치해서 사용할 수 없으니 이를 시험할 수 있는 사이트에서 URL을 입력하면 어떻게 보이는지 알 수 있습니다. 이곳 을 클릭하면 무료로 시험할 수 있는 사이트로 가는데 스크린샷을 보려면 한참 기다려야합니다. 유료로 사용하면 바로 확인이 가능하죠. 시험삼아 해보는 것도 좋겠습니다. 1에 사이트 주소를 입력하고 2의 None버튼을 클릭하면 3의 SeaMonkey를 제외하고 체크되어 있는 곳이 ..

이전 글 에서 티스토리 스킨을 만들기 위한 환경 설정에 대해서 알아보았습니다. 두가지 방법이 있었는데 가능한한 텍스트큐브를 WAMP서버에 설치하고 작업하는 것이 좋습니다. 코드찾기나 코딩하는데 편리하고 글자도 크게 볼 수 있기 때문이죠. 이전 글에서 견본으로 제시한 워드프레스 테마 스킨은 중요한 부분이 둥근 모서리 배경이미지입니다. 어려운 작업이기 때문에 CSS기초부분에서 4개의 포스팅을 올렸습니다. 이곳을 먼저 보신 후에 진행하시면 이해가 빠릅니다. 웹사이트 만들기에서 웹브라우저의 선택도 아주 중요합니다. 개발자도구라는 것이 있어서 어떤 부분을 수정할지 찾기 쉽기 때문이죠. 이 개발자도구는 처음에 파이어폭스의 파이어버그(Fire Bug)로 시작해서 이제는 모든 웹브라우저에 기본적으로 추가되어있습니다. ..

이번 글에서는 실제로 사용하기 위한 배경 이미지 박스를 만들어봅니다. 워드프레스 테마 스킨을 티스토리 스킨으로 변경하는 과정에서 가장 중요한 부분이 테두리가 있는 둥근 모서리 이미지입니다. 마침 이웃 블로거이신 이츠하크님의 요청으로 워드프레스테마를 티스토리 스킨으로 변경하는 작업을 포스팅하려고 했습니다. 변경하고자 하는 워드프레스 테마는 CSS3에서 소개된 border-radius 속성을 사용하고 있죠. 이 테마를 사용하면 아직도 많은 사람이 사용하고 있는 IE8 이전 버전에서는 둥근 모서리가 나오지 않고 각진 모서리가 나오게 됩니다. 왜냐하면 인터넷 익스플로러는 이 속성이 IE9에서만 가능하기 때문이죠. 그러니 이 속성을 사용해봐야 아직도 IE8 이전 버전을 사용하는 방문자는 내가 원하는 디자인으로 보..

이전 글 에서 만든 박스이미지는 상하로만 늘어나는 배경이미지입니다. 상단과 하단의 이미지는 고정되지만 늘어나는 중간영역은 글이 늘어나면서 같이 늘어나는 배경 속성의 repeat-y 값을 이용합니다. 그러면 좌우로 늘어나는 이미지는 repeat-x 값을 사용하면 되지만 포토샵으로 이미지를 새로 만들어야합니다. 이 방법은 상하좌우로 글의 내용에 따라서 늘어나지만 컨텐트 영역이 상하로 아주 길어지는 부분에서는 늘어나는 만큼의 이미지를 포토샵으로 만들어야하므로 포토샵으로 세로 20,000픽셀 이상의 이미지를 만들어야하는 번거로운 점이 있습니다. 먼저 글보다 이미지도 하나가 늘어납니다. 또 하나의 방법은 상하좌우로 늘어나면서 작은 이미지를 사용하면 큰 이미지를 사용해야하는 부담은 없지만 8개의 이미지를 사용해야하..

CSS3를 이용하면 블럭요소의 모서리가 둥글게 하거나 그림자를 만들 수도 있습니다. CSS3는 몇년전부터 사용되었지만 모든 웹브라우저에 적용되는 것은 아닙니다. 제가 CSS에 관해서 포스팅하면서 자주 인터넷 익스플로러을 언급하는데 이번에도 어쩔 수 없이 언급할 수 밖에 없습니다. 다른 웹브라우저는 다 지원하지만 그렇지 못한 것이 IE 시리즈이기 때문입니다. 위 기능들은 IE9버전에서만 지원하며 아직도 우리나라의 상황에서는 많은 사람들이 IE8 이전 버전을 사용하고 있을겁니다. 그렇다면 아무리 편하고 좋은 CSS3를 사용해서 웹디자인을 한다해도 별 쓸모가 없게 됩니다. 그래서 사용하는 것이 포토샵으로 모서리가 둥근 이미지를 만들고 그림자도 만들어서 배경이미지로 사용해야하는 것이죠. 배경이미지를 사용하지 않..

그동안의 포스팅은 CSS에서 기본이 되는 레이아웃에 관한 글이었습니다. CSS는 레이아웃에 관한 테크닉이므로 레이아웃에 관한 글을 먼저 포스팅했고 이를 먼저 알게 되면 웹페이지를 전반적으로 볼수 있는 능력이 길러지게 됩니다. 즉 숲을 볼수 있는 것이죠. 이제부터는 레이아웃에서 세부적으로 들어가 나무를 심는 작업을 하게 됩니다. CSS를 사용하지 않던 시절에는 모든 이미지가 html의 태그를 사용하여 이미지를 웹페이지에 삽입하였지만 중요하지 않은 이미지도 장식용으로 나타나는 단점이 있었습니다. 웹페이지에서 이미지를 사용하는 방법은 html의 를 사용하는 방법과 CSS의 background 속성을 사용하는 방법이 있습니다. 두가지 방법의 차이는 웹페이지의 컨텐트에 속하느냐 아니면 장식용으로만 사용하느냐의 차..

이미지의 배경이나 웹사이트의 배경으로 사용할 수 있는 다양한 패턴을 무료로 만들어 png파일로 다운로드 받을 수 있는 사이트를 소개합니다. 아주 많은 패턴이 있고 하나의 패턴이라도 수백가지의 다양한 컬러로 미리볼 수 있고 원하는 색상을 선택하여 바로 다운로드가 가능합니다. 링크 위 링크를 클릭하여 사이트로 이동합니다. 패턴을 선택하면 다음페이지로 넘어갑니다. 1의 슬라이더에서 색상을 선택하고 2에서 채도를 선택하면 3에서 미리보기가 됩니다. 4에서 다른 패턴을 선택할 수도 있습니다. 5의 버튼을 클릭하면 선택한 패턴에 대해서 다양한 색상으로 뒤에 미리보기가 펼쳐집니다. 6의 버튼을 클릭하면 만들어진 패턴을 미리보기, 사이즈변경, 다운로드할 수 있는 페이지로 갑니다. 1을 클릭하면 화면을 채우는 큰 사이즈..

한글폰트는 영문폰트에 비해서 양이 많지 않으니 찾기 수월하지만 영문의 경우는 아주 어렵습니다. 비슷한 폰트들도 많고 양도 많아서 원하는 폰트를 찾기가 쉽지 않죠. 해외 영문폰트 사이트 중에 이미지를 스캔하거나 기존의 폰트가 있는 이미지를 업로드해서 검색해주는 사이트가 있습니다. 하지만 모든 폰트를 보유하고 있는 것이 아니어서 업로드한 폰트중 50%정도는 찾을 수가 있습니다. 더구나 이미지가 선명하고 검색조건에 맞는다면 폰트를 찾을 확률이 높아집니다. 어떤 경우는 일러스트레이터로 이미지를 만들어서 업로드하면 원하는 답을 찾을 수가 있습니다. 또한 웹페이지 주소를 입력해도 폰트를 찾을 수 있습니다. 가장 기본적인 업로드 이미지 조건은 폰트의 간격이 좀 떨어져 있어야하고 높이가 100px이상이면 됩니다. 배경..

티스토리 스킨을 만들기 위해서는 환경을 만들어야합니다. 티스토리 블로그는 원래 태터툴즈 블로그를 기반으로 하기 때문에 태터툴즈 블로그 프로그램을 사용하여 환경을 만들 수도 있고 티스토리 자체에서 별도의 블로그를 개설하여 만들 수도 있습니다. 티스토리는 1계정당 5개까지 블로그를 만들 수 있기 때문에 하나는 운영하는 블로그로, 다른 하나는 시험용 블로그로 운영할 수도 있습니다. 1. 환경 만들기 어떤 방법이 편한지는 두가지가 일장일단이 있습니다. 우선 태터툴즈를 이용하면 WAMP 서버환경 을 만들고 태터툴즈 블로그 프로그램을 설치하는 번거로움이 있지만 스킨을 만들기 위한 중요파일인 skin.html 파일과 style.css파일을 텍스트 에디터에서 직접 편집할 수 있습니다. 텍스트 에디터에서 편집을 하게 되..

어떤 레이아웃이든지 3단의 레이아웃을 만들기는 까다롭습니다. 두개의 사이드바가 어느 한쪽으로 붙어있다면 기존의 2단 레이아웃을 수정해서 사이드바영역 안에 두개의 사이드바를 만들면 간단하게 해결되지만 사이드바가 양쪽으로 나누어지면 약간 복잡해지죠. 우선 하나의 사이드바 안에 두개의 사이드바를 만들어서 어느 한쪽으로만 사이드바가 두개 있는 레이아웃을 만들어보고 두개의 사이드바가 양쪽으로 나누어지는 레이아웃을 만들어봅니다. 1. 두개의 사이드바를 한쪽에 배치 압축파일을 풀고 텍스트에디터에 두개의 파일을 열면 위와같이 이전 글에서 사용한 내용이 나옵니다. 이것을 시작으로 사이드바를 두개를 만들어봅니다. 요령은 html에서 1을 복사하여 아래에 붙여넣고 CSS에서는 2를 복사하여 아래에 두번 붙여넣습니다. 아래의..

유동폭 레이아웃은 컨텐트가 화면 전체를 채우게 되므로 요즘의 와이드 모니터가 많이 사용되고 있는 때에는 가독성이 떨어지므로 잘 사용하지 않습니다. 하지만 일정범위 안에서는 유동폭 레이아웃이 되도록 하고 그 범위를 넘어서면 고정폭 레이아웃이 되도록하는 방법도 사용됩니다. 이번글에서는 그동안의 내용을 되새기는 의미에서 하나씩 집어가면서 유동폭 레이아웃에 대해서 알아봅니다. 1. 유동폭 2단 레이아웃 압축파일을 풀면 두개의 파일이 있습니다. 하나는 웹페이지에서 컨텐트를 담당하는 html 파일이고 하나는 프리젠테이션을 담당하는 CSS파일입니다. 두개의 파일을 연결해주기 위해서 6번째 줄에서 link 를 사용합니다. 참조 파일의 이름은 CSS파일의 이름과 일치해야합니다. 웹페이지는 크게 4부분으로 나누어집니다. ..

어도비 크리에이티브 스위트(Adobe Creative Suite)프로그램 중에서 유독 한글버전으로 사용해야하는 프로그램이 있다면 인디자인일 것입니다. 다른 프로그램은 한글보다는 영어버전으로 사용하는 것이 좋은 것은 대부분의 강좌가 영어버전으로 만들어지기 때문이죠. 어도비 CS 프로그램이 업그레이드되어 처음 나오게 되면 한글 버전은 늦게 나오기 때문에 책을 만들때 영어로된 화면을 캡쳐해서 사용하게 됩니다. 또한 외국 강좌를 보려면 한글 버전으로 따라하기가 힘들죠. 메뉴가 서로 다른 언어로 되어있으면 어떤 것을 선택해야할지 위치로만 파악되기 때문입니다. 이것은 한글로 된 강좌를 영어로 된 프로그램으로 따라하는 것이 힘든 것과 마찬가지입니다. 영어 메뉴의 명칭을 한글 메뉴로 번역한 것이 참 어색한 용어도 있습..

이전 글에서 레이아웃의 종류로 고정폭과 유동폭에 대해서 알아보았습니다. 대부분의 블로그나 웹사이트에서는 고정폭 레이아웃을 사용합니다. 요즘은 모니터화면이 와이드로 나오기 때문에 유동폭 레이아웃을 사용하면 컨텐트가 화면에 꽉 차게 나오므로 글을 읽기가 힘들죠. 특수한 경우, 예를 들면 포털 사이트에서 검색어를 입력하고 엔터키를 치면 들어가는 페이지의 경우는 유동폭 레이아웃을 사용합니다. 컨텐트가 좌우로 꽉차게 나오죠. 하지만 화면을 줄이다보면 일정 범위까지는 컨텐트 영역이 좌우로 줄어들지만 그 범위를 넘어서면 고정폭으로 전환되어 더이상 줄어들지 않습니다. 이번 글에서는 고정폭 2단(Two Columns)과 3단 레이아웃에 대해서 설정하는 방법을 알아봅니다. 2단 레이아웃은 컬럼이 두개만 있기때문에 CSS에..

블로그나 웹사이트를 만들기 위해서는 가장 먼저 생각해야하는 것이 레이아웃입니다. 가입형 블로그를 개설하거나 티스토리 같은 서비스형 블로그를 개설하더라도 가장 먼저 선택을 하는 것이 이미 만들어진 블로그 스킨을 선택하게 되는데 스킨의 레이아웃이 어떤 것인지를 먼저 결정해야합니다. 스킨의 레이아웃의 형태는 1단, 2단, 3단 레이아웃이 있으며 이것은 본문의 열(Column)이 몇개 있느냐에 따른 분류입니다. 본문의 열이 여러개인 경우는 중요한 컨텐트부분이 하나가 있고 나머지는 사이드바가 됩니다. 물론 컬럼이 하나인 경우는 사이드바가 없고 사이드바에 들어갈 내용은 푸터(Footer)에 위치하게 됩니다. 또한 레이아웃은 고정폭(Fixed Width)인가 유동폭(Liquid Width)인가에 따라서도 분류됩니다...

다폰트에 최근에 올라온 폰트입니다. 1. Fusty Luggs 개인용 상업용 무료입니다. 2. Herbert 개인용 상업용 무료입니다. 3. Musicos Variant Comics 개인용 상업용 무료지만 기부할 수 있는 Shareware버전입니다. 4. NeoBulletin Trash 개인용 무료입니다. 5. Wiffles 개인용 상업용 무료입니다. 6. Rum Bubber 개인용 상업용 무료입니다.