●▲■ 개발일기

See the Pen 마우스 드래그로 영역 resize (html, css, js) by Lee sangmin (@sangmin2) on CodePen.

http://imakewebthings.com/waypoints/guides/getting-started/ Getting Started • Waypoints Getting Started The first thing you'll need to do is download Waypoints. The lib/ directory contains builds for jQuery and Zepto, as well as a version with no framework dependencies. Choose the one that fits your needs and include it. The rest of this guid imakewebthings.com

자바스크립트 객체를 문자열로 변환하는 방법은 JSON.stringify() 메서드를 사용하는 것입니다. 이 메서드는 자바스크립트 객체를 JSON 문자열로 변환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다. const obj = { name: "John Doe", age: 30 }; console.log(JSON.stringify(obj)); 위 코드는 다음과 같은 결과를 출력합니다. {"name":"John Doe","age":30} 이렇게 변환된 문자열은 다시 객체로 변환할 수 있습니다. 이번에는 JSON.parse() 메서드를 사용합니다. const str = '{"name":"John Doe","age":30}'; console.log(JSON.parse(str)); 위 코드는 다음과 같은 ..

자바스크립트에서 객체를 배열로 변환하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 객체의 속성을 반복적으로 접근하여 push() 함수로 배열에 값을 추가하는 것입니다. 다음은 객체의 key(속성명)를 배열로 변환하는 예제입니다. const obj = { a: 1, b: 2, c: 3 }; const arr = []; for (let key in obj) { arr.push(key); } console.log(arr); // ['a', 'b', 'c'] 또 다른 방법으로는 Object.keys() 함수를 사용하는 것입니다. 이 함수는 객체의 속성명을 배열로 반환합니다. const obj = { a: 1, b: 2, c: 3 }; const arr = Object.keys(obj); console.l..

밥먹기 잠자기 운동하기먹기 HTML 삽입 미리보기할 수 없는 소스

이미지가 없는 경우에 예외처리는 보통 img 태그 안에 onerror="this.style.display = 'none'" 처리하면 되는데, onerror를 사용하지 않고 함수로 처리하는 방법 중 하나를 기록. html 코드에 적용한 예. 이미지가 없으면 : https://dev-5.onns.co.kr/~sml/pcare-v4/web-www/_lib/img/img-default-drug.png 이미지가 있으면 : https://www.pharm.or.kr:442/images/sb_photo/big3/201802190001101.jpg JS영역에서 하단 https://www.pharm.or.kr:442/images/sb_photo/big3/201802190001101.jpg 이미지의 주소를 바꿔서 이미지가..

See the Pen 부트스트랩bootstrap 스타일 프로그래스바progressBar by Lee sangmin (@sangmin2) on CodePen. 이거 쉽게 찾을 수 있을거라 생각하고 구글링했는데 한참 찾았음. 1.5초 이후에 프로그래스 바 게이지가 올라가는 애니메이션도 추가함. 현재 80명 참여 (80/100)

js로 div를 fade-In 애니메이션 효과를 주기 위해서 하루종일 삽질하다가 겨우 찾은 귀중한 자료. 원래 display: none에서 block으로 변경할 때 CSS transition태그는 적용이 안된다고 한다. 원인은 아래 블로그 포스트 참고. https://velog.io/@dev-tinkerbell/display-none%EC%9D%B4-transition%EC%9D%B4-%EC%95%88%EB%A8%B9%ED%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0 display none이 transition이 안먹히는 이유 해결방법 말고 원인 궁금하지 않나요..?🤓 velog.io 위 포스트를 참고해서 여러가지 방법 중 visibility:visible, hidden 태그를 이용해 보..

로그인 & 회원가입 작업 중. 비밀번호 validation 이후 버튼 활성화가 된다. 비밀번호는 숫자, 영문, 특수문자(선택) 10자리 혼용가능. 비밀번호 양식에 맞게 입력란에 비밀번호를 입력하면 비밀번호 확인 입력란이 자동으로 하단에 노출된다. See the Pen 비밀번호 정규표현식 유효성 검사 (버튼 활성화) by Lee sangmin (@sangmin2) on CodePen.

일을 하다보니 간단한 텍스트와 문자나 단어들을 바꿀 일이 많다. innerText, innerHTML, textContent를 이용해도 되지만 이번에는 replace() 메소드로 새로운 문자열 반환하는 방법을 사용해 보았다. 교체하기 되돌리기 Please visit Tistory!

휴일에 우연히 유튜브 보다가 따라서 만들어 본 js animation. 요새 자바스크립트에 빠져 있다보니 자연스레 관심이. 일 때문에 자바스크립트를 많이 만지고 있는 요즘. 어디에 기록을 할까 고민하다가 티스토리 계정 생성해서 이제 여기에 메모할 예정. 출처 : https://www.youtube.com/watch?v=YhXxBhInJMI