MangoLog

Introduction

세번째 Rounded Box입니다. 지난번 고정폭 박스에 이어 이번에는 유동폭 박스를 만들어보겠습니다. 먼저, 방탄웹 책에 있는 라운드 박스입니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 망고의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - 이외의 방법
• 아주 조금 먼 미래

유동폭 박스 - 방탄웹 방법

다음과 같은 모양의 박스입니다.

지난번처럼 2개의 이미지를 사용하는데 이번에는 상/하가 아닌 좌/우로 나눈 이미지를 사용합니다. 좌측 이미지는 라운드 코너를 표현할 수 있는만큼의 크기이고 바탕 이미지로 보여질 우측 이미지는 필요한 만큼 크게 디자인 합니다.

좌측 이미지(rBox3_bg_left.gif)

우측 이미지(rBox3_bg_right.gif)

고정폭이 하단 이미지를 바탕에 깔고 그 위에 상단 이미지를 덧씌웠듯이 이번에도 비슷하게 상단 우측을 바탕에 깔고 상단 좌측 이미지를 덧씌우고, 다시 하단 우측을 바탕에 깔고 하단 좌측 이미지를 덧씌우게 됩니다. 그러기 위해서 우측 이미지는 충분히 크게 만들어야 합니다. 설명이 조금 복잡한가요? 그림으로 보겠습니다.

유동폭 박스 레이아웃

이 방식으로 유동폭 라운드 박스를 만들기 위해서는 HTML 태그가 위와 비슷한 방식으로 코딩되어있어야 합니다. 가장 바깥으로 div 태그의 영역이 있고 그 안쪽으로 텍스트가 들어가는 p 태그의 영역이 있습니다. 여기까지가 상단 좌우측 라운드를 위한 태그입니다. 그리고 다시 하단 좌우측 라운드를 위한 div 태그가 있고 그 안쪽으로 p 태그의 영역이 있습니다. (방탄웹 책에는  div 태그를 쓰지 않고 em 태그에 display 속성값을 block으로 주는 방법을 사용하고 있습니다. 블록 엘리먼트가 아닌 태그를 블록처럼 사용하는 방법이죠. 자세한 내용은 책을 참고하시길)

먼저, 가장 바깥의 div영역에는 상단 우측 바탕 이미지가 깔립니다. 그리고 안쪽 p1의 영역에 상단 좌측 이미지를 덧씌웁니다. 여기까지면 상단 좌우측 라운드가 만들어집니다. 이어서 innerDiv의 영역에 하단 우측 바탕 이미지를 깔고, p2 태그에 하단 좌측 이미지를 덧씌웁니다. 네 모서리 완성!

[HTML] 코드

[CSS] 코드

이 방법으로 만들어진 라운드 박스는 폭과 높이가 모두 유동적입니다.

하지만, 이 방식의 라운드 박스는 비슷한 방식으로 만들어진 고정폭 박스와 마찬가지로 바탕을 이루게되는 우측 이미지의 크기를 벗어나면 박스가 깨진다는 것과 HTML코드에 태그 엘리먼트가 4개 이상 존재해야한다는 단점이 있습니다. 이보다 적은 태그가 존재할 경우 디자인을 위해 태그를 추가해야하는 경우가 생길 수 있는데, 이는 디자인과 컨텐츠를 분리하자는 웹표준의 철학에 위배됩니다. 그리고 태그에 맞추어 이미지를 지정하는 작업과 margin, padding을 주는 작업이 간단하지는 않습니다. 물론, 상황과 필요에 따라 기술은 응용해야하는 것이겠지만 단점과 장점은 분명히 알고 사용하는 것이 좋을 것 같습니다. 다음은 이미지를 사용하지 않음으로써 무한 확장이 가능한 유동폭 라운드 박스를 만들어보도록 하겠습니다.

PS) IE6로 보니 박스가 깨져보이는군요. 방탄웹은 무신 방탄웹이냐!고 하셔도 할말 없는 상황인데요. 파폭에서 제대로 보이는 것으로 보아 IE와 관련된 버그가 아닐까 생각됩니다. hack을 찾아보고 있는데 보고되어있는 방법들은 안먹는군요. 좀 더 공부를 해야겠습니다.

참고서적

  웹 2.0을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

