CSS3 border-radius
■ HTML로 웹 문서를 만들 때 이미지나 텍스트 단락을 <div> 태그를 이용해서 테두리를 만들어주는데요. 이 테두리의 기본 속성은 사각형입니다. 하지만 CSS3에서는 border-radius 속성을 이용해서 모서리를 둥글게 만들 수 있습니다. 이번 글에서는 이 radius의 속성값들을 알아보겠습니다. 먼저 예제로 사용할 박스를 하나 만들게요.
■ 간단하게 가로 세로 400픽셀의 파란색 배경과 빨간색 테두리의 박스를 만들어봤는데요. 이 박스를 이용해서 테두리를 둥글게 만들어보겠습니다. 위 예제의 소스는 다음과 같습니다.
■ <div> 속성에서 border-radius 값을 넣어서 변화를 줄 텐데요. 이때 속성값으로 넣을 수 있는 것들은 크기값(px) 또는 백분율(%) 입니다. 값은 순서대로 네 개를 넣을 수도 있고, 하나만 넣을수도 있는데요. 하나만 넣으면 네 개의 모서리 값이 모두 같게 설정됩니다. 그리고 네 개의 값을 넣을때는 첫번째 값부터 왼쪽 위 (top-left), 오른쪽 위 (top-right), 오른쪽 아래 (bottom-right), 왼족 아래 (bottom-left) 순서입니다. 그리고 특정 모서리 한 곳만 둥글게 만들고 싶다면 [border-top-right-radius : 값;]의 형식으로 입력하시면 되는데요. 입력한 방향은 오른쪽 위 모서리만 둥글게 만든다는 내용이겠죠?
그럼 예제에 직접 적용해 보겠습니다. 먼저 네 개의 모서리를 모두 값은 값으로 둥글게 만들어볼게요.
■ 값을 "15px"로 설정했는데요. 값을 올리면 올릴수록 더욱 둥글게 변합니다.
다음 예제에서는 위쪽 두 모서리만 값을 더 높여서 더 둥글게 만들어보겠습니다.
■ 앞에서 언급한 대로 [border-top-left-radius]와[border-top-right-radius] 속성을 이용해서 두 값 모두 "40px"로 설정해봤습니다.
■ 그림처럼 위의 양쪽 모서리만 설정한 값만큼 둥글게 변하고 아래쪽은 변화가 없습니다. 직접 크기 값과 백분율 값을 넣어가면서 모서리의 변화를 체크해보시고, 적당한 크기로 설정하시면 됩니다. 수고하셨어요.
