html4 간편하게 예쁜 Select 박스를 만들어보자 (select2) 안녕하세요, 메가존 클라우드의 코드보안관을 담당하고 있는 매드준입니다. 탕탕탕탕.. ( ﹁ ﹁ ) ~→ 웹을 개발하면서 가장 중요하게 생각하는 게 바로 "UI를 어떻게하면 이쁘게 그릴 수 있을까"인데요. 라이브러리를 사용하여 UI를 이쁘게 다듬어봅시다! 그리하여! 제가 갖고온 라이브러리는 select2입니다. select2는 MIT 라이센스이므로 자유롭게 사용할 수 있다는 장점과 이쁘다는 최고의 장점이 있어서 한번 사용해 보았는데 괜찮아서 여러분들께 소개 시켜드릴려고 합니다! 그럼 따라오세요! 탕탕! 01. 설치하기 CDN으로 JS파일 제공받기 CDN은 (Content Delivery NetWork)의 약자입니다. 즉 cdn에 등록된 js를 제공받아서 select2를 사용가능하게 하는 방법입니다. 다만,.. 2023. 6. 29. div 태그 내 이미지 적용하기 (동적 CSS 생성) MAD에 DrawFlow라는 OpenSource Library를 이용하여 구현한 아키텍처 그리기 기능이 있습니다 이 화면에서는 AWS에서 제공하는 서비스들의 아이콘을 이용하여 클라우드 내에서 서비스들이 어떻게 구성되는지를 표현할 수 있습니다 이 화면에서 각 서비스들의 아이콘을 화면에 배치할 수 있는데 하나의 문제가 발생했었습니다 화면에 배치하는 요소들을 Node로 표현하는데 Node 위에 이미지 태그가 쌓여있는 형태로 인해 아이콘을 별도로 확대를 해야 위치를 이동할 수 있는 치명적인 문제였습니다. 우선 문제 해결 전의 소스를 확인하겠습니다. 수정 전 코드 /* 상위 코드 생략 */ if (folder[0] == 'category_icons') { element = ` `; } 노드를 canvas 위에 올.. 2023. 6. 26. 슬라이드 메뉴(DrawerLayout Navigation) 적용하기 화면 구성에서 각 화면을 이동하거나, 기능 키들을 사이드 메뉴 영역에 표현하는 케이스가 많습니다. 메뉴 영역은 기능적으로는 간편하게 애플리케이션을 사용할 수 있도록 해주지만 보여지는 데이터 영역은 그만큼 줄어들 수 있습니다 현재 MAD 서비스에서 구현되고 있는 기능 중 OpenSource인 DrawFlow를 이용하여 TO-BE 아키텍처를 그릴 수 있는 기능을 제공하고 있는데 배치하려는 아이템을 메뉴 영역에 보여주어 실제 그릴 수 있는 영역에 제한을 받았었습니다 솔루션 아이콘을 배치할 때는 메뉴를 열고 아닐 때는 닫아 컨텐츠 영역을 넓힐 수 있는 방법으로 슬라이드 메뉴 기능을 적용하기로 했습니다 위 이미지에서와 같이 햄버거 버튼을 누르면 숨겨져있던 메뉴 바가 나오고 X 버튼을 누르면 다시 숨겨지도록 하여 .. 2023. 6. 23. Element에 리본 적용하기 화면을 구성하면서 강조를 해야 할 데이터가 발생할 수 있습니다 어떻게 표현을 할지에 대해 팀원분들과 brainStorming을 진행하여 방식을 고민하였습니다 여러 표현 방법이 있을 수 있지만 데이터를 표시할 Element에 리본을 적용하여 표현하는 것으로 정했습니다. 위 이미지인 Flutter 화면과 같이 해당 화면이 개발 화면이라는 것을 리본을 통해 강조할 수 있습니다 구현하려는 화면에선 통계 데이터가 마지막으로 취합된 시간이 언제인지를 표현하려 했고, 적용 위치는 DataTable에 적용을 하였습니다 리본에 대한 코드는 StackOverFlow에 소개되어있는 코드를 적용하였습니다 기존 화면: 적용 화면 : 적용 코드: (출처 : https://stackoverflow.com/questions/6312.. 2023. 6. 23. 이전 1 다음
