CSS14 [JavaScript] 검색어 자동완성 만들기 안녕하세요.~ 이번시간에는 웹 프론트에서 Javascript를 사용해서 검색어 자동완성 기능을 만들어 보겠습니다. 이번시간에는 서버와의 통신은 이용하지 않고, 클라이언트 측에서만 구현해보도록 하겠습니다. 스틱코드 (stickode.com/mainlogin.html) 이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다. 스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고, 다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 좋은 코드가 쌓일수록 강력해지는 플러그인 입니다. HTML 설정 스틱코드를 통해 HTML 코드를 설정해주도록 하겠습니다. 스틱코드를 사용하면 다음과 같이 코드가 완성됩니다. HTML 전문입니다. 여.. 2021. 6. 23. [HTML / CSS] 웹 프론트 drawable side menu 만들기 안녕하세요.~ 이번시간에는 웹 프론트에서 CSS를 이용해 드로어블 사이드 메뉴를 만들어 보도록 하겠습니다. 스틱코드 (stickode.com/mainlogin.html) 이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다. 스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고, 다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 좋은 코드가 쌓일수록 강력해지는 플러그인 입니다. 이번시간에는 부트스트랩(bootstrap)도 같이 사용하여 만들어보았습니다. HTML 설정 스틱코드를 통해 HTML 코드를 설정해주도록 하겠습니다. 스틱코드를 사용하면 다음과 같이 코드가 완성됩니다. HTML 전문입니다. 메뉴 입니다. 메뉴1 .. 2021. 6. 15. [JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 자바스크립트을 활용하여 입력값을 복사해서 다른 입력창에 값을 넣어주는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '입력된 값 복사해서 붙여넣기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 copyInputValue-HTML을 입력하면 이번 예제의 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 주문고객 정보 보내시는 분: 연락처: 주소: 배송지 정보 주문 고객 정보와 동일 받으시는 분: 연락처: 주소: 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 copyInputValue-CSS를 입력하면 이번 예제의 css 코드 샘플이.. 2021. 6. 14. [JavaScript] 배경 색상 변경시키기 자바스크립트을 활용하여 배경 색상을 변경시켜주는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 배경 색상을 변경시켜주는 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 backgroundimage_HTML을 입력하면 자바스크립트 배경색 바꾸기 - html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 backgroundimage_CSS를 입력하면 자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다. 이제 호출태그로 수정하고 싶은 부분을 수정해주세요. colorBox는 선택할 수 있는 색.. 2021. 5. 20. [JavaScript] 자바스크립트로 이미지 슬라이더 구현하기 이번 예제에서는 자바스크립트만을 활용한 이미지 슬라이더를 만들어보겠습니다. 먼저, 스틱코드에 올라온 이미지 슬라이더 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 jsImageSlideHTML을 입력하면 자바스크립트 이미지 슬라이드의 HTML 코드가 자동완성됩니다. 이제 호출된 코드 내에 필요한 값을 입력해줍니다. 여기서는 부분에 이미지 슬라이더에 들어갈 이미지의 주소값을 넣어주고, 이전 버튼과, 다음 버튼에 들어갈 문구를 작성해줍니다. 하단은 완성된 html 코드입니다. ← → 다음으로 html 코드에 맞추어 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 jsImageSlideCSS를 입력하면 자바스크립트 이미.. 2021. 5. 6. 이전 1 2 다음
