전체 글38 [QueryDSL] Spring Boot build.gradle 설정 plugins { id 'java' id 'org.springframework.boot' version '2.7.12' id 'io.spring.dependency-management' version '1.0.15.RELEASE' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' sourceCompatibility = '17' configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springf.. 2023. 6. 29. [HTML]테이블 여러줄의 헤더 고정하는 방법 이전에 작성한 글 중에 css의 position: sticky를 이용하여 테이블의 헤더를 간단하게 고정하는 방법을 올린적이 있었다. 2020/05/18 - [Web-Front/HTML] - [HTML]테이블 헤더 고정하는 방법 [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. usang0810.tistory.com 쉽지만 유용한 방법이라 괜찮았었는데 댓글중에 헤더에서 rowspan을 사용했을 때 문제가 발생하는 것 같아서 확인해 보았다. 실제로 테스트해보니 첫번째 헤더위에 두번재 헤더가 올라가면서 의도치 않은 문제가 발생한다.. 2021. 3. 4. vue-cli3 개발 환경 구축 vue-cli 개발 환경을 구축하기 전 기본 개발 환경입니다. OS : win10 에디터 : vscode(default terminal : git bash) node : 12.13.1 git node같은 경우는 추후에 버전을 맞출 것을 생각하여 nvm으로 관리하는 것이 좋습니다. https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com nvm-setup으로 nvm 설치 후 nvm install v12.13.1.. 2020. 9. 3. [TinyMCE] Content appearance options 종류 (에디터에 커스텀 스타일 적용하는 방법) https://www.tiny.cloud/docs/configure/content-appearance/ TinyMCE | Content appearance options Configure the appearance of content inside TinyMCe's editable area. www.tiny.cloud 먼저 tinyMCE 공식 문서에서 Content appearance options를 테스트하던 중 body_class와 body_id 옵션이 자꾸 적용되지 않았다. 결론적으로 해결방안은 content_css 옵션으로 외부 css파일을 등록하고 그 css파일에 있는 클래스명이나 아이디값을 body_class나 body_id 옵션의 값으로 넣어주면 된다. TinyMCE 에디터 자체가 textar.. 2020. 5. 29. [JavaScript] 양력을 음력으로 변환, 음력을 양력으로 변환 양력달력의 경우 Javascript의 Date객체를 사용하면 쉽게 만들 수 있지만 음력달력을 만들려고 보니 생각보다 어려웠다. 먼저 음력이 어떻게 만들어지는지도 몰랐고 음력의 규칙성을 찾을 수 없었다. 구글링하며 소스를 찾다가 좋은 소스를 찾아서 조금 수정하고 주석을 추가로 달아서 적용했다. https://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=69098309&qb=amF2YXNjcmlwdCDslpHroKUg7J2M66Cl&enc=utf8§ion=kin&rank=1&search_sort=0&spq=0 댓글란에 보면 네이버의 달력에서 소스를 추출해 왔다고 한다. 실제로 적용해보면 음력으로 값이 잘 나오게 되고 음력날짜를 넣어 양력값을 얻는 부분도.. 2020. 5. 28. [TinyMCE] User Interface options 종류 tinymce.init({ selector: 'css선택자', ui options... }); branding: boolean 값 false 시 하단의 'Powered by Tiny'문구를 삭제할 수 있다. premium 유저들에게만 선택적이다. draggable_modal: boolean 값 true 시 생성되는 모달창을 드래그로 움직일 수 있게 된다. elementpath: boolean 값 false 시 하단에 표시되는 요소선택자가 안보이게 된다. font_foramts: 'custom font name=origin font name, sub1, sub2...; other...;' 폰트명을 설정할 수 있다. 하나의 폰트명에 여러개의 폰트를 정할 수 있고 맨앞의 폰트가 없을 시 뒤에 있는게 설정되는 .. 2020. 5. 28. [TinyMCE] Integration options 종류 tinymce.init({ selector: 'css선택자', integration options... }); auto_focus: '요소의 id값' 에디터가 생성된 후 포커스를 해당 에디터로 자동으로 맞춰준다. init_instance_callback : function(editor) {} 에디터 객체가 초기화 된 후의 콜백함수를 지정할 수 있다. plugins TinyMCE가 로드할 때 로드할 플러그인을 지정한다. 기본적으로 TinyMCE는 플러그인을 로드하지 않는다. 여러개의 플러그인을 로드할 때는 구분자를 ' ' 공백으로 작성한다. 자주 사용하는 플러그인 목록 plugins: [ 'advlist autolink link image lists charmap print preview hr anchor.. 2020. 5. 27. [TinyMCE] textarea 값 가져오는 방법 TinyMCE 홈페이지를 보면 textarea를 form태그로 감싸 post방식으로 전송하라고 되어있다. 그래서 post방식으로 전송을 해보면 textarea적혀있는 값과 형태에 맞는 태그들이 전부 그대로 전송된다. 그런데 페이지이동없이 처리하는 ajax로 처리하려면 textarea안의 값을 추출해야하는데 javascript의 value로 해보면 textarea의 초기값만 추출되고 수정된 값들은 추출되지 않는다. 에디터를 다음과 같이 수정한 뒤 개발자 도구에서 textarea의 값을 확인해보면 안의 값은 바뀌지 않는걸 확인할 수 있다. TinyMCE는 textarea가 아닌 iframe을 올려 그 안에서 변경되는 값을 적용하기 때문에 textarea의 값은 초기값만 적용된다. 에디터안의 수정된 내용을 가.. 2020. 5. 27. [Nodejs] ejs로 html태그값 유지하면서 사용하는 방법 TinyMCE라이브러리를 공부하며 post로 서버에 전송해보고 싶은게 있어서 nodejs로 서버를 구현하여 테스트하던중 값은 잘 넘어가지만 ejs로 html태그값을 출력하려고 하면 자꾸 '' 꺽세괄호들이 '<', '&rt;'로 컴파일할 때 자동으로 바뀌는 현상이 나타났다. 어찌하나 계속 구글링 하던중에 스택오버플로에서 답을 찾았다. https://stackoverflow.com/questions/10326950/render-a-variable-as-html-in-ejs Render a variable as HTML in EJS I am using the Forms library for Node.js (Forms), which will render a form for me on the backend as .. 2020. 5. 27. [TinyMCE] 라이브러리로 textarea 변경하기 TinyMCE 라이브러리는 textarea태그나 div태그의 편집을 도와주는 도구입니다. 라이브러리를 적용하면 기존의 textarea가 다음과 같은 화면으로 출력됩니다. 블로그나 카페에서 많이 사용하던 편집기의 기능들이 대부분 담겨있습니다. 다음은 TinyMCE 공식 홈페이지입니다. TinyMCE의 자세한 설명과 소개글을 확인할 수 있습니다. https://www.tiny.cloud/ The Most Advanced WYSIWYG HTML Editor | TinyMCE Download TinyMCE for free, the most advanced WYSIWYG HTML editor designed to simplify website content creation. www.tiny.cloud 먼저 위의 .. 2020. 5. 27. [Node js] ${} 표현식 오픈 튜토리얼을 보면서 Nodejs를 차근차근 따라해보고 있는데 jsp에서의 EL 표현식과 비슷한 표현식을 알게 되었습니다. 사용법은 EL과 거의 똑같았지만 리터럴이 홀따옴표(')나 쌍따옴표(")가 아닌 숫자 1옆에 있는 특수문자 (`)를 리터럴로 사용해야 저 표현식이 제대로 인식되었습니다. var template = ''; fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ console.log(description); if(err) throw err; template = ` ${description} `; response.end(template); }); 그리고 response.end() 함수를 readFile 바깥에다 두었.. 2020. 5. 20. [JavaScript] yyyyMMdd, yyyy-MM-dd형식으로 오늘날짜 출력하기 먼저 new Date()로 날짜 객체를 생성하면 객체가 만들어진 날짜로 저장이 됩니다. Tue May 19 2020 08:50:54 GMT+0900 (대한민국 표준시) -> 이런식으로 출력이 되는데 여기서 년도, 월, 일수만 뽑아서 함수로 만들겠습니다. 객체의 메소드로 getFullYear(), getMonth(), getDate()를 사용하면 해당 값들을 추출할 수 있는데 getMonth()의 경우 시작 월수가 0~11이기 때문에 +1을 해주어야 합니다. 날짜를 꼭 8자리를 맞춰야할 때 월수나 일수가 1자리일 경우 202051 이런식으로 출력될 수 있습니다. 그렇기 때문에 값 앞쪽에 "0" 문자열 리터럴로 더해준 뒤 문자열을 나누는 메소드인 slice()로 뒤에서부터 2개를 잘라주면 월수와 일수가 2자.. 2020. 5. 19. [CSS] 부분 반응형 크기조절 (calc 연산) css에는 calc()연산이 있습니다. width나 height나 특정값을 딱 정해진 값이 아닌 특정값에 더해지거나 빼거나 하는 값을 넣을 수 있습니다. 예를들어 width: calc(100% - 200px)이런식으로 가능합니다. 이러면 특정 태그의 영역을 200px을 제외한 모든 가로크기로 영역을 차지하게 됩니다. 다음은 calc연산을 이용한 실행 결과입니다. 연두색의 경우 브라우저의 크기가 줄거나 늘어나는 것에 상관없이 400px로 고정되지만 보라색의 경우 400px을 제외한 나머지 영역을 전부 차지하게 됩니다. 이게 calc연산을 이용한 방법입니다. 전체 코드입니다. 더보기 2020. 5. 18. [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. 먼저 html코드의 큰 틀입니다. 1번헤더 2번헤더 3번헤더 4번헤더 5번헤더 그 다음은 핵심 css코드입니다. div크기를 table의 크기보다 작게 만들어준 것은 가로스크롤 시에도 어떻게 동작되는지 보여주기위해서 저렇게 만든 것입니다. #userListTable th에 position: sticky를 지정하고 꼭 top: 0으로 지정해줘야 헤더가 고정이 됩니다. top에 다른값을 주면 고정이 안됩니다. 그리고 배경색을 th에 지정해줘야 합니다. tr에 배경색을 지정해주면 tr은 고정되는것이 아니라 부자연스럽게.. 2020. 5. 18. VSCode HTML 자동완성 만들기(사용자 코드 조각 추가) 기본적으로 제공되는 html 자동완성 코드들이 있지만 수정할 필요없이 본인에게 딱 맞는 자동완성이 되면 훨씬 더 효율적입니다. 먼저 기본적으로 자동완성되는 코드를 보면 lang을 ko로 변경해야하고 viewport부분도 제거하고싶습니다. 또 title태그 내용부분이 지워져있으면 더 좋을 것 같기 때문에 위의 내용을 담은 자동완성을 만들어 보겠습니다. vscode 왼쪽 하단의 톱니바퀴 모양을 눌러 '사용자 코드 조각'부분을 클릭합니다. 그러면 위와같은 화면이 나오는데 'html'을 입력하여 'html.json'파일을 선택해 수정화면으로 들어오면 됩니다. 주석으로 예제들이 적혀있으므로 잘 따라해주면 됩니다.(작성하고 나서 꼭 저장을 해주셔야 적용이 됩니다!) "korea html form" : { "pref.. 2020. 5. 11. 이전 1 2 3 다음
