- UPDATE 2019-02-23 : 서버비 문제로 운영하던 웹페이지를 닫았습니다. Border Radius 관련된 다른 사이트를 링크해두니 참고하시기 바랍니다.
- Border Radius 관련 대체 링크
Radius 작업 시 일일히 확인해가며, 코드를 수정하는 것이 귀찮아 간단한 툴을 만들었습니다. 일종의 ‘Border Radius를 온라인에서 작업해서 본인의 프로젝트에 삽입’하는 간단한 웹앱입니다. 아래 링크를 통해 접근하시면 됩니다.
Border Radius 툴 기능 설명
웹 프로그래밍을 접해본 사람들이라면 아주 간단합니다.
- Box Width : OUTPUT 필드의 박스 넓이를 조절
- Box Height : OUTPUT 필드의 박스 높이를 조절
- Box Background Color : OUTPUT 필드의 박스 색깔을 조절
이상 3가지가 박스 크기와 성질에 관한 Property입니다. Radius값을 px로 넣게 되었을 때, (박스 크기에 따라 다른 결과를 가져올 수도 있기 때문에) 박스 크기에 관한 옵션을 추가하였습니다.
- Border Width : 박스 경계 두께를 조절한다.
- Border Style : 박스 경계의 스타일을 조절한다. (실선, 점선 등등)
- Border Color : 박스 경계의 색깔을 정의한다.
이상 3가지가 박스 경계에 관한 Property입니다.
- Border Radius(All) : 모든 경계의 Radius(4각)을 한번에 조절
- Top Left/Top Right/Bottom Right/Bottom Left : 각각 한 쪽 각의 Radius만 조절
적당히 설정하여, 실시간으로 OUTPUT을 확인하실 수 있습니다.
완성된 코드는 아래에 제공되니 Copy + Paste해서 사용하면 됩니다. Show/Hide Comments 버튼으로 주석을 삭제 혹은 복원할 수도 있습니다. -moz-나 -webkit- Prefix는 더 이상 명시하지 않아도, 모든 브라우저에서 잘 동작합니다. 그래서 생략하였습니다.
반응형으로 구현하고자 생각하며 구현했지만, 사실 대부분 Desktop이나 Tablet 외엔 수요도 없을 것 같았습니다. 가로 770px 이상의 화면(브라우저 창)이면 불편함 없이 사용할 수 있습니다. Mobile에서는 기능상 문제는 없지만, 보고 인식하는 데에 어려움이 있을 수 있습니다.
이상입니다.