Div & Rounded box | Page Layout Series Part IX
둥근 모서리
 |
 |
|
|
모서리가 둥근 box라는 물건이 언제 부터인지 유행인가 봅니다. 이런 형태의 box(rounded box)가 나온 시기는 대충 Windows XP 라는 OS가 나오면서 부터인 걸로 기억합니다만... 물론 실제로 그런 건지는 모르고 순전히 제 추측 에 불과 하지만 아마 2002 년도 전후가 아닌가 합니다. 제가 처음 둥근 모서리의 box를 보았을 때 제 스스로는 별 다른 감응이 없었습니다. 저는 지금도 XP를 쓰고 있지 않지만 그 당시에도 XP를 보고 '모서리가 둥글 둥글해 진 것 하고, icon 바뀐 것 말고 뭐가 달라졌지? 모서리가 둥글면 머 쩜 나은가. 저렇게 둥근 모서리를 만들기 위해서 programing 하는데 과연 얼마 만큼의 code가 더 들어 갔을까. 차라리 딴 데 신경 쓰는게 났지 않을까. ' 라는 생각이 들더군요. 이후의 진행을 보면 아시겠지만 program code가 아닌 HTML code로 둥근 모서리 box를 만드는 데도 만만치 않은 작업이 필요합니다. 그런데 둥근 모서리 box가 처음 등장한 이후로 Yahoo나 Naver 등의 포탈 사이트를 비롯하여 많은 사이트들이 rounded box를 전체 또는 일부에 사용하기 시작해서 지금은 '웬만해선 모서리가 둥근 box의 사용을 말릴 수 없는' 상태가 된 것 같습니다. 하지만 제 성격이 모난 탓 인지 아니면 미적인 감각이 남 보다 떨어져서 인지 저는 아직도 둥근 모서리 box를 별로 좋아하질 않아서 모서리가 둥근 테이블 에서와 같이 하나의 예를 들 경우에나 쓰든지 나중에나 쓸까 아직은 '모서리를 둥글게 깍을 시간이 있으면 그 시간에 차라리 딴 걸 하겠다!' 라는 생각이 드는 걸 보니 저도 참 미적인 부분에 대한 투자에 인색한 모양 입니다. 그럼에도 불구하고 왜 PLS Part IX 의 제목을 Div & Rounded box 로 정하고 이걸 다루려고 하느냐 하면 Div와 Table의 특성을 이해 하는데 아주 좋은 소재라고 판단이 되었기 때문 입니다. |
||
 |
 |
Div & Table and Rounded box
 |
 |
|
|
혹시 CADD(Computer Aided Design & Drafting)에 대해 아는 분 이라면 둥근 모서리 box 정도는 아주 가볍게 여기리라 봅니다. CAD 에서는 fillet 이라는 모서리를 둥글게 깍는 명령이 있어서 쉽게 둥근 모서리 box를 만들 수 있습니다. 저도 처음에 둥근 모서리 box(이후 'rounded box' 로 부르겠음)를 봤을 때 'HTML이나 CSS에도 fillet 같은 property가 있으면 좋겠다.' 라는 생각을 해 본 적이 있는데, 다행스럽게도 향후에 발표될 CSS Level 3(CSS3) 에서 border-radius 라는 spec이 생길 예정이라니 기대해 봄 직 합니다만 문제는 브라우저 들이 그 spec을 지원해 주느냐 겠지요. 하지만 현재의 HTML 이나 CSS 자체는 그런 property를 가지고 있지 않기 때문에 rounded box를 꼭 써야 될 필요가 있는 사람들은 CSS3가 나올 때 까지 마냥 기다릴 수는 없으므로 어떤 방법으로 이 물건을 쓰긴 써야 겠는데, HTML과 CSS를 사용해서 rounded box를 만들기 위해서는 어느 정도의 노력이 불가피 하다고 하겠습니다. Rounded box를 만드는 방법은 여러 가지가 있는데 우선 문서 중에서 rounded box 를 사용하는 부분의 상황이 어떤 경우인가에 대해 생각해 볼 필요가 있습니다. 즉, 아래와 같이 |
||
 |
 |
