CSS로 만든 그룹 박스

지난 글에서 <fieldset> 태그가 본래 의미와는 상관 없이 오용되고 있다고 지적하면서 정작 중요한 대체 방법에 대해서는 설명이 너무 부족했네요. 그래서 <fieldset> 태그를 사용하지 않고도 같은 시각 효과를 얻는 방법을 찾다가 The Scripts 사이트에서 해결 방법을 찾았습니다. 아래의 예는 이 사이트에 제시된 CSS 코드를 약간 수정해서 만든 그룹 박스랍니다.

그룹 박스1

그룹 박스를 만드는 기본 예제입니다.
인터넷 익스플로러 6.0 이상, 불여우 2.0, 오페라 9.2에서 테스트 해봤습니다.

어떤가요? 그럼 먼저 이 박스가 어떤 html 태그로 만들어졌는지 확인해 보겠습니다.

<div class="groupbox">
  <h4><span>그룹 박스1</span></h4>
  <p>그룹 박스를 만드는 기본 예제입니다.<br />
     인터넷 익스플로러 6.0 이상, 불여우 2.0, 오페라 9.2에서 테스트 해봤습니다.</p>
</div>

소스는 간단히지요? 박스의 중요도에 따라서 적당한 헤드라인 태그(h1~h6)를 사용하면 됩니다. 이 태그에 대한 CSS는 다음과 같습니다.

div.groupbox { 
	width: 500px;			/* 박스 너비, 지정하지 않으면 최대치 사용 */
	height: auto;				
	margin: 2em 0 1em 0;		/* 박스 주위 여백 */
	border: 1px solid #999;		/* 박스 테두리 색 */
	padding: 0 8px;			/* 박스 여백(padding) */
}
div.groupbox h4 { 
	line-height: 100%; 		/* 위쪽 테두리 선과 내용물 사이의 간격 */
	padding-left: 8px; 		/* 왼쪽 테두리 선과 라벨 사이의 간격 */
	font-size: 1em;			/* h4 태그의 텍스트 크기 지정 */
	font-weight: normal;		/* h4 태그의 텍스트 두께 지정 */ 
}
div.groupbox h4 span { 
	background-color: #fff;		/* 배경색과 동일해야 함 */
	color: #333;			/* 라벨 텍스트 색 */
	padding: 0 4px;			/* 라벨과 좌우 선 사이의 간격 */
	position: relative; 
	top: -1.1em;			/* 라벨의 상하 위치 조절 */
}
div.groupbox p {
	margin-bottom: 1em;
	line-height: 170%;
}

† 이 CSS 코드를 그대로 적용할 경우에는 일부 브라우저에서 문제가 생길 수 있으니 주석을 제거하고 사용하시기 바랍니다.

폰트 크기와 박스 여백을 em 단위로 설정한 이유는 인터넷 익스플로러 6.0 버전 사용자가 전체 글자 크기를 조절할 수 있도록 하기 위해서입니다. 폰트 크기를 상대 단위(em, %)가 아닌 절대 단위(px)로 설정하신 분들은 자신이 사용하는 단위에 맞는 수치로 바꿔주셔야 합니다.

또한 박스(groupbox div) 내부의 상하 여백(padding)이 0으로 지정되어 있는 점도 주의하세요. 박스 내부의 위쪽 여백은 h4 태그의 line-height 속성에 따라 결정되고 아래 여백은 박스 안에 들어가는 p 태그의 margin-bottom 속성을 이용하도록 했는데, 자신의 스타일에 맞게 수정하셔야 합니다.

이 박스를 표시하는데 가장 중요한 속성이 h4 span 태그에 적용되는 top 속성입니다. 위에서는 -1.1em을 사용했는데 사용자의 글꼴과 줄 간격 등에 따라서 달라질 수 있으니 자신에게 맞는 값을 찾아야 박스의 라벨이 올바르게 출력됩니다. 수치가 작아질수록(음수라는데 유의) 라벨 위치가 위로 올라갑니다.

사실 CSS의 어려운 점의 하나가 같은 코드라도 사용자에 따라서 다르게 적용될 수 있다는 점인데 그 이유는 CSS라는 이름 그대로 상위 레벨의 스타일이 단계적으로 하위 레벨까지 적용되기 때문입니다. 다시 말해서 CSS의 html이나 body에 적용한 스타일이 이런 박스에까지 영향을 미친다는 얘기지요. 예를 들어서 위 CSS 코드에 정의된 h4 태그의 글자 크기 1em은 제가 CSS body에 정의한 글자 크기에 따라 달라진답니다. 그러니 일부분의 CSS 코드를 문서에 적용할 때에는 충분히 테스트 해보고 수치를 조절하는 과정이 필요합니다.

설명은 이만 마치고 몇 가지 예를 더 보여 드리겠습니다.

그룹 박스2

  1. div.groupbox { border: 1px solid #B4CEF5; }
  2. div.groupbox h4 span { color: #0066FF; }

그룹 박스3

  1. 너비 지정 안함 (최대 너비)
  2. div.groupbox h4 { line-height: 80%; padding-left: 18px; }
  3. div.groupbox h4 span { padding: 0 8px; top: -0.9em; }

h4 태그의 line-height 속성 값을 바꾸면 라벨의 상하 위치가 바뀌는데 이럴 경우에는 top 속성의 값으로 보정해주셔야 합니다.

조금 어렵더라도 의미에 맞는 태그를 사용하면 여러가지 이점을 얻을 수 있습니다. 박스 안의 내용이 중요하다면, 검색 엔진이 무시하지 않기를 바란다면 보다 ‘의미 있는’ 방법으로 바꿔보시길 바랍니다.

댓글 6개가 달렸습니다. 태그: , ,

  1. 가우리 | 2007-04-17 23:56

    멋집니다!

  2. wystan | 2007-04-18 00:09

    좋게 평가해 주셔서 고맙습니다. :-)

  3. 순디자인 | 2007-04-18 00:45

    덕분에 유용하게 사용하겠습니다. 감사합니다.

  4. wystan | 2007-04-18 01:05

    유용하게 써주신다니 기쁘네요. ^^

  5. 지인우인 | 2007-04-18 08:16

    이야~ 찾아 해매던 정보내요. 감사합니다. ^_^

  6. wystan | 2007-04-18 11:28

    고맙습니다. ^^

댓글이 닫혔습니다.