CSS3를 이용하여 둥근모서리 박스 만들기

첫 걸음 - CSS

둥근모서리 박스를 만들기 위하여 필요한 준비물은 다음과 같습니다.


CSS3가 존재하지 않던 시절, 둥근모서리 박스를 웹에서 구현하기 위해서는 포토샵과 같은 그래픽 도구가 필요했습니다. 이미지 수정 프로그램을 이용하여 직접 둥근 모서리를 만들어주는 것이었죠. 아니면 테이블 태그를 이용하여 둥근 모서리를 구현했습니다. 하지만 이렇게 구현된 둥근 모서리는 완전하지 않다는 단점이 있었습니다. 가장 큰 단점은 해상도나 박스의 크기가 변동되었을 때, 포토샵에서 만든 둥근모서리는 픽셀로 구성되어 있기 때문에 크기 변화에 제대로 대처하지 못하여, 확대하는 경우에는 그 모서리가 깨져보이는 현상이 발생했습니다. 테이블을 이용하여 만들어진 둥근모서리 역시 박스의 크기를 변동시시려면 테이블 스타일도 함께 바꾸어야 하는 단점이 있었습니다.

하지만 CSS3가 등장하면서 둥근모서리는 CSS 스타일 속성의 단 한 줄만으로 구현할 수 있게 되었습니다. 개발자는 둥근모서리 뿐만 아니라 그림자효과, 그라데이션효과 등을 단 한 줄만으로 구현할 수 있게 되었습니다.

그런데 CSS3가 모든 웹브라우저에서 지원하고 있는 웹표준은 아닙니다. 왜냐하면 최근에 만들어진 CSS 표준이기 때문입니다. 따라서 최신 웹브라우저가 아닌 구버전의 웹브라우저를 사용하고 있는 사용자는 CSS3를 이용하여 만들어진 둥근 모서리를 볼 수 없습니다. 이 문제를 해결하는 유일한 방법은 본인의 블로그에 방문하는 모든 사용자에게 웹브라우저를 최신 버전으로 업그레이드하라고 권유하는 방법 뿐입니다. 하지만 이것 역시 운영체제 버전의 문제로 쉽게 이루어지지 않을 가능성이 높습니다.

둥근모서리 박스 스타일 속성

CSS3를 이용하여 둥근모서리 박스를 만들 때 사용되는 속성은 border-radius입니다. 이 속성은 CSS3에서 새로 추가된 속성으로, 최신 웹브라우저에서만 공식적으로 지원되는 속성입니다. 따라서 최신 웹브라우저가 아닌 경우에는 아래와 같은 특별한 속성을 사용해야만 합니다.

하지만 다음과 같은 방법이 있음에도 인터넷익스플로러 구 버전에서는 둥근 모서리 스타일을 지원하지 않습니다. 이 글에서 말하는 최신 웹브라우저의 기준은 인터넷익스플로러 9, 파이어폭스 4, 사파리 5, 크롬 6 이상의 버전을 의미합니다. 만약 인터넷익스플로러 9 미만의 버전에서 둥근 모서리를 꼭 구현하고 싶을 때에는 CSS3 Pie 라는 외부의 라이브러리를 사용해야 합니다. CSS3 Pie를 사용하는 방법에 대해서는 나중에 다시 설명하도록 하겠습니다.

둥근모서리 박스 만들기

지금까지 CSS3를 이용하여 둥근모서리를 구현하는 방법에 대해서 알아보았습니다. 지금까지의 내용을 통해서 CSS3에서는 둥근모서리를 벡터 방식으로 만들기 때문에, CSS3를 이용하면 포토샵이나 테이블을 이용해서 만드는 방법보다 매우 깔끔하게 둥근모서리가 만들어진다는 사실을 알게 되었습니다.

이제부터는 실제로 둥근모서리를 만들려면 어떻게 소스코드를 작성해야 하는가에 대해서 설명하도록 하겠습니다. CSS3를 이용하여 둥근모서리를 만들기 위해서는 단 한 줄의 속성 값만 입력하면 되므로, CSS3 둥근모서리 만들기는 초보자도 쉽게 따라할 수 있을 정도로 매우 간단합니다.

CSS3 둥근모서리 속성을 설명하기에 앞서 HTML의 가장 기본이 되는 것에 대해서 설명하겠습니다. 아래의 HTML을 출력하면 화면에 어떻게 표시되는지 알아봅시다.



위의 HTML을 웹브라우저에서 출력하면 그냥 "안녕하세요. 둥근 모서리 박스입니다." 라는 텍스트만 표시될 것입니다. DIV 태그는 가장 대표적인 HTML의 문단 태그이기 때문에 기본적으로 아무런 스타일도 지정되어 있지 않습니다. 이러한 이유 때문에 DIV 태그를 사용했음에도 텍스트만 그대로 표시되는 것이죠. 그런데 누가 DIV 태그를 이렇게 스타일 없이 사용하겠습니까? 이 글에서는 이 DIV 태그에 CSS3의 둥근모서리 속성을 적용시킬 것입니다.

그렇다면 이 DIV 태그에 시각적인 스타일을 적용시키는 방법에 대해서 알아보겠습니다. 먼저 DIV 태그에 class 매개변수를 추가합니다. DIV 태그에 추가된 class 매개변수는 HTML 요소에 스타일을 지정할 때 가장 많이 사용되는 HTML 태그의 매개변수입니다. 일단 아래와 같이 DIV 태그에 class 매개변수를 추가합니다.