댄 씨더홈 지음, 박수만 옮김
의 저자인 댄 씨더홈이 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 '방탄웹'을 구축해 가는 과정을 설명한다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 해결책을 제시한다.

Posted by 망고

두번째 Rounded Box입니다. 이번 글에서는 첫번째와 마찬가지로 폭은 고정되어있지만 높이 제한이 없는 박스를 만들어볼께요. 제 나름대로 생각해본 것이지만 너무 쉬운거라 다른 분들도 이미 쓰고 계신 방법이 아닐까 싶네요. 암튼 정리 차원에서 작성해보렵니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 망고의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - 이외의 방법
• 아주 조금 먼 미래

고정폭 박스 - 망고의 방법

생긴 것부터 보죠

박스의 생김새는 차이가 없습니다. 하지만 이번에는 background 이미지로 아래의 두 이미지를 사용합니다.

상단이미지(rBox2_bg_top.gif)

하단이미지(rBox2_bg_bottom.gif)

상단 이미지와 하단 이미지만을 사용하여 라운드를 구현하고 중간 부분은 background color를 동일한 값으로 일치시켜주었습니다. 위 아래 이미지만 있기 때문에 중간이 늘어나더라도 박스형태는 유지됩니다.

[HTML] 코드

[CSS] 코드

내용이 길어지더라도 하단 이미지를 교체해야하는 작업은 발생하지 않습니다. 하지만 클라이언트가 폭을 늘려달라고 하면 어쩌나요 ㅡㅡ;; 좀 더 방탄웹으로 가려면 폭도 유동적인 것이 좋겠죠? 다음 글에서 유동폭 라운드 박스를 만들어볼께요.

Posted by 망고

기존에 Rounded Box는 주로 Table 태그와 이미지를 이용해서 조각조각 이어맞추는 방법을 사용했었습니다. 하지만 이 방법은 몇가지 단점이 있었지요.

• HTML 태그내에 디자인을 위한 요소가 과다하게 사용됨으로써 데이터로서 HTML의 의미가 퇴색되고 따라서 확장성이 크게 떨어집니다. 파싱하기 또한 쉽지 않지요.
• 크기 변화에 유동적이지 못합니다. 글자를 크게 읽고 싶어도 그럴수가 없었죠.

최근에는 이러한 단점들을 보완하여 CSS를 사용한 Rounded Box 기술들이 쓰이더군요. 본 글에서는 최근에 읽었던 방탄웹의 기술과 더불어 몇가지 Rounded Box 기술들을 정리해보려고 합니다. 정리 순서는 다음과 같습니다. 항목 하나당 하나의 포스트로 작성하려고 합니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 나름의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - 이외의 방법
• 아주 조금 먼 미래

고정폭 박스 - 방탄웹 방법

폭이 고정되어있는 라운드 박스입니다. 생긴 것은 아래와 같습니다.

박스의 폭이 고정된 상태에서 높이만 유동적으로 변화하는 박스입니다. 좌우가 고정된 다음의 상하 두 개의 이미지를 사용합니다. 원리는 div 태그의 background 속성에 긴 하단 이미지를 깔아준 다음 제목이 있는 H3 태그의 background 속성에 상단 이미지를 덧씌우는 것입니다. 박스가 길어지면 긴 하단 이미지가 더 보여지게 되고, 짧아지면 덜 보여지게 됩니다.

상단 이미지

하단 이미지

[HTML코드]

[CSS코드]

시험삼아 Ctrl키를 누른 상태에서 마우스 스크롤을 움직여보세요. 폰트 크기가 변화함에 따라 박스 크기가 함께 변화하는 것을 볼 수 있습니다.

이미 눈치채셨겠지만 이 방법으로 만든 박스는 하단 이미지의 높이만큼만 확장이 가능합니다. 더 길어지면 박스가 깨집니다. 그리고 이름대로 폭도 고정이 되어있죠. 다음은 높이가 무한대로 확장 가능한 고정폭 박스를 만들어보겠습니다.

참고서적

  웹 2.0을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

댄 씨더홈 지음, 박수만 옮김
의 저자인 댄 씨더홈이 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 '방탄웹'을 구축해 가는 과정을 설명한다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 해결책을 제시한다.

Posted by 망고