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

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

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

cfile8.uf.114884464F25084D03A702.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> 태그 안의 내용을 추가하면 위아래로 늘어나게 됩니다. 

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

cfile9.uf.184267374F2535DE1A0A47.zip

 

Related posts:

  1. HTML/CSS 기초 – 하나의 이미지를 이용하여 상하좌우로 무한대로 늘어나는 배경이미지 만들기 One image flexible rounded corner Background 그동안 둥근 모서리의 배경이미지 만들기에서는 3개 이상의 이미지가 필요하였는데 하나의 이미지로 상하좌우로 무한대로 늘어나는 배경이미지를 만들기를 시도해 보았는데 가능하게 되서...
  2. HTML/CSS 기초 – 미니 웹사이트 만들기 9 – Float 속성을 이용한 레이아웃 2 이전 글에서 float와 clear의 기본적인 사용법을 알아보았습니다. 이번 글에서는 미니 웹사이트에서 실제로 어떻게 적용되는지 알아보겠습니다. 그리고 웹사이트 만드는데 있어서 사용되는...
  3. HTML/CSS 기초 – 상하좌우로 늘어나는 둥근 모서리 박스(Flexsible Rounded Corner Box) 이미지 만들기 이전 글 에서 만든 박스이미지는 상하로만 늘어나는 배경이미지입니다. 상단과 하단의 이미지는 고정되지만 늘어나는 중간영역은 글이 늘어나면서 같이 늘어나는 배경 속성의...
  4. HTML/CSS 기초 – 배경 속성 (Background Property) 사용하기  그동안의 포스팅은 CSS에서 기본이 되는 레이아웃에 관한 글이었습니다. CSS는 레이아웃에 관한 테크닉이므로 레이아웃에 관한 글을 먼저 포스팅했고 이를 먼저 알게...
  5. HTML/CSS 기초 – 무한대로 늘릴 수 있는 둥근 모서리(Flexible Rounded Corner Box) 배경이미지 만들기 이번 글에서는 실제로 사용하기 위한 배경 이미지 박스를 만들어봅니다. 워드프레스 테마 스킨을 티스토리 스킨으로 변경하는 과정에서  가장 중요한 부분이 테두리가...

댓글 남기기