No image

Dev/Frontend

[javascript Chart] 예쁜 자바스크립트 차트 (javascript chart) 사이트 amcharts!

최근에 자주쓰고있는 차트 사이트 amcharts 개인적으로 기능성, 응용성, 디자인 세 가지 모두 괜찮은 차트다.사용법도 너무 간단하고, 디자인도 예쁘고, 무엇보다 응용력이 쩌는 차트!한 차트를 가지고 기능을 추가하고 삭제하면서 무한히 새로운 차트를 만들 수가 있다. 무료버전은 차트의 왼쪽하단에 amcharts의 브랜드마크(?)가 있고, 유료버전은 마크 없이도 사용가능하다고 한다.   amcharts(www.amcharts.com/demos/)  사이트에 들어가면 데모를 볼 수 있는데, 원하는 차트를 클릭하면 코드 전체를 볼 수 있고, 사이트의 상단 메뉴바에 있는 Docs 를 들어가면 차트들을 어떻게 응용하여 사용할 수 있는 지 친절하게 알려준다.Chart Demos - amCharts www.amcha..

by DOMDOMI 2024. 6. 20.

No image

Dev/Frontend

[JQuery] Jquery link 제이쿼리 최신버전 링크 항상 사용!

맨날 구글링해서 찾기 불편해서 써두는 제이쿼리 최신버전 링크~   html 상단에다가 복붙하면 바로 사용가능하다

by DOMDOMI 2024. 6. 19.

No image

Dev/Frontend

[html/css] CSS로 타이핑 효과, 커서 효과 주는 방법

html, css로 타이핑 효과, 커서 애니메이션 효과 주는 방법 입니다 ! |

by DOMDOMI 2023. 5. 16.

No image

Dev/Frontend

[echarts.js] legend selector: Add function to deselect all legends

echarts에서는 모든 라벨(legends)의 전체선택, 선택된 라벨 반전의 기능이 존재합니다. 하지만 전체선택 해제 기능은 없더라구요?! echarts.js 소스코드에 legend 전체선택 해제 기능을 추가하는 방법을 작성해보려고 합니다!! 1. 전체선택, 반전선택 먼저 기존에 존재하는 전체선택("all")과 반전("inverse")는 이미 존재하는 기능이니 차트를 만들 때 옵션에 추가만 해주면 되게끔 만들어져있습니다. 아래와 같이 legend 안에 selector를 추가해주면 차트를 만들 때, 전체선택, 반전 버튼이 생성됩니다. options = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', selector: ..

by DOMDOMI 2023. 2. 3.

No image

Dev/Frontend

https기반의 사이트에서 http video, iframe 사용할 때 나타나는 오류

제가 https 기반 웹사이트에서 m3u8 영상링크를 불러와 재생시키기 위해서 video.js 자바스크립트를 사용했는데요, 동적으로 움직이지 않을 때는 정상작동하지만, 비동기적으로 팝업창처럼 껐다켰다하는 화면에서는 재생이 되지 않더라구요!! 그래서 처음에는 video를 iframe으로 변경해서, 따로 /video 페이지를 만들어서 m3u8영상을 불러와 video로 보여주고 메인페이지에서 iframe으로 src에 /video를 넣어 출력했습니다. 근데 이때 발생한 오류... 1. 영상 URL이 http라서 block처리 당함 https 기반의 사이트에서 iframe에는 무조건 https만 가능하고, http는 불가능한 것을 알았습니다. 이 문제를 해결하기 위해 아래 티스토리를 참고했어요. https://d..

by DOMDOMI 2022. 9. 3.

No image

Dev/Java

[spring] spring thymeleaf 반복되는 내용(헤더,푸터,메뉴) html 불러오기

헤더나 푸터, 메뉴 같이 모든 페이지에서 반복되는 부분들은 한 파일에 작성하고, 필요한 페이지에서 불러와 사용하도록 합니다. /src/main/resources/templates 경로에 _menu.html을 만들어주었습니다. 불러올 내용(조각)의 이름을 menu로 설정해줍니다. _menu.html // 반복되는 부분들 (헤더, 푸터, 메뉴, ... ) 메뉴가 필요한 default.html 페이지에서 메뉴가 들어갈 위치에 조각을 불러와주었습니다. default.html 끝입니다!

