키스세븐지식
[CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius]
웹디자인을 하다보면 모든 개체가 사각형이라서 지겨울 때가 있습니다. CSS 둥글게 만들기는 창의적인 웹디자인에 필요한 방법일 것입니다.
div나 li의 border 모서리를 둥글게 하기는 CSS에서 border-radius 속성을 사용합니다.
border-radius 속성은 포토샵 없이도 외곽선을 둥글게 만들 수 있다는 장점이 있습니다. 기본적인 div 등은 html, php문서에서 개체를 만들어 준 후에 CSS파일을 열어서 테두리를 둥글게 만드는 속성을 주는 방법입니다.
DIV, LI, SPAN 등의 개체를 만든 후 적용한다
예를 들기 위해 div로 사각형을 만들고 div개체의 모서리를 둥글게 만들어 보도록 하겠습니다.
먼저 html이나 php문서를 열어서 div 개체를 만들고 클래스 이름을 적어 줍니다.
<div class="이름 정하기">
글자나 이미지
</div>
border-radius의 속성
hrml, php문서에서는 별로 할 것이 없습니다.
실질적인 효과는 CSS 둥글게 만들기를 통해서 이루어집니다. CSS파일을 열어서 클래스 이름을 적어준 후에 border-radius 속성을 적어 보도록 합시다.
.이름 정하기 {width:가로길이px; height:세로길이px; border:테두리두께px solid #색상코드; border-radius:둥근각도px}
CSS 테두리 둥글게 만들기가 목적이니 당연히 border 속성을 입력하고 두께와 색상을 정해야 할 것입니다.
가장 중요한 것은 border-radius 입니다. 여기에 어느 정도의 각도로 꺾일 것인지를 적어줘야 할 것입니다. 숫자가 클수록 많이 꺾이게 됩니다. 즉, 숫자가 매우 크다면 완전히 동그란 원을 만들 수도 있을 것입니다.
border-radius의 여러 가지 팁
CSS로 테두리 둥글게 만들기의 팁을 주자면, 너비, 높이와 비슷한 둥근 각도를 주면 거의 원이 된다는 것입니다.
예를 들어, width:20px; height:20px; 으로 했다면 border-radius도 border-radius:20px로 해주면 거의 원으로 만들 수 있다는 것입니다.
border-radius는 div 외에도 여러 가지 개체를 가지고 외곽선을 둥글게 만들 수 있습니다. li 등에도 테두리 둥글게 만들기를 할 수 있는데, 아래는 span 속성에 대해서 border-radius를 적용한 모습입니다.
.클래스 이름 {color:#fff; width:50px; height:50px; border-radius:50px; line-height:120%; display:inline-block; text-align:center; margin:-0.3em}
CSS 둥글게 하기의 또 한 가지 팁을 주자면, line-height의 %를 적절히 바꾸면 안에 글자를 넣었을 때 조절이 편리하다는 것입니다.
border속성처럼 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius를 통해서 어느 쪽의 외곽선을 둥글게 만들기할 것인가를 정할 수가 있습니다.
물론 일반 div객체처럼 내부에 이미지를 넣어서 모서리를 둥글게 만들기할 수도 있습니다.
주의할 것은 브라우저 버전이다
단, 이 CSS기준은 오래된 브라우저에서는 적용되지 않을 수도 있습니다. 예를 들어, 익스플로러 8 이하에서는 그냥 사각형으로 보이기도 합니다.
이에 대한 대비 책은 뾰족한 것이 아니지만 대체로 behavior: url( "PIE.htc" );를 많이 사용합니다. CSS의 { } 안에 넣어주는 것입니다.
최신 브라우저에서는 정상적으로 지원하기 때문에 border-radius를 사용하면 CSS 둥글게 하기가 편리해집니다. 디자인도 더욱 자유스러지는 것입니다.
