chart.js 를 사용할 때, canvas의 크기(width, height)를 조절하고 싶다.
아주 간단하다.
canvas를 감싸고 있는 div 태그를 하나 만들고, div 태그에 position: relative를 적용한 뒤, width, height 를 작성하면 된다.
예시)
<div style="position: relative; height:600px; width:400px;">
<canvas id="myCanvas" >
Your browser does not support the canvas element
</canvas>
</div>
그러면 변한 사이즈를 확인할 수 있다.
물론 class 등을 사용하여 css 태그로 적용할 수 있는 방법이 있다.
Vue.js 3 + bootstrap이 되지 않아 Vuetify를 설치하려고 하였다. 그러나,,,
Vue.js 3 - Vuetify 를 설치하던 와중 에러 발생.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23
at Array.forEach (<anonymous>)
at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)
이렇게 또 에러가 발생하였다.
예. 또 지원을 안합니다. (vue3 어따가 써먹냐)
다운그레이드(down grade)를 하던가 다른 css framework를 사용하던가 해야하는데, 뭐가 남았을까용?
tailwind는 되나 실행해보러 갑니다.
Get started with Vuetify
Get started with Vue and Vuetify in no time. Support for Vue CLI, Webpack, Nuxt and more.
vuetifyjs.com
Errors while doing vue add vuetify(vue3 preview)
I tried to start a vue3 project with vuecli, but when I add vuetify, errors occurred while everything is normal when used vue2. It says Error: You cannot call "get" on a collection with no
stackoverflow.com
안녕하세요 상훈입니다.
우리의 WebApplication을 조금이라도 더 예쁘게 꾸며줄 css - transition을 포스팅하겠습니다.
그 중 hover의 이벤트를 사용하려고 합니다.
html에서는 클래스명만 정해주시면 됩니다.
<body>
<p>width, height, bg-color, transform 을 위한 트랜지션 결합.</p>
<div class="transform"></div>
</body>클래스명 "transform"에 대해서 아래의 style을 지정해주면 됩니다.
<style>
.transform{
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.transform:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
rotate를 보시면 아시다시피 transition 과 transform으로 지정한 내용을 살펴보면,
2초동안 [ 가로 200px, 세로 200px, 배경색 #FFCCCC, 180도 회전 ] 을 하게됩니다.
이상입니다.
해당 내용은 전부 'MDN WebDocs' 에 작성되어져 있습니다.
CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN
CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니
developer.mozilla.org
안녕하세요 상훈입니다.
Vue.js + tailwind.css 를 이용하여 모달창을 구현하도록 하겠습니다.
컴포넌트의 개념을 첨가하였으니, 양해바랍니다. (컴포넌트 넣을줄만 알면 됨)
<template >
<div
v-if="ModalDisplay"
class="shadow-lg w-full h-full flex bg-black bg-opacity-70 justify-center align-middle items-center ">
<div class="w-1/3 h-1/2 bg-white rounded relative">
<div class="relative w-full">
<div class="flex text-center items-center justify-center pt-2">
<h1 class="font-bold text-2xl">모달창 레이아웃</h1>
</div>
<svg
@click="ModalDisplay = false"
id="closeModalBtn" xmlns="http://www.w3.org/2000/svg" class=" cursor-pointer h-10 w-10 absolute top-0 right-0 hover:text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<div class="w-full pt-5">
<hr>
<p class="py-5 px-5 text-xl">
안녕하십니까?<br>
모달창입니다.
</p>
</div>
<div class="w-full">
<button
@click="ModalDisplay = false"
class="absolute bottom-0 right-0 border border-solid round w-24 h-10 my-2 mx-3 hover:text-red-700 hover:border-red-500" >
닫기</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ModalDisplay: true,
}
}
}
</script>
<style>
</style>
v-if 와 @click 바인딩으로 해당 기능을 구현하였습니다.
ModalDisplay를 기본값으로 true로 해서 자동적으로 출력되어져있게 해놓고,
닫기 버튼이나, X버튼을 눌렀을 때 종료가 되게 하는 겁니다.
svg를 button으로 감싸서 button으로 바꾸는게 용도에 맞아 좋아보입니다.
혹시나해서 App.vue 도 게시
<template>
<Modal />
</template>
<script>
import Modal from './components/Modal.vue';
export default {
components: {
Modal,
},
}
</script>
<style>
</style>
안녕하세요 상훈입니다.
Spring에서 css 경로를 잡아주도록 하겠습니다. [ jsp example css path ]
실제 경로는
"src/main/webapp/resources/css/cssfilename.css" 인데요,
이걸 다 써줄 수도 없으니, jsp 파일에서 작성할 link부분을 바로 작성하도록 하겠습니다.
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/addrbook.css" type="text/css" media="screen" />
${pageContext.request.contextPath} 를 넣어주는겁니다.
이상입니다.
안녕하세요 상훈입니다.
Laravel(라라벨) 의 style을 Bootstrap 의 css로 자동 지정하게 하는 방법을 포스팅하겠습니다.
* 필요사항 : Npm, Composer, Laravel
$ composer create-project laravel/laravel 프로젝트이름
$ cd 프로젝트 이름
$ composer require laravel/ui
$ php artisan ui bootstrap
$ npm install
새로운 view 파일 한개를 생성합니다. 저는 test.blade.php 로 하겠습니다.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<input type="text" class="form-control">
<button class="btn btn-primary">save</button>cdn을 따오는 것이 아닌 asset() 을 이용한 default css 경로 지정입니다.
Route::get('/test', function () {
return view('test');
});
$ php artisan serve
// 다른 bash
$ npm install & npm run watch
localhost:8000/test 로 접속하면,
css가 적용되어져 있는 것을 확인하실 수 있습니다.
이상입니다.
참고
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
getbootstrap.com
https://www.positronx.io/how-to-properly-install-and-use-bootstrap-in-laravel/
www.positronx.io
| [ Node.js ] npm Error: Cannot find module 'semver' 에러 해결 하는 방법 (0) | 2021.10.27 |
|---|---|
| [ Npm Error ] 에러 해결 npm : Depends: node-gyp (>= 3.6.2~) but it is not going to be installed (0) | 2021.10.26 |
| [강좌 완료] Simple Book App (0) | 2021.10.11 |
| [ Laravel ] Validation / Request 이용하는 방법 / Controller에서 분리하기 (0) | 2021.10.07 |
| [ Laravel ] N : N Relationship / 다 : 다 관계 (0) | 2021.10.05 |
안녕하세요 상훈입니다.
Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.
BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.
html
<div id="loader">
<div class="spinner-border text-info position-absolute top-50 start-50" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Css
#loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: rgb(156, 154, 154);
z-index: 99;
text-align: center;
}
#loader>div {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
Javascript
$(window).on('load', function () {
$('#loader').hide();
})- 제이쿼리를 사용할 수 있게 해야합니다.
↓↓ 제이쿼리 cdn 적용하는 법 ↓↓
[ jQuery ] jQuery 제이쿼리 CDN 링크 공유
안녕하세요 상훈입니다. 자바스크립트 - 제이쿼리의 cdn을 공유합니다. 해당 코드 한줄을 내에 넣어줍니다.
code-hoon.tistory.com
↓↓ BootStrap cdn 적용하는 법 ↓↓
[ BootStrap ] 부트스트랩 cdn 적용하는 방법
안녕하세요 상훈입니다. 프론트엔드 부트스트랩 프레임워크를 사용하고 싶을때, cdn으로 class와 id에 대한 javascript, css를 적용하는 방법을 포스팅하겠습니다. 아래의 링크를 복사하여 head 태그 안
code-hoon.tistory.com
이상입니다.
| [ Javascript ] [ jQuery ] Ajax - PHP 사용하기 (0) | 2021.10.20 |
|---|---|
| [ JavaScript ] Ajax 기본 틀 (0) | 2021.10.20 |
| [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 (0) | 2021.10.06 |
| [ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제 (0) | 2021.09.09 |
| [ JavaScript ] Split 예제, 자바스크립트 문자열 나누기 (0) | 2021.09.06 |
안녕하세요 상훈입니다.
프론트엔드 부트스트랩 프레임워크를 사용하고 싶을때,
cdn으로 class와 id에 대한 javascript, css를 적용하는 방법을 포스팅하겠습니다.
아래의 링크를 복사하여 head 태그 안에 넣는 방법(1)
<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<!-- Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
이곳에 들어가 해당되는 태그들을 복사하여 head 태그 안에 넣는 방법(2)
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
이와 같이 head 태그 내에 넣는것이다.
| [HTML] a 태그에 꼭 추가 해야 하는 속성(Attr) (0) | 2025.03.07 |
|---|---|
| [HTML] img 태그 현명하게 사용하기 (0) | 2023.05.29 |
| [NVM] Node.js 버전 낮춰서 Nuxt.js 프로젝트 구동하기 / window (0) | 2022.11.11 |
| VSCode - HTML Formatter 설정하는 방법, html 서식 지정하기 (0) | 2022.05.23 |
| [ Html ] Title 이미지(Image) / 아이콘(Icon) 적용하는 방법 (0) | 2021.10.05 |