HTML/CSS 기초 - 배경 속성을 이용한 모서리가 둥근 이미지 박스 만들기

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

고정폭 이미지를 이용한 둥근 모서리 박스 만들기 

fixed-rounded.zip

압축파일을 풀면 images폴더에 포토샵 파일이 있고 위처럼 3부분을 잘라낸 파일이 3개 있습니다. 위 3가지 이미지를 사용하여 배경이미지를 만들게 됩니다. 이미지를 만들때 배경색을 어떤 색으로 하느냐에 따라서 포토샵에서도 배경색을 정해야합니다. 여기서는 흰색을 사용합니다.

 
html파일을 텍스트 에디터에 열면 위처럼 나옵니다. 간단한 CSS 실험이므로 CSS를 임베디드형태로 작업합니다. <div>태그가 3개 사용되는데 2는 top이미지가 배경으로 들어가고 3은 bottom이미지가 들어가며, 내용이 아래로 늘어나면 박스도 같이 늘어나야하므로 늘어나는 부분의 이미지는 4는 중간이미지가 y축으로 repeat되는 부분입니다.

우선 top-box에 대해서 배경이미지를 삽입합니다. 위와같이 코딩하면 top.gif이미지가 좌측 상단을 기준으로 배경이미지로 들어갑니다. 현재 top-box div에는 아무런 내용이 없기 때문에 배경이미지도 나오지 않습니다. <div class="top-box">아무거나</div>처럼 뭔가 들어가야 배경이미지가 나옵니다. 그래서 padding-top을 적용하면 그제서야 이미지가 나타납니다. 위처럼 하고 웹브라우저에서 보면 아래와 같이 나옵니다.

이번에는 bottom-box에 같은 방법으로 이미지를 다르게 해서 적용하면 하단에 이미지가 나타납니다.

마지막으로 두개의 div 태그를 감싸는 tile-box에 이미지를 삽입합니다. repeat-y라는 값을 추가하였으므로 tile-box 가 내용이 늘어나면 이 배경이미지는 계속 추가되면서 반복됩니다. 또한 내부에 있는 자식요소의 뒷면에 나오기 때문에 상, 하단에 있는 이미지와 결합하여 마치 하나의 이미지처럼 나오게 됩니다. 그러니까 상, 하단의 이미지 뒤에는 tile.gif라는 이미지가 있고 컨텐트의 내용이 늘어나면서 y축으로 반복되어 나타나게 됩니다.

그런데 컨텐트의 내용은 넓이가 정해지지 않았기 때문에 밖에 벗어나 있습니다. 그래서 width를 이미지의 가로사이즈로 정하면 글내용도 이 범위내로 들어오게 됩니다. 

글내용이 들어있는 div에 좌우로 패딩을 줘야될 상황입니다.

양쪽에 패딩값을 20픽셀주니 글이 안쪽으로 좁혀져나와서 보기 좋아집니다. 위 세가지 값을 한줄로 줄일 수 있죠. 단축형을 쓰면됩니다.

  padding: 0 20px 20px 20px;

위처럼 입력하면 됩니다. <p> 태그 안의 내용을 추가하면 위아래로 늘어나게 됩니다. 

위 방식은 글내용이 위아래로만 늘어나고 좌우로 늘어나지 않는 가로사이즈가 정해진 부분에는 사용할 수 있지만 좌우폭을 늘리거나 할때는 적용할 수가 없습니다. 그래서 다른 방법을 사용해야합니다. 다음 글에서 이어집니다. 

fixed-rounded-final.zip