Introduction
라운드 박스만들기를 주제로 마지막 포스팅입니다. 웹표준이 많이 지켜지게 되었다고는 하지만 아직도 여전히 특정 브라우저의 버그나 특성 때문에 특정 브라우저를 위한 코드가 필요합니다. 이런 코드를 hack이라고 하고 많은 전문가들이 상황에 맞는 hack을 권장하고 있습니다. 하지만, hack을 쓰다보니 CSS가 난해하고 지저분해지고 마는 상황을 피할 수 없네요. 아직 웹표준의 갈 길은 먼 것 같습니다.
목차
- 고정폭 박스 - 방탄웹 방법
- 고정폭 박스 - 망고의 방법
- 유동폭 박스 - 방탄웹 방법
- 유동폭 박스 - www.cssplay.co.uk
- 아직 조금 먼 미래
아직 조금 먼 미래 - Border-Radius
본 글에서 소개할 방법은 CSS2의 차기 버전 CSS3에서 지원하게 될 border-radius 속성을 이용한 방법입니다. 모든 방법을 통틀어 가장 깔끔한 방법일 것입니다. 어떤 블로거는 복잡한 라운드 박스 기술이 다 필요없다고 주장을 하더군요. 일단 박스를 봅시다.
'이게 뭐야. 라운드 박스가 아니잖아.'라고 하시는 분들 많으리라 생각합니다. 이 방법은 현재 지원하지 않는 브라우저가 많습니다. 현재 제가 사용하고 있는 파이어폭스2는 CSS3의 border-radius가 아닌 -moz-border-radius 속성을 지원합니다.
[HTML] 코드
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
[CSS] 코드
width: 50%;
padding: 5px;
background: #444;
border-radius: 1em;
-moz-border-radius: 1em;
color: #fff;
}
아- 깔끔합니다. HTML에는 데이터만 들어가고 Presentation은 CSS가 전담합니다. 코드를 이해하기 위해 머리쓰고 말고 할 것도 없습니다. 모든 브라우저가 border-radius 속성을 지원한다면 앞서 작성한 라운드 박스 기술들은 모두 쓰레기통행이겠지요. 하지만 그렇다고해서 '난 border-radius만 쓸꺼야'라고 할 수는 없는거죠. (실제로 그렇게 주장하는 사람도 있긴 하더군요. 내 사파리에선 제대로 보이니 난 괜찮아 라고 ㅡㅡ;;) 취미로 혼자 만드는거라면 또 모를까 업으로 삼고 있는 사람들이 이러긴 쉽지 않습니다. (그러고보니 전에 다니던 회사에선 IE에서 돌아가면 오케!였습니다.)
웹표준이 완벽하게 모든 브라우저에서 지원되지 않는 한 hack은 여전히 유효한 방법일 것 같습니다. 틀이 되는 다른 코드들과 분리해서 잘 관리하는게 현재로서 가능한 대안일테구요. 끝으로 방탄웹에서 소개된 바 있는 hack 관리에 관한 글 소개드립니다.
Integrated Web Design: Strategies for Long-Term CSS Hack Management
Posted by 망고
