[웹 개발] CSS Border Radius 작업 온라인 툴

Radius 작업 시 일일히 확인해가며, 코드를 수정하는 것이 귀찮아 간단한 툴을 만들었다. 명세는 “Border Radius를 온라인에서 작업해서 본인의 프로젝트에 삽입”하는 간단한 웹앱이다. 아래 링크를 통해 접근 가능하다.

CSS 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에서는 기능에는 문제가 없지만, 보고 인식하는 데에 어려움이 있을 듯하다.

댓글 남기기