CSS3 border-radius 박스 둥근 모서리 속성 스타일 종류와 사용법
이번에는 div로 박스를 만들고, 테두리의 값을 입력하여 모양일 변경하는 방법입니다. 모서리 부분이 둥근 테두리 형태의 박스를 표현하고자 할 때, CSS3 에서는 border-radius 속성을 이용해서 스타일을 만들어 줍니다. 아래는 예시 입니다. 참고하시기 바랍니다.
See the Pen CSS3 : border-radius by rgy0409 (@rgy0409) on CodePen.
HTML과 CSS 버튼을 누르시면 코딩 상태를 확인하실 수 있습니다. 특히 CSS 부분을 유심히 살펴보시기 바랍니다. 가장 기본 형태는 다음과 같습니다.
border-radius 값에 따른 적용 위치
border-radius: 픽셀 혹은 %단위의 값 입력;
이렇게 하시면 사각형의 각 모서리에 입력한 값 만큼 영향을 받게됩니다. 픽셀 단위로 정확하게 입력하셔도 되며, %를 입력하셔도 됩니다. 보통은 픽셀 단위로 입력을 하게 되는데 이 때의 장점은 가로 및 세로 사이즈의 크기에 상관 없이 일정하게 모서리가 완만해 집니다. 위의 예제에서 BOX1 과 BOX8를 서로 비교해 보시면 어떤 차이인지 금방 파악하실 수 있습니다.
그리고 각 모서리마다 다르게 둥글기를 적용시키려면 값을 4개를 입력하시면 됩니다. 그림으로 설명드리자면 아래와 같습니다.
값을 4개 입력할 때, 3개 입력할 때, 2개 입력할 때 적용되는 모서리 번호 입니다. 이것을 참고하시어 예제를 보시면 어떤 부분에 적용이 되는지 이해가 될 것입니다.
border-radius 속성으로 원 (동그라미) 표현하기
이 속성을 사용해서 원으로도 표현이 가능합니다. BOX9 그리고 BOX10의 경우입니다. 단 중요한 포인트는 div의 가로 크기와 세로 크기가 같아야 한다는 것 입니다. 그리고 border-radius 값이 50% 이상이어야 합니다. 50% 라는 의미는 div의 가로 크기와 세로 크기의 절반이 휘어짐의 영향을 받게 된다는 뜻이 되므로 결국에는 원으로 표현이 됩니다. 이 점을 참고하시어 개성 넘치는 웹페이지를 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
