HTML/CSS 기초 - 상하좌우로 늘어나는 둥근 모서리 박스(Flexsible Rounded Corner Box) 이미지 만들기

이전 글 에서 만든 박스이미지는 상하로만 늘어나는 배경이미지입니다. 상단과 하단의 이미지는 고정되지만 늘어나는 중간영역은 글이 늘어나면서 같이 늘어나는 배경 속성의 repeat-y 값을 이용합니다. 그러면 좌우로 늘어나는 이미지는 repeat-x 값을 사용하면 되지만 포토샵으로 이미지를 새로 만들어야합니다. 이 방법은 상하좌우로 글의 내용에 따라서 늘어나지만 컨텐트 영역이 상하로 아주 길어지는 부분에서는 늘어나는 만큼의 이미지를 포토샵으로 만들어야하므로 포토샵으로 세로 20,000픽셀 이상의 이미지를 만들어야하는 번거로운 점이 있습니다. 먼저 글보다 이미지도 하나가 늘어납니다.

또 하나의 방법은 상하좌우로 늘어나면서 작은 이미지를 사용하면 큰 이미지를 사용해야하는 부담은 없지만 8개의 이미지를 사용해야하고 CSS 코드도 복잡합니다. 하지만 소기의 목적을 이루기 위해서는 어쩔 수 없습니다. 인터넷 익스플로러가 둥근 모서리를 만드는 CSS3의 기능을 IE9 버전에서만 지원하기 때문에 IE8 이전 버전이 아직도 많이 사용되고 있는 상황에서는 앞으로도 몇년동안은 이 방법을 이용해야합니다. 이번 글에서는 두가지 방법중 첫번째 방법에 대해 알아보고 다른 하나는 다음글로 이어집니다.

1. 포토샵으로 이미지 만들기

원하는 사이즈의 새문서를 만듭니다. 여기서는 1000X1000픽셀의 새문서입니다. 둥근모서리의 셰이프툴을 선택하고 옵션바에서 반지름을 입력합니다. 원하는 내부 색상(#f0f0f0)을 선택한 다음 클릭드래그해서 이미지를 만듭니다. 외곽선을 내부 색상보다 진한 색의 1픽셀 두께로 레이어스타일의 테두리 효과를 이용해 만듭니다. 여기서 배경의 색상은 웹페이지에서 위 박스이미지가 배치될 배경의 색상과 동일하게 해줍니다. 이미지의 모서리 부분을 확대합니다.

사각형 선택툴을 선택하고 옵션바에서 스타일을 고정사이즈를 선택, 가로세로 사이즈를 13픽셀 입력한 다음, 아무곳에나 클릭하면 13픽셀의 정사각형으로 선택됩니다. 내부를 클릭드래그하여 4처럼 모서리부분에 위치하도록 이동합니다. 이미지의 외곽선에서 1픽셀씩 벗어나게 해서 배경이미지의 일부도 포함되도록 합니다. Ctrl+Shift+; 키를 눌러 스냅기능을 활성화하고 눈금자(단축키 Ctrl+R)에서 가이드선을 끌어와 4를 기준으로 4면에 배치합니다. 현재 상태에서 메뉴에서 이미지-자르기(Crop)을 선택하면 4의 부분만 남습니다. Ctrl+Shift+S키를 눌러 top-right.gif로 저장합니다. Ctrl+Alt+Z키를 누르면 이전 단계로 갑니다. Ctrl+D키를 눌러 선택을 해제합니다.

1과 2처럼 외곽선에서 1픽셀 떨어지게 가이드선을 배치합니다. 사각형 선택툴을 선택하고 옵션바에서 스타일을 Normal로 선택하고 3부분을 클릭드래그하여 선택한 다음, 메뉴에서 이미지-자르기를 선택하면 잘라집니다. top-left.gif파일로 저장합니다. 취소키를 눌러 이전단계로 와서 4를 선택하여 자르고 bottom-right.gif로 저장합니다. 마찬가지로 5부분을 잘라서 bottom-left.gif로 저장합니다.

2. 코딩하기 

flexible-rounded2.zip

압축파일을 풀고 html파일을 텍스트 에디터에 열면 위와같이 나옵니다. 4개의 div 태그가 차례로 있고 마감태그도 순서대로 있습니다. images6폴더에 사용될 이미지와 참고용 psd파일이 있습니다. CSS는 임베디드방식으로 3에 들어갑니다.

.box1 {

width: 500px;

background: #f0f0f0 url(images6/bottom-left.gif) no-repeat left bottom;

}

우선 외곽 박스 태그에 대해서 위와같이 입력합니다. width는 500픽셀인데 1000픽셀 정도 까지 유동적으로 사용할 수 있습니다. 배경은 박스 이미지의 내부 색상과 같이 해주고 이미지 url을 입력합니다. no-repeat는 반복이 안되도록 하고 left bottom은 div태그의 좌측하단을 기준으로 이미지가 포지션을 잡습니다. 저장한 다음 html파일을 클릭하여 웹에서 보면 다음과 같이 나옵니다.

 

아직 하나의 이미지만 들어가서 외곽선이 좌측과 하단만 나옵니다.

.box2 {

background: url(images6/bottom-right.gif) no-repeat right bottom;

}

box2에 대해서 위와같이 입력하면 이미지가 우측 하단을 기준으로 배치됩니다.

 

.box3 {

background: url(images6/top-left.gif) no-repeat left top;

}

.box4 {

background: url(images6/top-right.gif) no-repeat right top;

}

나머지 두개의 박스 태그도 위와같이 입력합니다. 좌측 상단과 우측 상단을 기준으로 배치되면서 배경이미지가 완성됩니다.

글자가 패딩이 필요한 상황입니다. 

각 div 태그에 대해서 이미지가 위치하는 방향에 따라서 패딩을 입력해도 되지만 글자에 <p> 태그를 삽입하고 CSS에 p 태그에 대해서 패딩값을 20픽셀 주면 4면에 대해서 20픽셀씩 패딩이 만들어져서 보기 좋아집니다. 

box1의 width를 900픽셀로 늘리고 글자를 복사하여 여러개로 늘렸습니다. 아래처럼 배경이미지의 폭도 늘어나고 세로 길이도 늘어납니다.

이 방법은 한계가 있죠. 배경이미지의 크기가 정해져 있으니 무한정 늘어날 수가 없습니다. 그러니 제한된 크기의 배경이미지로 사용하기에는 좋습니다. 하지만 컨텐트 영역은 길면 세로길이가 몇만 픽셀도 넘어갑니다. 포토샵으로 이미지를 만들 수 있는 한계가 4만 픽셀입니다. 이렇게 길게 컨텐트가 만들어지기도 힘들지만 우선 이미지가 커지면 부담됩니다. 용량은 그리 많이 차지하지 않습니다. gif파일은 이미지 파일중 가장 작은 사이즈로 만들 수 있어서 웹 이미지로 아주 많이 사용하는 파일 포맷이거든요. 그러면 다음 글에서 8개의 이미지를 이용한 무한정 늘어날 수 있는 모서리가 둥근 배경이미지 만들기를 해보겠습니다.

flexible-rounded2.html