CSS Grid 추가/삭제/합치기 버튼 메뉴 개발은 가능할까요?


(오도독) #1

html에서 javascript나 jquery로 CSS에 이용되는 Grid를 이용자가 버튼 메뉴 형식으로 추가, 삭제, 합치기한 후 cell의 너비나 높이를 조정하는 기능 구현하기가 쉽지는 않겠지요?

word나 ppt에서 table의 칸 추가, 삭제, 합병 기능을 html에서 구현하고자 하는 것이라고 보면 되는데요…

  • 최초 화면에는 1개의 cell만 표시됨
  • 추가: 추가되기를 원하는 위치 행이나 열 (사이)에 있는 버튼을 클릭하면 해당 행이나 열 사이에 신규 행이나 열 삽입 (추가 위치 미지정 시 default로 마지막 행 뒤에 삽입되도록 함)
  • 삭제: 삭제를 원하는 행이나 열을 선택한 후 해당 삭제 버튼을 클릭하면 삭제
  • 합치기: 합치기를 원하는 인접한 cell 2개 이상을 선택한 후 합치기 버튼을 클릭하면 합쳐서 표시됨
  • 각 cell별로 container 번호가 1번부터 순서대로 정렬되어 표시됨 (합쳐진 cell의 번호는 1개만 표시되어 container 번호가 건너뛰어 표시되어도 무방함)
  • 각 cell별 경계선을 마우스로 끌어서 각 row나 column의 너비나 높이를 조절하는 기능
  • 각 cell별로 style 등은 head 부분의 style에 추가되어야 하며 body 부분에는 id나 class 명칭 등만 나타나야 합니다.

이런 거 만들려면 상당한 실력과 시간이 되어야 할 듯한데 제가 해당 기능이 필요는 한데 워낙 실력이 부족해서리… 시간이 얼마나 걸릴지요? 혹 개발자 중에 가능하신 분 있다면 개발 의뢰할 수 있는지요? 혹 가능하신 분 있다면 연락주시면 감사 하겠습니다. (다음쩜냇의 autodoc 또는 공일공팔구삼공팔이삼칠로 연락주시면 감사…)

참고로 기존에 table 개념에서 행과 열 추가/삭제/합치기 하는 javascript 프로그램(https://www.redips.net/javascript/table-td-merge-split/)은 구글링으로 찾았으나 CSS에 Grid-Container 개념으로 적용하기도 쉽지는 않아보이네요…