퍼블리싱/javascript&jQuery (22) 썸네일형 리스트형 [CSS/JQUERY]모바일 좌우 사이드 메뉴 만들기 모바일에서 자주 사용하는 사이드 메뉴를 만들어봤어요! 간단한 제이쿼리를 이용해서 만들었습니다. 먼저 완성된 모습입니다. 너무 속도를 빠르게 했나 조금 정신이 없네요ㅎㅎ 아래에 한번에 파일로 다운 받을 수 있도록 파일도 올려 놓을게용. html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 메뉴01 메뉴02 메뉴03 메뉴04 Colored by Color Scripter cs 아이콘은 무료 아이콘을 사용했어요! 아이콘 출처 : https://iconmonstr.com/ iconmonstr - Free simple icons for your next project iconmonstr.com 유용한 아이콘을 무료로 이용할 수 있어서 요긴하게 쓰고 있습니다. 먼저, hea.. [CSS/JAVASCRIPT]간단한 팝업창(모달창) 만들기 간단한 팝업창(모달창)을 만들어 보려고 합니다. 먼저 완성 된 모습! 아래의 '모달창아 나와랏'버튼을 눌려봐주세용! 모달창아 나와랏 close 모달창 내용 버튼을 누르면 팝업창을 띄고 뒷배경을 전체 깔아줘서 다른부분이 클릭 되지 않게 하고, 팝업창을 더 잘보이게 합니다. HTML12345678모달창아 나와랏 close 모달창 내용 Colored by Color Scriptercs 1. 버튼을 하나 만들어줍니다. (팝업창을 띄워줄) (id="modal_btn") 2. 팝업창이 띄워졌을때 전체 배경으로 들어갈 DIV를 만들어 줍니다. ( class= "back_bg") 3. 내용이 들어갈 팝업창 박스를 만들어주고 close버튼도 만들어 줍니다. ( class = "modal_wrap") CSS12345678.. [JAVASCRIPT]typeof 과 instanceof의 차이점 typeof 피연산자의 데이터 타입을 반환하는 연산자 문법 1 2 typeof variable cs 반환 값 undefined boolean string number object function 예시 1 2 3 4 5 6 7 8 typeof 5; // return 'number' typeof 'haha'; // return 'string' typeof {}; // return 'object' typeof []; // return 'object' typeof function () {}; // return 'function' typeof null; // return 'object' cs instanceof 개체가 특정 클래스의 인스턴스인지 여부를 나타내는 boolean값으로 반환하는 비교연산자 문법 1 Ob.. 자바스크립트/제이쿼리 플러그인 'swiper' 사용법 내가 직접 자바스크립트를 짜서 슬라이드를 만들 수도 있지만 잘들어진 플러그인을 활용하면 시간 절약도 되고 아주 우용하다. 우선 SWIPER 는 터치 슬라이드가 가능한 슬라이드 플러그인이다. 사용방법이 간단하고 웹사이트가 정리되어있지만 그래도 내가 필요한 부분만 정리해보려고 한다. 설치방법 다운 받아서 파일을 업로드 OR CDN를 연결시킴 (다운 받는건 귀찮아서 항상 CDN를 쓴다ㅎㅎ) CDN 연결 방법 위 코드를 헤드에 넣어준다. Slide 1 Slide 2 Slide 3 ... 필요하지 않는 부분은 지워주면된다. ( 스크롤바는 사용하지 않아 swiper-scroller의 div를 삭제 ) 자바스크립트로 실행시킬때 ... 제이쿼리로 실행시킬때 $(document).ready(function () { //.. [jquery]반복문을 이용해 문자열 자르기 split() 어떤 텍스트의 스타일을 수정하고싶은데, 텍스트가 모두 통으로 들어가 있어서 css를 적용하기가 힘들어서 텍스트를 나눠서 가지고 오는 방법을 찾아봤다. 문제특징 01. 반복되는 구조를 가지고 있다. ( li가 3번 반복되는 구조) 02. 텍스트가 하나의 태그에 모두 들어가 있다. 03. 텍스트가 공통된 구조로 되어있다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 What is Lorem Ipsum? Lorem Ipsum is simply dummy A. Lorem Ipsum is simply dummy B. text of the printing C. and typesetting industry. Why do we use it? It is a l.. [자바스크립트] 클래스를 이용한 메서드 제이쿼리로 하면 간단한데, 자바스크립트로는 자주 사용해보지 않아서 정리보면 공부가 될것 같아 적어보려 합니다. - element.className 클래스 이름을 가지고옴 ex ) 1 2 3 4 5 document.getElementById('id').className // "box01" cs - element.classList element.classList 자체는 읽기 전용 property지만 add()와 remove() 메서드를 이용하여 변형할 수 있다. ex) 1 2 3 4 5 document.getElementById('id').classList //[object DOMTokenList]: {0: "box01", length: 1, value: "box01"} cs - element.classLi.. [제이쿼리]특정시간에만 버튼(이미지) 활성화 버튼을 특정 시간에만 활성화 시키고 싶을때 또는 특정 시간에만 어떤 이미지를 사용하고 싶을때 사용 할 수 있는 제이쿼리를 만들어 보려고 한다. 원하는 기간에만 특정 이미지로 교체( jquery) 예를 들어 이렇게 9시부터 6시까지만 왼쪽 버튼(이미지)을 활성화 시켜놓다가, 6시가 지나면 비활성 버튼으로 이미지를 교체할 수 있는 방법이다. HTML 1 2 3 4 5 Colored by Color Scripter cs 이미지를 넣은 DIV 블럭을 하나 만들어 준다. JQUERY 현재시간 구하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var Now = new Date(); // 현재 날짜 및 시간 var nowMonth = Now.getMonth() +.. 모두체크/모두해지 체크박스 만들기 주로 회원가입할 때 동의하기 부분에서 많이 사용하는 체크박스를 만들어봤어요. 특징은 1. '모두 선택하기', '모두 해지하기' 2. 하나라도 해지되면 모두 선택 해지 html과 css는 그 전글에 올려놨어요. 이 전글이예요. -> [css] 회원가입 폼 체크박스 요건 완성된 모습입니다. 작동되는건 이전글에서 확인! 자바스크립트 부분입니다. html 과 css는 이 전글에 있어요. https://ddorang-d.tistory.com/9 [CSS] 회원가입폼 체크박스 체크박스를 활용하는 회원가입 폼을 만들어 보려합니다. 네이버 회원가입 폼을 보고 만들어서 네이버의 회원가입 폼과 아주 유사한 디자인을 가지고 있어요. 특징은! 1. 첫번째 체크박스(모두 ddorang-d.tistory.com Javascrip.. 이전 1 2 3 다음
