DEV/javascript
-
jQuery Resizable을 통한 이미지 크기 조절 (이미지 사이즈 조절)DEV/javascript 2022. 6. 6. 19:10
이번 프로젝트에서 javascript 에디터 내부에 사진을 넣고 사이즈 조절이 가능하게 만들어야 했다. 사용하는 Trumbowyg editor는 기본적으로 사진 첨부 기능을 제공하지만 우리가 원하는 방향이 아니었다. 그래서 이미지 사이즈 조절을 위해 여러 방법을 만들어 두고 최종적으로 사용하게 된 방법은 Resizable을 사용하여 div 사이즈를 조절하고 div 내부에 사진을 100%로 채워 넣었다. 이미지를 한번 클릭하면 이미지를 마우스 클릭으로 사이즈 조절(크기 조절)이 가능하게 된다. (이미지를 드레그 하여 사이즈 조절) .js /** * [이미지 클릭 이벤트] * - 복사/붙여넣기한 이미지를 클릭하는 경우 사이즈 조절이 가능하게 함 * - jQuery ui 필요함 */ $(document).on..
-
Trumbowyg editor 무료 웹 에디터 사용 방법DEV/javascript 2022. 6. 6. 18:09
Trumbowyg editor (WYSIWYG editor)는 웹 에디터이다. 웹 HTML/Javascript로 에디터를 사용하고자 할 때 생각보다 적당한 에디터가 없다... 찾다 보니 각 에디터 별로 하자가 있어서 답답했다. toast ui editor가 무료 에디터 중 깔끔하고 다 좋은데 font size 조절이 없다. (node 환경에서는 유저가 만들어 놓은 플러그인이 있다.) 만들어서 사용하려고 했는데 내가 사용해야 하는 조건과 맞지 않아 사용이 불가했다. (강제로 만들었다. 맨 아래에 코드를 남겨두겠다. 추천하지는 않으나 혹시 필요하면 참조하자.) Trumbowyg html js // 실행 $(function(){ const content = "에디터 내용 입니다."; const myEditor..
-
Javascript 배열에서 조건에 맞는 값 필터링DEV/javascript 2022. 6. 4. 17:53
Javascript에서 배열에서 원하는 조건 값을 필터링해야 할 때가 있다. 그럴 때는 filter 함수를 사용하면 된다. const alphabet = [ 'a', 'b', 'c', 'd', 'e', 'f' ]; // 배열.filter(function(data) { return 리턴할 조건 }); const onlyB = alphabet.filter(function(data) { return data == 'b' }); console.log('onlyB', onlyB);
-
jQuery 요소의 높이, 넓이 (가로, 세로) 값 불러오기 / 값 변경하기DEV/javascript 2022. 6. 4. 17:37
jQuery로 요소의 높이, 넓이 값 불러오는 방법과 요소의 높이, 넓이 값 변경하는 방법 (가로, 세로) // 값 불러오기 const width = $('요소 id, class 등 지정').width(); const height = $('요소 id, class 등 지정').height(); // 값 변경하기 // 1. 그냥 변경 $('요소 id, class 등 지정').width(변경할 값); $('요소 id, class 등 지정').height(변경할 값); // 2. or css 접근하여 변경 $('요소 id, class 등 지정').css('height', 변경할 값); $('요소 id, class 등 지정').css('width', 변경할 값);
-
Javascript innerWidth, innerHeight, outerWidth, outerHeightDEV/javascript 2022. 6. 4. 17:27
Javascript로 브라우저 가로, 세로(높이, 넓이) 값 구하는 방법 // window 대신 parent, self 등 사용 가능 (뷰포트 또는 프레임 접근) const innerW = window.innerWidth; const innerH = window.innerHeight; const outerW = window.outerWidth; const outerH = window.outerHeight;