본문 바로가기

Front-end/Library7

[javascript] bootstrap datepicker 사용 방법 Summary 1. 기본 형태Boostrap CSS+JSDatepicker CSS+JS 날짜 선택: 2. 위치 바꾸기.on 이하 구문으로 활성화가 될 경우 행동에 대해 설정할 수 있다.// datepicker.js$(document).ready(function() { $('#yearpicker').datepicker({ format: 'yyyy', // 날짜 형식: 2025 (yyyy-mm-dd) minViewMode: 2, // 연도 선택 모드 (0=일, 1=월, 2=연도) autoclose: true, // 날짜 선택 시 자동 닫힘 todayHighlight: true // 오늘 날짜 강조 .. 2025. 6. 17.
[javascript] c3.js 사용하는 방법 SummaryGPT 독학 가능 여부 : O1. 기초 사용법2. 다양한 차트 형태 만들기 (data.type)3. 축 만들기 (axis)4. 색상 지정하기 (여러개 - data.colors, 한 개 - color)5. 선 유형 변경6. 범례 (legend) 1. 기초 사용법c3를 사용하기 위해서는 d3가 있어야 한다.bindto: '#chart' 이 부분에서 id 값이 chart인 영역에 해당 차트를 집어넣는다.만약 안에 무엇을 넣어도 차트가 우선순위가 가장 높다. 📊 나의 첫 번째 C3.js 차트 아래와 같이 뜨면 성공이다! 2. 다양한 차트 형태 만들기 - data 안의 type[차트 형태 변경 방법]기존 코드에서 type: '원하는 차트 형태' 로 수정하면 된다. .. 2025. 6. 17.
10분만에 적용하는 Finder 부트스트랩 사용 방법 문제 상황예쁜 input 박스를 구하고 싶다.생코딩 하는 것 말고 이미 만들어진 좋은 input 박스를 구해서 쓸 수 없을까?문제 해결부트스트랩 Finder 을 검색하거나 아래 사이트로 접속한다.https://finder.createx.studio/components/input-group.html Finder | Input group finder.createx.studio 원하는 UI를 찾고 원하는 것이 있는 곳에 HTML 버튼을 클릭한다. 그대로 복사해서 사용한다.- 코드 에디터를 켜서 html 문서의 기본 골격 형태를 만든다. (vs code의 경우 ! + enter 을 치면 만들어준다.) - 아까 복사한 코드를 태그 사이에 넣는다. - Finder은 부트스트랩을 추가해야 한다. 부트스트랩을 CDN.. 2024. 9. 30.
html 코드를 vue 코드로 변환하기 문제 상황다른 라이브러리 사이트에서 좋은 코드를 발견해서 사용하려고 한다.그런데 그 코드가 html으로 되어 있고, 나는 vue 프로젝트에 사용해야 하는 경우 생긴 문제이다. html 코드를 vue에 바로 넣으면 오류가 발생한다!vue 형식에 맞춰 넣어주어야 한다.문제 해결변환 공식HTML/CSS/JSVue3 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)vue 파일의 태그 안에 삽입CDN 등 라이브러리 연결 코드 중 CSS + 아이콘(font awesome  라이브러리 등)index.html 파일의  1단계 : 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)을 vue 파일의 태그 안에 삽입  2단계 : CDN 등 라이브.. 2024. 9. 30.