웹페이지를 만들면 주로 CSS로 레이아웃을 하기 때문에 포토샵으로 만든 이미지는 잘 사용하지 않습니다. 그래도 특수한 경우 작은 이미지를 사용해서 상하로 반복될 수 있는 이미지를 삽입하면 원하는 효과를 얻을 수 있습니다. 이번 글에서는 제 블로그의 방문자님이 궁금해 하는 내용으로 오랫만에 HTML/CSS에 관한 글을 올려봅니다. 우선 이 글의 제목을 보면 금방 이해가 힘들므로 그림을 보면서 무슨 의미인지 알아보겠습니다. 간단한 구조의 웹사이트 레이아웃입니다. 현재 상황을 보면 컨텐트와 사이드바 사이에 선이 그려져 있습니다. 두 곳의 배경 색상도 다르죠. 대부분의 경우 위와같은 레이아웃을 만들려면 두 개의 요소의 높이가 같아야합니다. 하지만 두개의 요소의 내용이 항상 같을 수는 없죠. 컨텐트 영역의 내용이..
웹디자인에서 레이아웃은 포토샵이나 일러스트레이터 등 그래픽 디자인 프로그램에서 미리 청사진을 만들고 이미지를 잘라서 웹페이지에 적용하게 됩니다. 그러자면 우선 해야할 일이 안내선을 그려야하는데 규격에 맞춰 그리는 것이 여간 어려운게 아닙니다. 960gs는 여러가지 그래픽 프로그램에 적용할 수 있는 그리드 시스템을 미리 만들어 놓아서 아주 편리하게 이용할 수 있습니다. 포토샵, 일러스트레이터, 인디자인, 플래시, 파이어웍스, 쿽익스프레스, 코렐드로우, 김프, 비지오, 픽셀메이트, 에이콘, 잉크스케이프, 발사믹, 옴니그래플, 익스프레션 디자인 등 아주 다양한 프로그램의 템플릿을 제공하고 있습니다. 처음들어본 프로그램도 몇개 있네요. 압축파일을 풀면 템플릿 폴더에 다 들어가 있습니다.각 프로그램 별로 12,1..
웹페이지 작업시 가장 먼저 하게 되는 것이 웹페이지에 대한 설계인데 미리 종이나 포토샵을 이용해서 그림을 그려서 전체적인 규모와 배치를 하게 됩니다. 포토샵을 이용하면 색상과 효과를 쉽게 적용할 수 있어서 편리하므로 대부분의 설계단계에서는 포토샵을 이용합니다. 레이아웃에 있어서 피해야할 것은 전통적으로 페이지레이아웃을 테이블태그를 이용했는데 이 방식은 CSS가 배우기 어렵고 브라우저마다 특성이 있어서 페이지를 나타내는 방식이 다르다보니 한동안 레이아웃의 표준으로 자리를 잡았었고 아직도 이방식을 이용하고 있습니다. 하지만 컬럼을 하나 추가한다든가 좌우의 컬럼을 서로 바꾼다든가 하는 페이지를 수정한다거나 할때 수정이 아니라 처음부터 다시 작업하는게 나을 정도로 테이블레이아웃 방식은 수정하기가 어렵습니다. 하..