by DOMDOMI 2022. 8. 15.

No image

Dev/Java

[java/spring] multiple checkbox request.getParameter

아래와 같이 name이 같은 checkbox 들 중에서 apple, banana 2개를 선택하고 GET으로 넘겼을 때, request.getParameter로 받으면 맨 처음 선택된 apple만 받아오게 됩니다 String fruit = request.getParameter("fruit"); 선택된 모든 value값들을 리스트로 받아오기 위해서는 request.getParameterValues를 사용해줘야 합니다! String fruit[] = request.getParameterValues("fruit"); 잘 가져와졌는지 출력해보면 끝~! // 잘 가져와졌는지 출력해보기 System.out.println(Arrays.toString(fruit)); // 하나씩 출력해보기 for(int i=0; i

by DOMDOMI 2022. 6. 28.

No image

Dev/Frontend

[html/jquery] element repeater (add, remove)

원하는 구간만 계속해서 반복하여 복제하는 코드 html 이름 전화번호 추가 jquery/javscript 복제결과 !

by DOMDOMI 2022. 6. 14.

No image

Dev/Frontend

[오류해결] html element 복제(clone) 후 클릭이벤트가 정상적으로 호출되지 않는 오류

section 클래스를 가진 div에 clone_div 클래스를 가진 div를 복제하여 붙여넣었습니다. 하지만 여기서 오류가 등장.. 아래 클릭이벤트가 호출되지 않습니다. clone_div = $(".clone_div").clone(); $(".section").append(clone_div); $(".clone_div").click(function(){ .... }) 요 문제를 해결하기 위한 두가지 방법! 1. 아래와 같이 document가 생성된 후 클릭하면 호출되도록 변경합니다 $(document).on("click", ".clone_div", function(){ .... }) 2. 복제시 파라미터로 true를 넣어주면 됩니다 clone_div = $(".clone_div").clone(true)..

by DOMDOMI 2022. 6. 13.

No image

Dev/Java

[java] Unexpected character ('<' (code 60)) 오류해결

Json 파싱을 위해 HttpURLConnection을 하는 와중에 Unexpected character ('

by DOMDOMI 2022. 3. 22.

No image

Dev/Python

[django] 장고에서 사용자가 업로드한 파일 저장하는 방법

장고에서 사용자가 업로드한 파일 저장하는 매우매우 쉬운 방법입니다! models.py를 사용하지 않고 바로 views.py에서 파일을 저장하는 방법이에요. 일단 html에서 form태그에 enctype="multipart/form-data" 속성을 달아주세요. enctype 속성은 form의 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시합니다. {% csrf_token %} 파일 저장 이제 form 데이터를 받는 views.py 파일을 열고, FileSystemStorage를 임포트해주세요. FileSystemStorage는 별도의 파라미터 없이 생성하면 파일이 저장되는 디렉토리의 경로는 settings.py의 MEDIA_ROOT입니다. 아까 form에 있던 file을 request.F..

by DOMDOMI 2021. 10. 18.

No image

Dev/Frontend

[CSS] div 스크롤바 css로 꾸미기

스크롤바는 css에서 ::-webkit-scrollbar를 붙여서 꾸밀 수가 있답니다. 스크롤바 자체의 width를 변경하려면 ::-webkit-scrollbar { width: 5px; } 요런식으로 변경할 수 있는 것이죠 일반적으로 스크롤바가 아래이미지처럼 생겼는데, 래이미지로봤을 때 드래그해서 내려야되는 진한 스크롤바 css는 ::-webkit-scrollbar-thumb로, 진한 스크롤바를 제외한 연한 부분은 ::-webkit-scrollbar-track으로 수정할 수 있습니다. 예제를 보여드리기 위해 scrollDiv라는 클래스를 가진 div를 만들었어요. 스크롤바 넓이는 5px, 스크롤바 바깥부분인 트랙의 색은 투명으로 바꿨고, 드래그해서 내려야되는 스크롤바는 파란색(blue)으로 변경했어요...

by DOMDOMI 2021. 10. 18.