XHTML/CSS 고정폭 이미지 박스 만드는 원리

(도움요청;; ㅜㅜ) 스킨수정 삽질 - 해봤는데..알거같긴한데 잘 안되는군요;; by 블루밍

원리 이해

이미지 박스 처리의 방법은 여러가지가 있습니다.

보통 좌우 고정폭일 경우 위아래로 늘어나는 박스는 두가지 구현방법이 있습니다.

한가지는 ┌┐ 이런 상단 박스 이미지와
││
││이런 모양의 우주 긴 하단 박스 이미지를 결합하여
││
└┘
결과적으로
┌┐
││
└┘ 모양을 만들 수 있습니다만, 이미지 크기에 따라 위아래 폭이 제한되는 단점이 있고 이미지는 단 두개만 쓰이면 되고 역시 이를 감쌀 태그도 두개면 되는 장점이 있습니다.

위아래로 무한대로 늘어나는 박스 처리법은

┌┐상단 ││중간 └┘하단 이미지를 각각 만들어서

상단위에 고정 중간은 위아래로 반복 시키고 하단을 붙이면 됩니다.

┌┐상단
││중간 반복
└┘하단

고정 폭이 아니라 고정 높이의 경우는 이걸 눕힌거라 생각하시면 됩니다.

XHTML/CSS 적용 방식

2개 이미지를 이용한 높이 제한 되는 박스일 경우

이미지 처리를 위한 태그가 하나 더 필요해집니다.

<tag>박스로 감쌀 내용</tag>

라고 되어 있을 경우 XHTML

<tag1>
<tag2>박스로 감쌀 내용</tag2>
</tag1>

의 모습이 되어야 하며 CSS 적용은

Tag1 { 하단 이미지 설정 }, Tag2 { 상단 이미지 설정 }

이런 식으로 하셔야 합니다. 이때 상단 이미지 같은 경우 위쪽 박스 라운드 처리가 투명이면 안됩니다.

3단 구성의 무제한으로 늘어나는 박스 구성의 경우

이것의 경우 여러가지 태그 적용 법이 있겠으나 무난하고 간단한 것 하나만 언급하겠습니다.

<tagTop>상단 내용</tagTop>
<tagPost>박스로 감쌀 내용</tagPost>
<tagBottom>하단 내용</tagBottom>

위와 같이 태그를 구성하고

tagTop { 상단 이미지 설정 }
tagPost { 중간 이미지 위아래 반복 설정 }
tagBottom { 하단 이미지 설정 }

이처럼 CSS 를 설정해야 합니다.


자세한 소스가 들어간 예제는 다음시간에... 할지도 모릅니다.(...)