html38

• [JavaScript] 다중 select 예시(feat. 지역코드) 개발컨셉은 아래와 같다. 개발 컨셉 셀렉트박스 2개 존재 - 광역지자체 - 기초지자체 페이지 로드 후에는 광역지자체 데이터만 있는 상태고 기초지자체 데이터는 없는 상태 광역지자체 선택 시 해당 코드에 해당되는 기초지자체 데이터가 기초지자체 selectbox에 세팅됨 광역지자체에서 다시 선택을 누르면 기초지자체는 다시 데이터 초기화됨 지자체 선택 후 검색 이벤트 발생 시 선택한 광역지자체, 기초지자체코드가 selected됨 script $(document).ready(function () { //광역지자체코드 세팅 cf_L_inst_option('serachInstL'); //검색한 광역 지자체코드(jsp라서 jstl 문법 사용) var serachUpperInstL = ''; if (serachUpper.. IT/development 2024. 3. 1.

• 

  [JavaScript] selectbox 동적 표시 상위 선택값에 따라 하위 선택값이 다르게 표시되어야 되는 경우가 있다. 예를 들면 아래와 같은 상황이다. 광역지자체에 따라 그 하위 지자체 목록이 표시 1번 selectbox 선택 데이터를 조건으로 서버에서 데이터를 조회 후 2번 selectbox를 동적으로 그려야 한다. 상위 selectbox에 onchagne() 이벤트를 걸어서 데이터 변경이 감지될 때마다 서버에서 데이터를 가져와서 하위 selectbox의 option값을 그린다. 관리 광역지자체 관리 기초지자체 전체 function fn_get_LocalGovInstCode(){ //광역지자체코드 var selectedValue = $("#mngWideAreaLocgovCd").val(); $.ajax({ url: '/locgov/selectLoc.. IT/development 2024. 1. 21.

• 

  [jstl] 검색 결과 유지 (feat. 목록 화면) 목차 목록화면에서 검색 조건값을 유지하고 싶을 때 여러 가지 방법이 있겠지만 그 중 매개변수를 이용하는 방법은아래와 같다. 알고보면 참 간단한건데.. 오래되면 까먹는다. 그래서 기록을 한다. 검색 조건은 아래와 같다. 회원종류(체크박스) 회원종류는 불가피하게 하드코딩으로 넣었다. 일반회원 기업회원 전체 가입상태(selextbox) 전체 ${list.codeNm} 회원명(input) 회원명: input 속성을 제외하면 전부 원리는 동일하다. 조건식을 통해 코드값과 매개변수에 담긴 코드값이 일치할 경우만 checked, selected 처리를 한다. 처음 목록 화면을 조회 했을 시에는 매개변수의 코드값에 아무것도 없을테니 아무 액션을 하지 않고 조건 선택 후 검색할 때는 매개변수의 코드값이 있을테니 chec.. IT/development 2023. 12. 24.

• 

  [jstl] selectbox 조건과 일치하면 선택값 유지(feat. 상세화면) 간만에 추억의(?) jsp로 화면단을 개발하게 되었고 그 중 jstl에서 많이 쓰는 기능인데 잘 생각이 나질 않아 예전 레거시 코드를 뒤져서 찾았고 다음을 위해 메모를 한다. 상세화면에서 공통코드의 값을 불러와서 selectbox에 뿌리는데 회원 가입상태 코드와 공통코드의 코드가 일치하면 selected하는 경험자들에겐 아주 익숙한 기능이다. ex) 회원테이블에 가입상태코드가 있고 이는 공통코드 테이블의 코드와 매핑이 되는 상황이다. 코드를 보면 이해가 될거다. Controller //Controller내의 모든 view에서 전부 쓸 수 있도록 아래처럼 @ModelAttribute로 선언을 했다. /** 가입상태 목록*/ @ModelAttribute("mberSttusList") private List .. IT/development 2023. 12. 22.

• [thymeleaf] 동적 url 생성(feat. @{/url}) 사용자목록 웹 애플리케이션의 Context Path를 기반으로 상대경로로 URL 생성 Conext Path가 "/"일 경우 위와 같이 작성할 경우 호스트:8080/user로 url이 생성된다. 보통 정적 url말고 동적 url을 많이 사용한다. ※ 정적 url 작성 시 리소스 경로가 변경될 경우 다시 변경해야 한다. IT/development 2023. 9. 24.

• [Vue.js] checkbox 일괄 체크 전체선택 {{ item.name }} checkbox element를 v-model로 data의 items의 isChecked속성과 양방향 바인딩 시킨 후 전체선택 버튼 클릭 시 items를 순회하며 isChecked를 현재 상태와 반대로 설정 IT/development 2023. 9. 24.

• 

  [base64] 이미지를 base64로 인코딩 이미지를 base64로 인코딩 한 다음 문자열로 html에 삽입 아래와 같은 base64 툴을 이용해 이미지를 base64로 변환 Image to Base64 | Base64 Encode | Base64 Converter | Base64 Image to Base64 Convert image to Base64 online and use the result string as data URI, img src, CSS background-url, and others. Sometimes you have to send or output an image within a text document (for example, HTML, CSS, JSON, XML), but you cannot do this base64.gu.. IT/development 2023. 9. 9.

• 

  [JavaScript] htmlToPdf convert(feat. html2pdf) 목차 javascript/jQuery 기반 Hello, PDF! This is an example of converting HTML to PDF using html2pdf.js javascript/Vue.js 기반 Hello, PDF! This is an example of converting HTML to PDF using html2pdf.js convert 숨김 항목 PDF 변환 예시 숨김 항목을 버튼 클릭 시 잠시 보이게 해서 PDF 변환 후 다운로드 후 다시 숨김처리 하는 예제 Hello, PDF! This is an example of converting HTML to PDF using html2pdf.js convert 결과 위코드 에디터에 붙여 넣고 실행하면 pdf 다운로드 창 표시됨 ref.. IT/development 2023. 8. 26.

• [html] button에 type을 명시하자(feat. default submit) 목차 ajax로 페이징을 구현 했는데 페이지 이동이 되었다가 다시 같은 페이지가 호출이 되었다. 콘솔 보면 2페이지 데이터를 정상적으로 가져왔다가 다시 1페이지가 호출이 되고 있다. 간단한 원인 이었는데 꽤 많은 시간 삽질 끝에 나중에 다시 봐야지 하고 넘어 갔었다가 다시 봐서 해결 했다. before source 🙂 /** * 페이지네이션을 그린다. * @param paging */ function drawPagination(paging) { let pageHtml = ""; pageHtml += ""; //first const first = parseInt(paging.firstPage); pageHtml += ""; if (paging.currentPage === paging.firstPage) {.. IT/development 2023. 7. 9.

• 

  [bootstrap] bootstrap modal창 띄우기 목차 bootstrap modal 😄 역시 미래의 내가 보기 위해 부트스트랩을 이용해서 모달창을 띄우는 방법을 기록한다. html 코드와 js로 modal을 띄우는 방법이 존재하는데 여기서는 간단하게 html만으로 띄운다. js로 하는 방법은 아래처럼 코드를 수정하면 된다. button에 id값 주고 해당 버튼 클릭 시 $("#모달아이디").modal("show"); 이렇게 이벤트를 준다. 수정 테스트 환경: 부트스트랩 5.2.3버전 수정 버튼을 누르면 id가 "userModal"인 모달창을 띄우는 예제이다. bootstrap.min.css, bootstrap.bundle.min.css 2개의 파일이 필요하니 직접 다운로드 하거나 CDN으로 불러오거나 하면 된다. 아래 링크에서 다운로드 or CDN Do.. IT/development 2022. 12. 8.

• 

  [JavaScript] javascript 동적 엘리먼트에 feather 아이콘 추가 목차 오늘도 역시 미래의 내가 보기 위해 기록을 남긴다. 동적 엘리먼트에 feather 아이콘 추가 😃 feather 아이콘은 처음 사용해봐서 삽질할게 전혀 아니었는데.. 삽질을 좀 했다. 우선 아래처럼 feather.js를 불러온 다음 만든 엘리먼트에 data-feather를 부여 후 script에서 feather.replace()를 호출하면 아이콘이 이쁘게 생긴다. 물론 아이콘은 data-feather에 포함된 것만 된다. home 동적 엘리먼트에 feather를 추가할 경우엔 아래처럼 하면 된다. 내 경우는 아래처럼 해서 아이콘으로 변환되지 않았었다. 당연히 엘리먼트를 그려주는 스크립트 범위안에서 feather.replace()를 해야 한다. reference: https://github.com/f.. IT/development 2022. 12. 2.

• 

  [HTML]HTML img 요소 목차 HTML img 요소 브라우저는 다른 HTML 요소와는 조금 다른 식으로 img 요소를 처리함 HTML 페이지를 읽고 난 후 웹 서버로부터 각 이미지를 회수한 뒤 보여줌 만약 웹페이지에 큰 이미지가 한 개 이상 있다면 섬네일(큰이미지를 보기 위해 사용자들이 클릭할 수 있는 작은 이미지)을 생성하여 웹 페이지를 좀 더 유용하게 하고 내려받는 속도를 빠르게 할 수 있음 웹 브라우저가 널리 지원하는 이미지의 형식으로는 JPEG, PNG, GIF가 있고 JPEG 형식은 사진이나 다른 복잡한 이미지에 적합 GIF나 PNG형식은 로고나 단색으로 구성된 간단한 그래픽과 선, 텍스트에 적합 JPEG 이미지는 다양한 품질로 압축될 수 있고 필요한 정도에 따라 파일 크기와 품질 사이에 최적의 균형을 맞추어서 사용하길.. IT/HTML&CSS 2022. 11. 30.