CSS3의 새 기능 – 보더 모서리 둥글게 만들기

• 지음
• 0쪽
• 0원
• 1970년 1월 1일

둥근 모서리를 사용하면 딱딱한 디자인을 부드럽게 만들 수 있지만 그동안 이미지를 사용해서 둥근 모서리를 구현하기란 쉽지 않았다. CSS3에서는 엘리먼트 모서리 중 하나 또는 전부를 둥글게 만들 수 있는 border-radius라는 간단한 속성이 추가됐다. 모질라와 웹킷 모두 최종 W3C 표준이 발표되기 전에 이미 자체 border-radius 버전을 구현했다. 따라서 호환성을 높이기 위해서는 이러한 브라우저 확장 속성도 함께 고려해야 한다(표 10.15).

둥근 모서리 설정

1. 웹킷, 모질라, 표준 CSS3 border-radius 속성들을 추가한다(코드 10.10).

   -webkit-border-radius:
   -moz-border-radius:
   border-radius:

   이때 순서는 상관 없지만 보통 CSS3 버전을 주로 사용할 것을 염두에 두기 때문에 CSS3 버전을 제일 마지막에 두는 것을 선호한다.

   표 10.15 border-radius 속성값

   속성값	호환성
   <length>	FF1, S3, C1 O10.5, CSS3
   <percentage>	FF1, O10.5, CSS3

   코드 10.10 ui-box-properties.css : 코드 10.1에 적용하면 border-radius 속성을 사용해 서로 다른 엘리먼트의 모서리를 둥글게 만든다.

   /*** CSS3 VQS | Chapter 10 | box-properties.css ***/
   
   body, header.page, footer.page {
       margin: 0; }
   
   nav.global {
       display: block; }
   
   nav.global li {
       display: inline;
       margin-right: 10px; }
   
   article {
       max-width: 980px;
       min-width: 660px;
       float: left;
       margin: 0 10px;
       -webkit-border-top-right-radius: 20px;
       -moz-border-radius-topright: 20px;
       border-top-right-radius: 20px; }
   
   figure {
       display: block;
       width: 300px;
       float: left;
       margin: 0 10px 10px 0;
       border: 6px double rgb(142, 137, 129);
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px; }
   
   figcaption {
       display:block;
       padding: 10px;
       border-top: 2px solid rgb(142, 137, 129); }
   
   aside {
       display: block;
       width: 200px;
       height: 400px;
       overflow: auto;
       float: right;
       margin: 0 10px;
       -webkit-border-top-left-radius: 20px;
       -webkit-border-bottom-left-radius: 20px;
       -moz-border-radius: 20px 0 0 20px;
       border-radius: 20px 0 0 20px; }
   
   footer {
       width: 100%;
       clear: both; }
   
   h1 {
       margin: 0 20px 10px 10%; }
   
   aside h3 {
       border: 1em double rgb(142, 137, 129); }
   
   article nav h2 {
       border-top: none; }
   
   .byline {
       margin: 0 10% 10px 20%; }

   

   코드 10.1에 적용한 코드 10.10의 결과 화면. 메인 아티클과 어사이드의 모서리가 실제 노트처럼 둥글게 됐다. 그림 영역의 보더도 모서리가 조금 둥글게 됐지만 두 줄의 보더 중 바깥쪽 선에만 둥근 모서리가 적용됐다.

2. border-radius 값을 입력하고 이어서 세미콜론을 입력한다. 이때 세 곳 모두 같은 값을 입력한다(여기서 세 곳이란 모질라, 웹킷 CSS 선언, CSS3 스타일 선언을 말한다-옮긴이).

   5px;

   이때 사용하는 값은 브라우저 호환성에 따라 다음 중 한 값이 될 수 있다.

   ▶ 모서리에 있는 가상원의 반지름을 설정하는 길이 값. 이 값은 해당 모서리를 둥글게 하는 데 사용된다. 값이 클수록 모서리가 더 둥글게 된다.

   ▶ 퍼센트 값(0%부터 50%). 엘리먼트의 크기를 사용해 모서리 반지름을 설정한다. 값을 크게 지정하면 모서리가 더 둥글게 되며 50% 값을 적용하면 모서리가 반원으로 합쳐진다. 퍼센트 값은 웹킷에서는 지원하지 않는다.

   타원 모서리 설정

   두 개의 반지름 점을 정의하면 원형 모서리 대신 타원형 모서리를 만들 수 있다. 웹킷에서는 공백으로 이러한 값을 구분하고 모질라와 CSS3에서는 슬래시(/)로 값을 구분한다.

   -webkit-border-radius: 20px 10px;
   → -moz-border-radius: 20px/10px;
   → border-radius: 20px/10px;

   하지만 타원 모서리를 적용할 경우 일부 브라우저에서 앤티 앨리어싱(anti-aliasing) 왜곡이 더 크게 나타나므로 필자는 현재 이 스타일을 사용하지 않고 있다.

3. 각 모서리의 보더 반지름은 다른 모서리의 반지름을 지정하지 않고 개별적으로 설정할 수 있다.

   -webkit-border-top-right-radius: 20px;
   -moz-border-radius-topright: 20px;
   border-top-right-radius: 20px;

   모질라는 웹킷이나 W3C(오페라에서 사용)와는 조금 다른 구문을 사용하지만 같은 기능을 하는 속성들을 표 10.16에 정리했다.

4. -moz와 표준 CSS3(-webkit 제외)에서는 값을 네개까지 포함시킬 수 있다.

   -webkit-border-top-left-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
   -moz-border-radius: 20px 0 0 20px;
   border-radius: 20px 0 0 20px;

   이때 각 값을 공백으로 구분하면 보더 반지름을 간단히 설정할 수 있다.

   • 값을 하나만 지정하면 네 개의 모서리 반지름을 동일하게 설정한다.
   • 값을 두 개 지정하면 좌측 상단/우측 하단, 좌측 하단/우측 상단 모서리에 대한 반지름만 설정한다.
   • 값을 세 개 지정하면 좌측 상단, 좌측 하단/우측 상단(같은 값), 우측 하단 모서리의 반지름을 설정한다.
   • 값을 네 개 지정하면 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 순으로 모서리 반지름을 설정한다.

웹킷에서는 두 번째 값을 (원형이 아닌) 타원 모서리를 만들기 위한 두 번째 점으로 인식하기 때문에 모서리를 개별적으로 설정해야 한다.

표 10.16 border-radius 유사 속성

Tip: border-radius를 사용하면 곡선을 앤티 얼라이싱 처리해서 부드럽게 만들지만 결과는 좋을 수도 나쁠 수도 있다. 필자는 곡선 모양 개선을 위해 선과 배경 사이의 대조를 낮게 유지할 것을 권장한다.

Tip: 곡선 보더를 사용하더라도 박스 내의 콘텐츠는 잘리지 않는다. 따라서 박스의 모서리에 있는 이미지는 여전히 그대로 남게 되며 곡선 밖으로 삐져나오게 된다.