Dev/simsim7 실직한김에만들어보자 - 7일차 #실직한김에만들어보자 시리즈 - 기록16일차 마지막에 말했던 것처럼 리스트를 만들어보자.직접 만드는건 쉽지만 유지보수의 용이성을 생각해 또 라이브러리를 활용해보고자 한다.js 리스트를 검색했을 때 가장 먼저 눈에 띈 List.js 라는 것을 사용해보자. List.jsPerfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.listjs.com기존 orgchart를 제거 후... 위와 같이 cdn 추가, 이용해보자.예제를 따라해보면 이렇게 나온다.분명 예제에선 한 행씩 길게 나왔었는데.... 2024. 11. 25. 실직한김에만들어보자 - 6일차 #실직한김에만들어보자 시리즈일이 좀 있어서 공백이 길었다... 다시 시작해보자! - 기록 1연도별 조직도를 만들기 위해 어떤 라이브러리를 써야할 지 책찌피티에게 물어보았다.5가지를 소개 해 주었고, 그 중 무료 상업적 사용이 가능한 3가지 중 'D3.js' 를 사용해보고자 했다. D3 by Observable | The JavaScript library for bespoke data visualizationD3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibilityd3js.orgD3.js에서 조직도에 적합한 것은 Tree 또는 Cluster 차.. 2024. 11. 24. 실직한김에만들어보자 - 5일차 #실직한김에만들어보자 시리즈 - 기록 1아무리 생각없이 개발하고 있다지만 간략하게 스토리보드는 필요할 것 같아서 태블릿으로 그려봤다. 히스토리는 내가 다 적을 수 없으니 '나무 위키' 처럼 제보를 받아 승인하는 방식으로 가면 어떨까 생각하고 있고,포트폴리오는 페이지를 만든 뒤 영역만 나누고 후배들이 만들게 하면 어떨까? 라는 생각을 하고 있다(아닌가? 내걸 먼저 만들고 데모처럼 올려야되나?). 그럼 일단 히스토리 관련 파일 및 페이지를 만들고 화면을 구성해보자. outline 영역을 display:flex; 에 direction: column; 으로 지정하여 상하로 영역이 나뉘도록 하였다.근데 100%일 때 border를 넣으면 위 사진처럼 스크롤바가 생긴다.box-sizing: border-box;.. 2024. 9. 6. 실직한김에만들어보자 - 4일차 #실직한김에만들어보자 시리즈 아이고... 코로나가 또 걸려서 한참을 고생했다. 덕분에 계획했던것들이 다 물거품으로~다시 시작해보자!! 4일차!! - 기록 1약간 설계를 비틀어서 아래와 같이 변경 해보려고 한다. 왜냐구? 그냥... 그게 더 이쁠 것 같아서! 하핫 기존 : 메인 메뉴 -> 로그인 화면신규 : 메인(메뉴 선택) -> 로그인 필요 할 경우 로그인좌우로 큼지막한 메뉴를 선택할 수 있게 변경!/* 예시 */ 위와 같이 outline-frame을 중앙 정렬 해주고, inline-frame 두개를 나란히 할 수 있게 display: flex 또는 grid를 사용.outline-frame { position: absolute; top: 50%; left: 50%; t.. 2024. 9. 4. 실직한김에만들어보자 - 3일차 #실직한김에만들어보자 시리즈 오늘은... 지도를 뒤에 배치할까 했었는데, 생각보다 별로인것 같아 화면을 먼저 바꿔볼까 한다.보통 db 구성하고, 화면설계하고... 뭐 그렇게 하겠지만 개발은 재미로 해야하니까 ㅎ - 기록 1요상한 글자 배열을 없애고, 이쁜 사진의 위치를 조정했다.바깥쪽엔 여백을 줘서 미(?) 를 살려보았다.대문으로는 깔끔하고 괜찮은 것 같다.나중에는 이미지가 랜덤으로 교체되게 해서 학교의 사진들이 보이게 하면 좋을 것 같다. 사진의 크기가 화면을 넘어갈 때는 어떻게 배치해야 하나 정말 곤란하다.이럴 땐 사진을 잘라서 원하는 위치를 보여줘야 하는데, 아래와 같이 position으로 위치를 조절해주면 된다.background-size: cover;background-repeat: no-rep.. 2024. 8. 2. 실직한김에만들어보자 - 2일차 #실직한김에만들어보자 시리즈 오늘은 1일차 마지막에 말 한 것 처럼, 화면을 구성해보려고 한다. 스토리보드는 없다. 왜냐면 귀찮으니까... - 기록 1thyemleaf 를 사용하는데, 못보던 에러가 출력되었다. 스프링 버전이 올라가서 나오는건가?[THYMELEAF][http-nio-8080-exec-1][/index]Deprecated attribute {th:include,data-th-include} found in template /index,line 7, col 11. Please use {th:insert,data-th-insert} instead,this deprecated attribute will be removed in future versions of Thymeleaf. 원래 heade.. 2024. 7. 31. 실직한김에만들어보자 - 1일차 #실직한김에만들어보자 시리즈다니던 회사에서 자금난으로 권고사직을 당했다. 실업급여를 처음 받아보는데, 오랜만에 휴식도 가질 겸 시간도 붕 떠서 공부도 할 겸, 그간 만들어보자 했었지만 못했던 대학 동아리 홈페이지나 만들어봐야겠다 싶어 기록을 시작한다 (물론 졸업은 한참 전에 함). - 개발 스펙spring boot 3.3.2open jdk 17gradlethymeleafpostgresql 16.3 - 구조mainㄴjavaㄴㄴcs.club.mojukㄴresourcesㄴㄴstaticㄴㄴtemplatesㄴㄴapllication.yml (porperties 보다 yaml을 선호해서 yml으로 변경) - 기본적으로 사용 될 dependenciesimplementation 'org.springframework.b.. 2024. 7. 29. 이전 1 다음