위의 HTML을 출력해도 앞서 출력했던 HTML과 같이 그냥 입력된 텍스트만 나타납니다. 이 결과는 당연합니다. 왜냐하면 아직 box-radius 클래스의 스타일을 정의하지 않았기 때문입니다. 클래스만 정의하면 되는 것이 아니라 클래스의 스타일을 사용자가 직접 지정해주어야 합니다. 그렇다면 이제부터 box-radius 클래스의 스타일을 정의해보겠습니다. CSS에서 클래스의 스타일을 지정할 때에는 점(.)을 사용합니다. ID의 스타일을 지정할 때에는 샾(#)을 사용하죠. CSS에서 HTML 요소를 선택하는 CSS 선택자에 관한 설명은 다음 글을 참고하시기 바랍니다. [2014/07/04 CSS 선택자에 관한 매우 기초적인 지식 / CSS Selector]



위와 같이 box-radius 클래스의 스타일을 지정해주면, 위에서 만들어 놓은 박스는 아래와 같이 모양이 바뀝니다.


※ 위의 박스에 빨간색 테두리가 나타나지 않는다면 이것은 웹브라우저에서 CSS를 지원하지 않기 때문입니다. CSS를 지원하지 않는 웹브라우저는 없으므로, 이러한 경우에는 웹브라우저의 고급 옵션에서 CSS를 사용할 수 있도록 설정을 변경해주어야 합니다.

* padding 속성은 HTML 태그 내부의 여백을 설정하는 속성입니다. DIV는 HTML에서 가장 많이 사용되는 는 블록(문단) 생성 태그입니다. padding 속성은 그 블록 내부에 여백을 설정합니다. 그런데 margin 속성도 블록에 여백을 생성할 때 사용됩니다. padding 속성과 margin 속성의 차이점을 설명하자면, padding은 HTML 태그 테두리 내부에 여백을 생성하는 속성이고, margin은 HTML 태그 테두리 외부에 여백을 생성하는 속성이라는 차이점이 있습니다.

* border 속성은 HTML 태그로 생성된 박스에 테두리를 생성하는 속성입니다. DIV 태그 뿐만 아니라 TABLE이나 IMAGE 등의 태그에도 이 속성을 사용할 수 있습니다. 이 예제에서 사용된 DIV 태그는 기본적으로는 아무런 스타일도 없으며, 그냥 줄바꿈(블록)의 기능만 가지고 있습니다. 하지만 CSS의 border와 같은 속성을 이용하면, 테두리를 만들 수 있어, DIV 태그의 디자인을 매우 쉽게 바꿀 수 있습니다.

그렇다면 지금부터는 둥근모서리를 만들기 위한 스타일 속성을 box-radius 클래스에 추가해보도록 하겠습니다. 위 박스의 테두리를 둥글게 만들기 위해서는 box-radius 클래스에 다음과 같은 속성이 추가되어야 합니다. 맨 위쪽에 있는 border-radius 속성이 최신 웹브라우저를 위한 것이고, 나머지는 구형 웹브라우저를 위한 속성입니다.

최신 웹브라우저를 위한 border-radius
구형 파이어폭스를 위한 -moz-border-radius
구형 구글크롬을 위한 -webkit-border-radius
구형 오페라를 위한 -o-border-radius

위에서 설명한 총 네 가지의 속성을 box-radius 클래스에 추가하면 다음과 같은 CSS 소스코드가 완성됩니다.

※ 최근들어 구형 웹브라우저를 사용하는 사람이 많이 줄어들고 있는 추세이기 때문에 border-radius 이외의 속성을 추가할 필요는 없습니다. 하지만 만약의 상황을 대비하는 것이 나쁘지는 않기 때문에 귀찮더라도 이 글에서는 총 네 개의 속성을 추가하였습니다.



앞서 만들었던 DIV 태그에 위의 네 가지 속성이 적용되면 다음과 같은 박스가 출력됩니다. 위에서 보았던 것과는 달리 네 개의 모서리가 둥글게 표시되는 것을 확인할 수 있습니다.


※ 만약 위 박스의 모서리가 둥글게 표시되지 않는다면 이것은 웹브라우저의 버전이 낮기 때문입니다. 이 경우에는 반드시 웹브라우저의 버전을 업그레이드해야 합니다. 만약 업그레이드를 어떻게 하는지 모른다면 구글 크롬을 사용하는 것도 좋은 방법입니다. 구글 크롬으로 자동으로 업데이트되는 기능을 가지고 있기 때문입니다.

마무리 - 나만의 디자인

지금까지 제가 설명 드렸던 것처럼 CSS3를 이용한다면 본인의 홈페이지에 둥근모서리의 박스를 추가하는 것은 그렇게 어렵지 않습니다. 위에서 제시했던 예시는 단 한 가지이지만, CSS의 다른 속성 값을 다양하게 추가하면 본인만의 독특한 박스 디자인을 만들 수도 있습니다. 레이아웃을 만들 때 둥근모서리를 사용하면 부드러운 이미지를 연출할 수도 있습니다. 또한 border-radius 속성은 이미지에도 적용시킬 수 있으므로 둥근모서리의 이미지를 본인의 홈페이지에 삽입하는 것도 가능합니다.

포토샵을 이용하면 만들어진 박스의 모서리가 픽셀로 구성된다는 점이 큰 단점으로 작용하여 깨져보이는 경우가 발생할 수도 있는데, CSS3를 이용하면 깨져보이는 문제를 100% 해결할 수 있습니다. 왜냐하면 CSS3의 둥근모서리 속성은 벡터 방식으로 작동하기 때문입니다. 하지만 구형 웹브라우저의 경우에는 둥근모서리 속성이 적용되지 않는다는 점을 꼭 명심해야 합니다.