JavaScript207 [JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 자바스크립트을 활용하여 입력값을 복사해서 다른 입력창에 값을 넣어주는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '입력된 값 복사해서 붙여넣기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 copyInputValue-HTML을 입력하면 이번 예제의 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 주문고객 정보 보내시는 분: 연락처: 주소: 배송지 정보 주문 고객 정보와 동일 받으시는 분: 연락처: 주소: 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 copyInputValue-CSS를 입력하면 이번 예제의 css 코드 샘플이.. 2021. 6. 14. [JavaScript] 웹에서 음악 재생하기 스틱코드라는 플러그인을 이용해 웹에서 음악 재생 예제를 만들어봅시다. 스틱 코드에 등록된 코드를 간편하게 불러와서 사용해봅시다. * 웹에서 음악 재생하기 stickode.com/detail.html?no=2157 스틱코드 stickode.com ============================================================================ 전체코드입니다. 스틱코드 호출태그 : 웹에서 음악 재생하기 자바스크립트에서는 Audio 객체를 이용해서 오디오를 재생할 수 있습니다. Audio 객체 는 다음과 같은 속성과 메소드를 가집니다. 속성 src audio 파일의 경로나 url 을 지정합니다. volume audio의 음량을 설정합니다. 0~1 사이의 값을 가지며, 1.. 2021. 6. 12. [JavaScript] 디지털 시계 만들기 자바스크립트을 활용하여 디지털 시계를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '디지털 시계 만들기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 digitalClockHTML을 입력하면 자바스크립트로 디지털 시계 만드는 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 digitalClockCSS를 입력하면 자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다. 이제 호출태그로 완성된 코드 중 수정이 필요한 부분을 작성해줍니다. 수정이 필요한 부분은 body의 배경색(line 8.. 2021. 6. 2. [JavaScript] JSON 데이터 사용해보기 스틱코드라는 플러그인을 이용해 JSON데이터를 사용해봅시다 이번에 참고한 스틱코드입니다. * 자바스크립트 JSON 파싱 stickode.com/detail.html?no=2142 스틱코드 stickode.com ============================================================================ JSON 이란?? JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute - value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표.. 2021. 6. 1. [JavaScript] 태그 추가 삭제 기능 빠르게 구현하기 안녕하세요. 웹페이지를 통해서 태그를 추가 삭제하는 기능을 빠르게 구현하는 방법을 공유하겠습니다. 태그를 추가하는 기능은 게시물 작성, 콘텐츠 등록 등 다양한 상황에서 사용되는 기능입니다. 스틱 코드에 등록해놓고 필요할 때마다 불러와 사용하면 빠르게 기능 구현이 가능합니다. stickode.com/detail.html?no=2133 스틱코드 stickode.com 1. 태그 추가 추가할 태그를 입력하고 엔터(Enter)를 누르면 태그가 추가됩니다. 2. 태그 중복 체크 이미 추가된 태그는 중복 체크하여 추가하지 못하도록 처리했습니다. 3. 태그 여러 개 추가 여러 태그를 추가할 수 있습니다. 4. 태그 삭제 삭제할 태그에 마우스를 옮기면 해당 태그만 색상이 변경됩니다. x 버튼을 누르면 태그가 삭제됩니다.. 2021. 5. 28. [JavaScript] 배경 색상 변경시키기 자바스크립트을 활용하여 배경 색상을 변경시켜주는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 배경 색상을 변경시켜주는 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 backgroundimage_HTML을 입력하면 자바스크립트 배경색 바꾸기 - html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 backgroundimage_CSS를 입력하면 자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다. 이제 호출태그로 수정하고 싶은 부분을 수정해주세요. colorBox는 선택할 수 있는 색.. 2021. 5. 20. [JavaScript] 애니메이션 구현하기 (anime.js 사용) 이번 예제에서는 스틱코드 플러그인을 이용해서 anime.js을 사용해보겠습니다. stickode.com/detail.html?no=2121 스틱코드 stickode.com anime.js란? Anime.js는 자바스크립트를 기반으로 하는 경량의 애니메이션 라이브러리입니다. 여러분은 웹페이지에서 여러 가지 CSS 속성과 SVG 혹은 DOM 속성을 움직이는 데 이 라이브러리를 이용할 수 있습니다. 라이브러리에서는 애니메이션에 관한 모든 것이 제어 가능하고, 타깃으로 하고 싶은 엘리먼트나 움직이게 하고 싶은 속성들을 명시하는 다수의 방법을 제공합니다. 1. html 작성 (main.html) 스틱코드 단축 자동완성 호출 태그 : anime.js-html Animate left yellow Animate bot.. 2021. 5. 19. [JavaScript] 자바스크립트로 이미지 슬라이더 구현하기 이번 예제에서는 자바스크립트만을 활용한 이미지 슬라이더를 만들어보겠습니다. 먼저, 스틱코드에 올라온 이미지 슬라이더 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 jsImageSlideHTML을 입력하면 자바스크립트 이미지 슬라이드의 HTML 코드가 자동완성됩니다. 이제 호출된 코드 내에 필요한 값을 입력해줍니다. 여기서는 부분에 이미지 슬라이더에 들어갈 이미지의 주소값을 넣어주고, 이전 버튼과, 다음 버튼에 들어갈 문구를 작성해줍니다. 하단은 완성된 html 코드입니다. ← → 다음으로 html 코드에 맞추어 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 jsImageSlideCSS를 입력하면 자바스크립트 이미.. 2021. 5. 6. [JavaScript] 모달창 빨리 만들기 이번 예제에서는 스틱코드 플러그인을 이용해서 모달창을 만들어보겠습니다. stickode.com/detail.html?no=2090 스틱코드 stickode.com 1. html 작성 (main.html) 스틱코드 단축 자동완성 호출 태그 : modal_html 모달창 키기 스틱코드에서 개발에 필요한 모든 코드를 쉽게 사용하세요. https://stickode.com/mainlogin.html - link태그와 script태그를 이용해서 앞으로 만들 css파일과 js코드를 연결합니다. - 모달창 키는 버튼, 모달 백그라운드, 모달 닫기 버튼, 모달 안에 들어갈 택스트 등 레이아웃을 짭니다. 2. css 작성 (main.css) 스틱코드 단축 자동완성 호출 태그 : modal_css #modal_btn { .. 2021. 5. 5. 이전 1 ··· 20 21 22 23 다음
