오늘 제가 작성해볼 글 주제는 제목에도 있듯이 confirm() 이라는 기능을 사용하지 않고 팝업 등에서 취소, 완료 버튼 기능을 구현하는 것입니다. confirm이라는 편한 기능이 있는데 굳이 사용하지 않는 이유는 예쁘지 않아서..입니다.원하는 디자인으로 예쁘게 만들었는데 투박한 창이 뜨는게 싫어서 조금 귀찮지만 다른 방법을 써보기로 했습니다. 일단 HTML을 간단하게 작성해 보겠습니다./* 보여지는 부분 */ 마동석 수정/* 팝업 레이어 */ 취소 완료 팝업 레이어에서 input 태그에 값을 입력한 후 cancel 버튼을 누르면 원래 상태로, confirm 버튼을 누르면 저장되면서 닫히게 하려고 합니다.처음에 change 함수를 사용했더니 너무 변수가 많아서, input이 blu..
Frontend/JavaScript
자바스크립트 중에 clipboard.js 라는 라이브러리가 있는데,이걸로 우리는 아주 쉽게 클립보드 기능을 구현할 수 있어요. 아래의 링크로 접속하여 파일을 다운로드 하거나,https://clipboardjs.com/ clipboard.jsA modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzippedclipboardjs.com아래에 올려놓은 CDN 스크립트를 HTML에 삽입해주세요. 1. JavaScript let clipboard = new Clipboard('a'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error'..
jQuery를 사용하여 작업을 하다가 clientHeight, clientWidth 값이 undefiend 가 뜰때 해결방법입니다. 1. console.log($(element)) 먼저 콘솔로 값을 찾고싶은 엘리먼트를 찍어주고 새로고침하여 콘솔창을 리로드합니다.그럼 이런식으로 console 창에 요소 정보들이 나열되는데,우리가 구하려는 clientWidth, clientHeight는 0 이라는 배열에 정보가 담기는것을 확인할 수 있습니다. 2.$(element).clientHeight 를 스크립트 작성하면 undefiend값이 뜨지만$(element)[0] 를 사용하면 객체값에 정상적으로 접근되게 됩니다. let e = $(element)[0]let eHeight = e.clientHeight;let e..
목표.slideDown(), .slideUp() 함수를 이용하여 마우스 오버시 작동되는 드롭다운 메뉴 구현하기HTML 마크업 컴퓨터 조립PC 할인안내 마우스 2만원 이하 5만원 이하 키보드 게이밍 사무용 CSS 1. 먼저 1차 카테고리 역할을 할 li를 정렬 해 줍니다. 기능만 구현 할 것이기 때문에 최소한의 꾸밈 없이 진행합니..
https://github.com/kenwheeler/slick/issues/3271 Slick Center Mode - Animations Bug between last and first slide · Issue #3271 · kenwheeler/slickHello, I'm using SLICK in center mode with some CSS animations but i have a bug, like a rebound of animations, between last and first slide. Do you have any idea to stop this rebound ? Thanks a lot...github.com 해당 문제infinite : true 일때 첫 슬라이드와 마지막 슬라이드의 애..
목표.on('click',function(){}) 함수에 대해 알아보자. 함수.on('click',function(){발생시킬 이벤트 함수 작성})이 함수는 .bind() 함수를 사용하지 않아도 this 값을 쉽게 잡아줄 수 있어 사용하기 편한 함수입니다..on('타입',function(){}) 함수의 '타입' 에는 click 이 아닌 다른 이벤트도 들어갈 수 있습니다.그건 나중에 따로 다루도록 하겠습니다. 학습1. HTML 우리는 스크립트만 다루면 되기 때문에 최소한의 마크업을 해주었습니다. 이 버튼을 클릭 해 보세요. 2. JavaScript이 함수를 입력하고 버튼을 클릭하면 개발자 모드(F12) 로 접속하여 콘솔창에 '클릭 되었어요' 라는 문구가 뜹니다.$(function(){ console.lo..
목표 append, appendTo, prepend, prependTo 함수에 대해 알아보자. 함수 1) append(), appendTo() : 원하는 요소를 '맨 뒤' 에 추가하는 함수. 2) prepend(), prependTo() : 원하는 요소를 '맨 앞' 에 추가하는 함수. 학습 1) HTML 마크업 안녕하세요. 배가고파요. 2) JacaScript A, B 의 위치를 정확하게 파악할것. $(function(){ console.log('연결성공!') //A = 새로 추가할 내용 //B = A가 추가될 요소(태그) //append = B의 맨 마지막에 추가됨. //appendTo //A.appendTo(B) $('이건 뒤에 추가되는 append() ').appendTo('div > ul') //..
목표 J Query 를 이용하여 간단하게 좌우 슬라이드 만들어보겠습니다. 워낙 예전에 배웠던 거라서 기억이 나지 않아 복습 겸, 기록 겸 남깁니다. 마크업 /* part1.html */ slide1 slide2 slide3 slide4 1 2 3 저는 2개의 리스트를 만들었습니다. ul : 슬라이더 (이미지 영역) ol : 페이지네이션 (버튼 영역) 이미지 구하기 이제 실습에 재미를 더하기 위해 본인이 원하는 사진 4장을 가져오도록 합시다. CSS 그리고 가지고 온 이미지들을 slide 1, 2, 3, 4 영역에 각 자 넣어주고, css를 사용하여 보기 좋게 정리 해 줍니다. /* part1.css */ @charset 'UTF-8'; *{ margin:0; padding:0; } ol, ul, li {..
