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

등록일: 2014. 10. 01

쉽고 빠르게 익히는 CSS3

  • 제이슨 크랜포드 티그 지음
  • 유윤선 옮김
  • 456쪽
  • 25,000원
  • 2011년 04월 15일

둥근 모서리를 사용하면 딱딱한 디자인을 부드럽게 만들 수 있지만 그동안 이미지를 사용해서 둥근 모서리를 구현하기란 쉽지 않았다. 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 유사 속성

CSS3 모질라 웹킷
border-radius -moz-border-radius -webkit-border-radius
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius

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

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