Box size의 고정 여부에 따라
- 가로 와 세로가 고정
- 가로는 고정, 세로는 가변(可變)
- 가로는 가변, 세로는 고정
- 가로와 세로 모두 가변
Box 내부와 외부 background-color 의 고정 여부에 따라
- 내부와 외부 모두 고정
- 내부는 고정, 외부는 가변(可變)
- 내부는 가변, 외부는 고정
- 내부와 외부 모두 가변
이렇게 위와 같이 분류할 수 있겠습니다. 따라서 가로와 세로의 size가 모두 고정이면서 내부와 외부의 background-color가 모두 고정인 경우는 '1a'와 같이 표기해서 구분하겠습니다. 그러므로 rounded box를 사용하려고 하는데 자기의 경우가 어떤 경우인지는 위와 같이 분류하면 거의 해결이 되겠죠. 그럼 위의 분류에 의해서
Case '1a' & '1b'
이 경우는 비교적 간단합니다. 우선 왼쪽의 그림과 같이 원하는 크기와 색상 (width:150px, height:100px; 내부 background-color: silver 로 가정하겠습니다.)으로 rounded box를 image file로 만듭니다. 혹시 rounded box image file을 어떻게 만드는지 가르쳐 달라고 하시지는 않겠죠? 그건 각자의 역량에 달려 있으므로 각자 해결 하시기 바랍니다. 마음 같으면 그 것도 가르쳐 드리고 싶지만 여기서는 HTML, CSS 등의 웹 언어로 범위를 국한 하도록 하겠습니다. 하지만 혹시 필요하다면 http://www.nutrocker.co.uk/corners.html에서 일반적인 named color를 사용하여 미리 만들어 놓은 rounded box 에 사용 할 수 있는 corner image들을 압축 파일 형태로 제공하고 있으니 참고 하시지요. 제 경우에는 이런 image를 만들기 위해서 Fireworks를 사용하는데 여러분 들이 어떤 프로그램을 쓰건 이런 image를 만들 수 만 있다면 상관 없습니다. 왼쪽 그림(corners/150_100_c0c0c0_in.gif)의 경우 rounded box 내부는 silver(#c0c0c0)로 채우고 외부(모서리)는 투명(transparent)으로 처리한 gif file 입니다. 따라서 외부 background-color를 white, beige 등으로 바꾸어서 재사용(re-use)이 가능 하므로 '1a' 뿐만 아니라 '1b' 도 동시에 해결 할 수 있겠죠. Code는 아래와 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Case 1a1b</title>
<style type="text/css">
<!--
.case_1a1b{
background-image:url(corners/150_100_c0c0c0_in.gif);
width:130px; /* 표준 모드이므로 padding 10px를 감안하여 150px - 20px = 130px로 지정 */
height:80px; /* 표준 모드이므로 padding 10px를 감안하여 100px - 20px = 80px로 지정 */
padding:10px;
}
-->
</style>
</head>
<body>
<div class="case_1a1b">내용이 들어 가는 곳</div>
</body>
</html>
Case '1c'
이 번 경우는 위의 예제인 case '1a1b' 의 경우와는 반대로 오른쪽 그림(corners/150_100_c0c0c0_out.gif) 과 같이 내부 배경색은 투명하고 외부의 모서리는 배경색을 가진 gif file 로 처리하여 내부를 white, beige 등으로 변경할 수 있습니다. 또한 이 경우에는 case '1a', '1b'와 마찬 가지로 gif file이 div의 배경으로 깔려 있기 때문에 div 내부에 내용을 넣을 수 있다는 장점이 있습니다.
Case '1d' 또는 'd'
이런 경우가 생길 수 있을까요? 'd'의 경우와 같이 내부와 외부의 background-color 모두가 가변인 경우의 처리 방법은 제 머리로는 도저히 떠오르질 않는군요. 그런 방법을 아는 고수께서 제발 쩜 가르쳐 주시기 바랍니다. 'd'의 경우는 사실 분류를 하다보니 생긴 case로서 그야말로 'CSS3' 의 border-radius 같은 것이 나오지 않는 이상 해결할 수 없을 것 같습니다. 따라서 case 'd'의 경우는 이후로 생각하지 않겠습니다.
Case '2a', '2b', '2c'
이 경우는 case '2c' 를 예로 들면 되겠습니다. 즉, width:200px 고정에 내부 background-color 가변, 외부 배경색 고정의 경우가 되겠네요. 여기에 사용될 그림은 아래의
와
가 되겠습니다. 아래의 code를 실행해 보시죠.
Case '2c'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Case 2c</title>
<style type="text/css">
<!--
.top_div{
background:#fff url(corners/150_top_out.gif) top center no-repeat;
width:130px; /* 표준 모드이므로 padding 10px를 감안하여 150px - 20px = 130px로 지정 */
}
.bottom_div{
background:url(corners/150_bottom_out.gif) bottom center no-repeat;
width:130px; /* 표준 모드이므로 padding 10px를 감안하여 150px - 20px = 130px로 지정 */
padding:10px;
}
-->
</style>
</head>
<body style="background-color:gray">
<div class="top_div">
<div class="bottom_div">내용이 들어 가는 곳</div>
</div>
</body>
</html>
DIV(DIVision marker) 의 특성
위의 실행 결과가 이해가 되시겠죠? 이런 방식으로 같은 block level box속에 block bevel box를 내포(nested)할 수 있는 element는 div 뿐이며, 같은 크기의 box를 box 자신 속에 내포 시켜서 같은 위치에 포개어 놓을 수 있는 특성은 오직 div 만이 가지고 있습니다. 즉, 위 결과를 나누어서 표현해 보면 아래와 같이 왼쪽 2 개의 box가 같은 위치에 포개어 졌다는 것을 알 수 있습니다. 물론 2 개 이상도 얼마든지 가능 하구요.
| + | = |
단, 위와 같이 같은 크기의 div를 같은 위치에 일치 시켜서 포개어 놓기 위해서는 아래의 사항을 유의해야 하며, 이 PLS 에서는 표준 모드(IE 의 !DOCTYPE switch on)를 기준으로 하므로 만약 표준 모드에 대한 내용을 모르고 이 페이지를 보신다면 PLS Part I 부터 보셔야 되겠습니다.
- 가장 밖에 있는 div를 제외한 내부에 들어 가는 나머지 div(들)에는 margin을 주지 말 것.
내포된 div (들)에 margin을 주면 각 모서리에 지정한 corner image들이 주어진 margin 만큼의 틈을 가지게 됩니다. - 최 상위 div에 padding 을 주지 말 것.
위의 경우와 반대로 생각하면 설명이 되겠습니다. - 최 상위 div를 제외한 내부 div에 border 를 주지 말 것.
이 또한 틈이 생기지 않게 하기 위한 요소 입니다. - 최 하위 div에 padding을 줄 것.
만약에 rounded box 속에 들어갈 내용을 padding을 주어 일정 간격을 띄우고 싶으면 최 하위 div에 padding을 주어야 div box 사이에 틈이 생기지 않습니다. 이 역시 위의 두 항목과 같은 맥락 입니다.
Div의 특성에 대해서는 이미 이 사이트 HTML > 고급 과정 > Division marker 에서 div와 span을 비교하여 설명한 바 있지만 그 때는 HTML 의 범위 내에 국한된 것 이었고, 이제 CSS 로 범위를 넓혀서 설명하면 대략 아래와 같이 DIV 는
기본값(intrinsic value)으로 주어진 margin이 없고, positioning 같은 방법을 쓰지 않아도 같은 위치에 같은 크기의 box를 포개어 놓을 수 있는 block level element.
라고 할 수 있습니다. Web design을 도시계획과 비교해 보면, 어떤 도시를 개발 한다고 했을 때 도시 전체의 기능이나 성격을 구상하는 master plan을 만들고, 주거 지역, 상업 지역 등으로 구획 정리를 한 다음, 구획된 면적에 정해진 규칙 대로 건물을 앉히게 되는데 div를 여기에 비유하면 하나의 구획 이라고 할 수 있습니다. 즉, 하나의 아파트 단지를 예로 들면 div는 아파트 단지의 대지 경게선(border)과 같다고 해도 무리가 아닙니다. 대지 경계선 이라는 실체는 분명히 있지만 직접적으로 눈에 먼저 보이는 것은 건물인 것 처럼 page layout 에서 div의 역할은, 건물처럼 사람이나 가구 등의 내용물을 직접 담고 있지는 않지만 분명한 경계선(border)을 가지고 있습니다. 그렇다면 div 속의 div는 어떻게 비교하면 될까요. 주거의 형태에 아파트 같은 공동 주거 단지만 있는게 아니고, 단독 주택 단지도 있는 것 처럼 div 속의 div는 단독 주택 단지 속의 일개 택지라고 하면 되겠군요...^^
Case '3a', '3b', '3c'
이 경우는 case '2a', '2b', '2c' 와 비교했을 때 90° 회전된 것 말고는 같으므로 생략하고, code 만으로 설명하면 아래와 같습니다. 예를 들어 height:200px의 rounded box를 만든다면 아래와 같을 것 입니다.
입력
...
...
.left_div{
background:#fff url(그림이름.gif) left center no-repeat;
height:200px;
width:필요한px;
}
.right_div{
background:url(그림이름.gif) right center no-repeat;
width:필요한px;
height:200px;
padding:10px;
}
...
...
Case '4a', '4b', '4c'
이 3 가지의 경우 '4b', '4c' 를 예로 들면 모두 해결이 되겠죠. 방법은 위에서 사용한 방법과 동일합니다. 다만 width와 height가 고정되지 않고 가변적이므로 각 4개의 모서리를 따로 처리해야 되는 번거로움이 있습니다만, 일단 만들어 놓으면 어디에나 쓸 수 있기 때문에 가장 바람직한 방법이라고 할 수 있습니다. '가변적' 이라는 것... 제가 가장 좋아하는 방법입니다. 지금 당장은 정해진 크기 말고는 쓸 일이 없을 것 같아도 사이트를 지속적으로 운영하다 보면 이상하게도 예외적으로 가변적인 크기를 쓸 일이 생기거든요. 희한한 일 입니다. 가로 세로 가변 크기의 box를 만들려면 우선 아래와 같이 4개의 corner image가 필요합니다. 아래는 case '4c'의 경우에 사용되는 image 들 입니다.
| tl.gif | + | tr.gif | + | bl.gif | + | br.gif | = |
|
이 image 들의 이름은 위에 표기한 것과 같이 예를 들어 tl.gif 의 경우 top left(좌측 상단) 로 CSS의 background-position:top left; 로 지정했을 경우의 첫 글자를 붙여서 지정 했습니다. 그럼 아래의 code를 '코드 실행기'로 실행해 봅시다. 실행하고 '코드 실행기'의 창 크기를 크게 또는 작게 resizing 해 보면 창 크기의 변동에 따라 rounded box의 크기가 신축성(flexibility)있게 변하는 것을 확인할 수 있습니다.
입력
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
.tl_gray{background:#fff url(corners/gray/tl.gif) no-repeat top left;}
.tr_gray{background: url(corners/gray/tr.gif) no-repeat top right;}
.bl_gray{background: url(corners/gray/bl.gif) no-repeat bottom left;}
.br_gray{background: url(corners/gray/br.gif) no-repeat bottom right;}
-->
</style>
</head>
<body style="background-color:gray;">
<div class="tl_gray">
<div class="tr_gray">
<div class="bl_gray">
<div class="br_gray" style="padding:20px;">내용이 들어 가는 곳.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
</body>
</html>
곡면(경사면) 테두리의 anti-alias 처리과 solid 처리에 대한 고려
곡면이나 경사면을 처리하는 방법에는 anti-alias 와 solid 가 있습니다. 화면상의 화소(pixel)는 화면을 가로와 세로로 분할해서 표시(display)하기 때문에 4각형을 이루고 있습니다. 따라서 경사면의 테두리(각기 다른 색끼리 만다는 경계선)는 계단이나 톱니 처럼 각이 져 보이게 되죠. 그러므로 경사면의 경우 톱니의 거친 모양이 드러나게 되는데, anti-alias의 경우 톱니 모양의 빈 부분에 중간색 계열의 색상을 투명도 농담 등으로 처리하여 보정하므로써 부드러운 면처럼 보이게 하는 방법 입니다. 마치 바탕화면 등록정보에서 '효과 / 글꼴 가장자리 다듬기'와 같은 처리인데, anti-alias 처리를 하면 경사면이 부드러워 보이는 반면 단점이 몇 개 있는데, 그 중에 하나가 아래의 예와 같이 anti-alias 처리된 모서리의 내부 색상이 진할 경우 anti-alias 처리된 부분이 드러나게 된다는 것 입니다.
anti-alias 곡면(경사면) 처리위의 경우내부를 gray 로 채우면 anti-alias 부분이 나타납니다. 하지만 아래와 같이 모서리의 image를 solid 로 처리하면
solid 곡면(경사면) 처리내부와 외부의 곡면 경계선에 아무런 틈이 생기지 않겠습니다. 정말 빈틈 없는 넘 이죠. 물론 solid의 경우 곡면이 거칠어 보인다는 단점이 있지만 말이죠. 그러니까 anti-alias와 solid의 차이는 '너의 단점이 나의 장점이고, 나의 단점의 너의 장점' 인 셈이 되겠군요. 따라서 여러분 들이 계획하는 페이지에서 둥근 모서리가 어떻게 쓰일 것인가에 따라 anti-alias와 solid 처리를 결정하면 되겠습니다.
그럼 여기에서 Div & rounded box 는 마치도록 하겠습니다. 사실 지금 쓰는 모니터가 19" 라서 1280 X 1024를 사용하고 있습니다. 그 전에는 17" 1024 X 768을 썼었는데, 19" 에 익숙해 지다 보니 화면 높이와 scroll bar 크기가 비례 한다는 것을 깜박 잊었습니다. 800 X 600 이나 1024 X 768에서 보니까 쩜 길긴 길군요... 다음의 PLS Part X 에서는 Table 과 rounded box에 대해 알아 보도록 하겠습니다.
이 문서의 저작권은 www.cadvance.org 에 있습니다.
| Top |
| Back |
| New |
| 검색 |