이번 글에서는 실제로 사용하기 위한 배경 이미지 박스를 만들어봅니다. 워드프레스 테마 스킨을 티스토리 스킨으로 변경하는 과정에서 가장 중요한 부분이 테두리가 있는 둥근 모서리 이미지입니다. 마침 이웃 블로거이신 이츠하크님의 요청으로 워드프레스테마를 티스토리 스킨으로 변경하는 작업을 포스팅하려고 했습니다. 변경하고자 하는 워드프레스 테마는 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을 클릭하면 화면을 채우는 큰 사이즈..

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

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

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

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

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

이전 글에서 float와 clear의 기본적인 사용법을 알아보았습니다. 이번 글에서는 미니 웹사이트에서 실제로 어떻게 적용되는지 알아보겠습니다. 그리고 웹사이트 만드는데 있어서 사용되는 파일이 늘어나면 관리하기가 어려워지므로 폴더를 만들어 서로 비슷한 성격을 가진 파일을 한데 모아서 관리하면 편리하므로 파일관리시 반드시 사용하게 되는 절대주소와 상대주소에 대해서도 알아봅니다. 우선 이번 글에서 사용할 파일을 다운 받습니다. 이 파일에는 아래 이미지처럼 사진이미지가 있고 빈 폴더가 있습니다. 이전까지는 html 파일과 스타일시트 파일만 있어서 간단한 구조이므로 파일관리가 필요하지 않았지만 이미지가 늘어나거나 제이쿼리 파일이 첨부되면 루트폴더가 복잡해집니다. 그래서 같은 종류의 파일은 폴더를 만들어서 이동해..

이전 글에서 본문 영역에서 컨텐트와 사이드바를 좌우로 정렬할때 float: left;와 float: right; 라는 속성과 값을 사용하여 컨텐트 영역은 좌측에 사이드바 영역은 우측에 배치를 했습니다. float라는 말은 영어로 띄운다는 뜻으로 웹페이지상에서 이 속성을 사용하면 해당 요소는 붕 뜨게 되고 포지션에서 절대위치와 같은 효과가 나타납니다. 그래서 어떤 요소에 float를 사용한 경우 다른 요소와 겹치게 되는데 이를 방지하기 위해 뒤따라오는 요소를 clear라는 속성으로 겹치지 않게 합니다. 이번글에서는 이러한 float라는 속성과 clear라는 속성을 이용하여 여러가지 요소에 대해 다양한 레이아웃을 하는 방법을 알아봅니다. float.html파일을 텍스트 에디터에 열면 3개의 id 선택자에 f..

이전 글에서 상대위치(Relative Position)에 대해서 알아보고 제목타이틀에 상대위치를 적용해서 리본만들기를 해보았습니다. 이번 글에서는 포지션의 다른 속성인 절대위치(Absolute Position)를 이용한 포지션 방법과 고정위치(Fixed Position)을 이용해서 html 요소를 화면에 고정시키는 방법을 알아봅니다. 1. 절대위치를 이용한 요소의 포지션 첨부파일을 열어보면 html부분과 CSS부분이 좀 바뀌었습니다. 1은 2부분을 스타일링한 것인데 마우스 스크롤시 화면이 이동되는 것을 보기위한 용도로 삽입한 것입니다. div#third 는 두개의 클래스 div요소를 삽입하고 다시 각각의 요소에 태그로 숫자를 넣었습니다. 우선 이전 글에서 한 내용을 기억을 되살려서 상대위치를 적용해봅니다..

이번 글에서 만들 글제목 부분의 스타일입니다. 예전 글에서 CSS3에서 가능한 그림자효과를 주는 방법을 알아보았습니다 . 또한 글제목에 해당하는 태그에 대해서 배경을 검정색으로 하고 글자색을 흰색으로 하면 위와같이 나오게 됩니다. 그런데 문제는 양쪽 사이드에 있는 삼각형 모양입니다. 이러한 CSS를 이용한 모양을 리본이라고 합니다. 제경우는 제목부분과 그림자를 포토샵으로 만드는게 편해서 그냥 포토샵 이미지를 만들어 붙였는데 여기서는 CSS만을 이용해서 삼각형을 만들어 붙여보도록 하겠습니다. 1. 제목 타이틀 만들기 html 페이지에 클래스 선택자를 사용해서 div 태그를 하나 만듭니다. 마감태그도 만들고 그 사이에 태그로 제목을 입력합니다. 그 아래에 두개의 div을 더 만듭니다. 클래스 선택자를 사용하..

지금 진행하고 있는 글은 CSS에서 레이아웃에 관한 것이 주된 내용입니다. 지금까지를 정리해보면 우선 처음에 레이아웃에서 가장 기본인 블럭요소에 대해서 말씀 드렸고, 두번째로 이 블럭 요소를 타겟팅하는 방법, 세번째로 타겟팅을 효율적으로 하기 위해서는 외부 스타일 시트를 이용한다는 것, 네번째로 레이아웃에서는 빈상자인 태그를 사용한다는 것, 다섯번째로 이 태그라는 상자의 내용물(컨텐트)과 상자와 상자 간의 간격을 맞추기 위해서는 마진(Margin)과 패딩(Padding)을 사용한다는 것, 여섯번째로 마진과 패딩, 보더(Border)의 설정법이었습니다. CSS는 레이아웃에 관한 기술(Technology)입니다. 지금도 일부 웹사이트에서 사용하고 있는 레이아웃인 테이블 방식은 아주 비효율적이며 이방식을 사용..

이전 글에서 마진과 패딩을 적용하는 방법을 간략하게 알아봤는데 이번 글에서는 마진, 패딩, 보더를 적용하는 자세한 방법을 알아보고 미니 웹사이트 작업을 계속 진행합니다. 마진과 패딩은 적용법이 간단하지만 보더의 경우는 장식을 위해서 사용하기 때문에 다양한 스타일이 있고 컬러도 적용할 수 있으므로 내용이 많습니다. 1. 마진과 패딩 적용하는 방법 기본적인 적용법은 마진의 상, 우, 하, 좌의 4면의 속성을 각각 설정하고 값을 입력하는 방법입니다. 패딩도 같은 방법이니 아래에서 margin을 padding으로 교체하면 됩니다. 단위는 주로 px(픽셀)을 사용하지만 pt(포인트;글자크기의 단위), em(마진이 설정되는 곳의 폰트 크기를 기준으로 하는 단위), %를 사용할 수 있습니다. margin-top:10..