테이블을 이용한 예쁜 편지지 만들기

[상록수]

테이블을 이용한 편지지 만들기

테이블을 잘 이용하면 예쁜 편지지를 
만들 수 있습니다.
그 방법에 대해서 알아볼까요?
제가 자주 쓰는 방법으로는
액자 형식을 띄는 테이블의 상단이미지
그리고 
글씨가 써지는만큼 생겨나는 테이블의 중간 이미지
그리고 테이블을 마무리 하는 하단 이미지로 구분 합니다.
물론 댓글 텍스트 에리어에 
배경을 주려면 그것또한 만드는것이 좋지요
즉 테이블의 구조를 잘 이용해서 마치 액자를
사용한듯한 느낌을 주는것이지요
즉
여기 배경이미지로 상단이미지를 넣습니다
여기 배경이미지로 중간이미지를 넣습니다
여기 배경이미지로 하단이미지를 넣습니다
여기서 주의 할점은 img src로 불러오는것이아니라
TD 속성에서 background="이미지주소" 이렇게 되어야한다는것입니다.
그래야 별도의 레이어 없이 글을 맘놓고 쓸 수 있으니까요
이해가 되었으면 슬슬 시작 해 보지요.
1. 먼저 상단 이미지를 그립니다.
잘못그리시더래도 포토샾이나 그림판을 이용해서 한 번 시도 해보세요.
그래도 어려우신분은 인터넷상의 이미지나 본인 사진을 써도 좋습니다.
암튼 시도는 해 봐야 배울 수 있을테니깐요

※저는 포토샾을 이용해서 만들어 보았습니다.
상단이미지
 
테이블 가로크기를 600픽셀 정도를 줄것이므로
이미지의 가로 크기를 600, 세로는 100으로 했습니다.
2. 중간 이미지
중간이미지는 게시물 내용량에 따라 테이블이 연속으로 가도
 어색하지 않아야하니까 양쪽 가장자리는 선명한 무늬를 써도 좋지만
글씨가 들어 가는 중앙쪽은 옅은 색이나 
아주 진한색을 택하는게 좋습니다.
중간이미지

마찬가지로 가로 크기는 600픽셀입니다.

3. 하단 이미지
하단이미지는 주로 상단과 대칭 되는것이 자연스러운관계로
저는 따로 만들지 않고 상단이미지를 포샾에서 뒤집어서
하단이미지로 저장했습니다.

하단이미지


4. textarea용 이미지도 만들어봤습니다.


※ 만들어진 이미지에 보면 상단과 하단 이미지 중앙에 네모 칸이 있지요?
 이건 없어도 됩니다만 어떤 단체나 모임 
멜을 보낼경우 받는이를
표기 해주면 좀 특별해 보이니깐 그 자리에 텍스트를 넣을 수 있게 
조치한것입니다.
자아 그럼 소스를 한 번 만들어 볼까요?

 

[무지개]

자료 감사합니다