border-radius
■ 웹 문서에서 다른 요소와 구분, 또는 정렬 등의 이유로 테두리를 만들어서 사용하는데요. 물론, 이 테두리의 모양 및 색깔과 굵기 등을 지정해서 만들 수 있습니다. 얼마 전에 이와 과련된 글을 정리해 놓은 게 있는데, 참고하실 분들은 참고하시구요.
http://godvow.tistory.com/111 ◀ css border 속성
■ 이번 글에서는 이 테두리의 모서리를 둥글하게 설정하는 속성인 border-radius에 대해서 알아보도록 하겠습니다. 모서리가 직각이면 날카롭고 딱딱한 느낌을 줄 수 있기 때문에 둥글게 만들어 주면 좋은데요. 네 군대의 테두리를 똑같은 모양으로 만들 수도 있고, 각각 다르게 만들 수도 있습니다.
■ 예제를 만들어가면서 속성을 적용해볼게요. 단순하게 메모장을 이용해서 작성할거구요. 스타일 시트는 따로 만들지 않고 head 태그 안에 style 태그로 작성하겠습니다. 본문에 박스(div)를 만들어서 border-radius속성을 적용해보겠습니다.
■ 박스의 크기를 300X300으로 지정했구요. 배경색은 검은색, 글자색은 흰색, 테두리는 4px 두께의 빨간색 실선이고 입력한 텍스트의 위치를 적당히 조절했습니다. 이 내용을 브라우저에서 출력해볼게요.
■ border-radius 속성을 적용해보면서 빨간 테두리의 변화를 살펴보겠습니다.
css3에서 테두리를 둥글게 만들 수 있는 속성인 border-radius의 속성값에는 일반 크기 단위인 px와 백분율(%)을 넣을 수 있구요. 네 개의 모서리 각각 다른 값을 지정해 줄 수 있는데요. 순서대로 상단 좌측, 상단 우측, 하단 우측, 하단 좌측 순서 이구요. 형식은 다음과 같습니다.
[border-radius : 30px 50px 20px 10px; ] 이렇게 네 개의 값을 다르게 지정할 수 있구요. 하나의 값만 입력하면 네 개 모두 똑같이 적용됩니다.두 개의 값만 입력하면 서로 마주 보고 있는 상단 좌측=하단 우측, 상단 우측=하단 좌측 값이 적용되고 값이 클수록 둥글기의 정도가 커집니다. 글로만 정리하니 정신이 없는 거 같죠?ㅎㅎ 속성값을 하나씩 입력해볼게요.
■ 네 곳 모두 같은 값을 적용한 상태입니다.
■ 두 개의 값을 입력하니 서로 마주 보고 있는 모서리에 같은 값이 적용된 걸 확인할 수 있습니다.
이제 마지막으로 한 곳만 둥글게 만들어보겠습니다. 모서리 네 곳 모두 각각 위치의 값을 가지고 있는데요. [border-top-left-radius : 속성값 ] 단어들만 봐도 어디인지 아시겠죠? 상단 왼쪽 모서리입니다. border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 등 네 곳의 위치값이 각각 있어요. 이것들 중 한 곳만 둥글게 만들어보고 마무리하겠습니다.
■ border-bottom-right-radius (하단 오른쪽 모서리)만 둥글게 만들고 있습니다.
이렇게 해서 border-radius 속성을 이용해서 테두리를 둥글게 만드는 방법에 대해서 알아봤습니다. 수고하셨어요.
