Border Radius 생성기의 기능
Border Radius 생성기는 박스 모서리의 둥근 정도를 자유롭게 조절할 수 있는 도구입니다. 각 모서리를 개별적으로 제어하거나 하나로 연결하여 동시에 조절할 수 있으며, 픽셀(px) 또는 백분율(%) 단위를 선택하여 디자인할 수 있습니다. 또한, 각 모서리에 가로 및 세로 반지름을 개별적으로 부여하여 더욱 부드럽고 유기적인 형태를 만드는 타원형 모서리 기능도 제공합니다. 디자인을 변경하면 이에 대응하는 CSS 코드가 실시간으로 즉시 생성됩니다.
이 도구는 웹 디자인에서 박스 모서리를 빠르게 둥글게 깎고자 하는 사용자, 정사각형 요소를 완벽한 원형으로 만들고자 하는 사용자, 알약 모양의 버튼을 디자인하려는 사용자에게 유용합니다. 또한 유기적인 물방울 모양을 만들거나 커스텀 border-radius를 위한 CSS 코드를 생성하려는 분들에게도 적합합니다.
입력 및 제어 옵션
이 도구는 직관적인 슬라이더와 토글을 통해 모서리 모양을 세밀하게 조정할 수 있도록 지원합니다. 슬라이더의 조절 범위는 0에서 100까지입니다.
- 슬라이더 제어:
- 모든 모서리 연결 토글이 켜져 있을 때는 모든 모서리라는 단일 슬라이더로 네 모서리를 동시에 조절합니다.
- 연결을 해제하면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 4개 슬라이더가 나타나 각 모서리를 개별적으로 조절할 수 있습니다.
- 타원형 모서리 토글을 활성화하면, 각 모서리마다 가로 및 세로 슬라이더가 제공되어 개별적인 반지름을 설정할 수 있습니다.
- 단위 선택: 단위 선택기를 통해 px와 % 중 원하는 단위를 지정할 수 있습니다.
- 프리셋 버튼: 빠르게 원하는 형태를 적용할 수 있도록 직각, 둥글게, 원형, 물방울, 나뭇잎 버튼이 제공됩니다.
초기 슬라이더 값은 24로 설정되어 있으며, 이에 따라 border-radius: 24px; 코드가 기본으로 적용됩니다.
실시간 출력 및 결과 확인
설정한 값은 화면에 즉시 반영되어 시각적으로 확인할 수 있습니다.
- 미리보기: border-radius가 적용된 박스의 형태를 시각적으로 실시간 확인할 수 있습니다.
- CSS 코드: CSS 제목 아래에 생성된 CSS 코드가 실시간으로 표시됩니다.
- CSS 복사 버튼: CSS 복사 버튼을 클릭하여 생성된 코드를 클립보드에 바로 복사할 수 있습니다.
작동 규칙 및 디자인 팁
네 개의 모서리 슬라이더는 시계 방향 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리에 대응하여 매핑됩니다.
- 단위별 작동 방식: 픽셀(px) 단위에서는 모서리가 고정된 크기만큼 둥글게 처리됩니다. 반면 백분율(%) 단위에서는 박스 크기에 비례하여 작동하며, 가로 백분율은 너비를 따르고 세로 백분율은 높이를 따릅니다.
- 타원형 모드: 타원형 모서리 토글이 꺼져 있을 때는 모든 모서리가 단일 반지름을 가진 1/4 원 형태가 됩니다. 타원형 모드를 켜면 각 모서리에 개별적인 가로 및 세로 반지름이 부여됩니다. 이때 생성기는 CSS 작성 시 슬래시(/)로 구분된 두 개의 값 형태를 작성하며, 모서리가 다시 원형으로 돌아가면 짧은 형태로 복원됩니다.
- 완벽한 원 만들기: 모든 모서리를 연결하고 단위를 백분율(%)로 전환한 뒤 50%로 설정하면 정사각형 요소를 완벽한 원형으로 만들 수 있습니다. 프리셋 중 원형 버튼을 클릭해도 모든 모서리가 50%로 자동 설정됩니다.
- 알약 모양 버튼 만들기: 단위를 픽셀(px)로 유지한 상태에서 모서리 슬라이더를 버튼 높이의 절반 이상으로 드래그하면, 박스의 너비가 아무리 넓어져도 양옆이 완전히 둥근 알약 모양이 유지됩니다.
개인정보 보호 및 데이터 처리
이 도구는 사용자의 개인정보를 안전하게 취급합니다. 모든 모서리 렌더링과 계산은 사용자의 웹 브라우저 내에서 직접 실행됩니다. 사용자가 설정한 어떤 데이터도 BroBroGo 서버로 전송되거나 업로드되지 않습니다.
자주 묻는 질문 (FAQ)
네 모서리와 px 및 % 단위는 어떻게 작동하나요?
4개의 슬라이더는 시계 방향으로 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리에 대응합니다. 픽셀(px) 단위에서는 모서리가 고정된 크기만큼 둥글게 처리되며, 백분율(%) 단위에서는 박스 크기에 비례하여 처리됩니다. 가로 백분율은 너비를, 세로 백분율은 높이를 따르므로 50%로 설정하면 정사각형이 원형이 됩니다.
타원형(elliptical) 모드는 어떤 역할을 하나요?
이 모드를 끄면 모든 모서리가 단일 반지름을 가진 1/4 원이 됩니다. 모드를 켜면 각 모서리에 가로 및 세로 반지름이 개별적으로 부여되어 부드럽고 유기적인 '물방울(blob)' 모양을 만들 수 있습니다. 생성기가 슬래시(/)로 구분된 두 개의 값 형태를 자동으로 작성하며, 모서리가 다시 원형으로 돌아가면 짧은 형태로 복원됩니다.
완벽한 원형이나 알약 모양은 어떻게 만드나요?
모든 모서리를 연결하고 단위를 백분율(%)로 전환한 뒤 50%로 설정하면 정사각형이 원형이 됩니다. 알약 모양의 버튼을 만들려면 픽셀(px) 단위를 유지한 채 모서리 하나를 버튼 높이의 절반 이상으로 드래그하세요. 그러면 너비가 아무리 넓어져도 양옆이 완전히 둥글게 유지됩니다. '원형' 프리셋을 클릭하면 첫 번째 케이스가 한 번에 설정됩니다.