퍼블리싱/javascript&jQuery (22) 썸네일형 리스트형 체크박스를 이용한 필터만들기 + 전체체크 전체선택 기능이 있는 체크박스를 또 만들어봤습니다. ㅎㅎ 다 만들고 반디캠을 찍어봤어요. 허접하지만 동영상까지 있는 글을 쓰다닝 전체선택 체크박스 HTML 1 2 3 4 5 6 7 ALL 필터01 필터02 필터03 필터04 Colored by Color Scripter cs html은 간단하게 ul태그로 만들고, li안에 체크박스 input과 label태그를 만들었어요. css로 input 태그는 안보이게, label를 버튼처럼 만들었습니당. CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .filter_wrap li{ display: inline-block; } .filter_wrap label{ border:1px solid #000; padding:.. [css/jquery] 간단한 팝업창(모달창) 만들기 2 오랜만에 다시 만들어 보는 모달 팝업!! 제 블로그에 모달 팝업창을 보러 들어오시는 분들이 많이 있어서 새롭게 뉴 버전으로 다시 만들어봤어요! 사실 만들때마다 살짝살짝 달라지기도 하고, 새로운 마음으로 다시 만들어 봤어요. 이 모달 팝업창의 특징은 01. 기존 만들어진 사이트에 붙이기 더 유용하도록 만들 것 예전에서는 아무것도 없는 상태에서 새로 만들었다면, 이미 있는 사이트에 붙여놓기 조금 더 간편 하도록 만들어봤어요. 02. close버튼의 범위 확장 close버튼의 누를때 뿐 아니라, 반투명 뒷배경을 누를 때도 팝업이 없어지도록 했어요. 03. 제이쿼리로 작성 지난번과 다르게 제이쿼리를 섞어 썼어요. HTML 1 2 3 4 5 6 7 8 클릭하면 팝업이 나와요 close 팝업 내용 Colored b.. [JQuery/css] 탭메뉴 만들기 (tab menu) 한화면에 탭 메뉴 완성영상 블로그 올릴려고 만들고, 처음으로 반디캠을 찍어봤는데 생각보다 간단히 잘되네요! 완성 파일은 밑에 올리도록 할게요! 탭 메뉴를 이용해서 다른 콘텐츠를 보여줄 수 있는 코드입니다. 제이커리를 이용해서 만들었어요. HTML 1 2 3 4 5 6 7 8 자바스크립트 이미지 파일 미리보기 여러개 만들기 자바스크립트를 이용해서 이미지 파일 업로드시 미리보기를 만들어봤어요. 만들었던 상황의 특징은 여러개의 이 있고 같은 형태로 반복되도록 만들었어요. 1개만 있다면, 아이디로 불어와 이미지를 보여지도록 할텐데, 같은 구조가 여러개라면 그게 불가능해서 그부분이 조금 고민스러웠어요! 우선 완성된 모습의 스샷 파일을 선택시에 input 다음에 미리보기 이미지가 오도록 했어요. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 . . . // 계속 있을 수 있음 Colored by Color Scripter cs SCRIPT 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function setThumbnail(event) { var uploadWrap = event.target... 자바스크립트 선택요소만 css 변경(class 변경) 자바스크립트로 선택된 버튼에게 특정 class를 붙여주는 방법에 대해 적어봅니당! 먼저 결과물입니다. 01. 선택된 요소만 selected 클래스 붙이고 나머지는 없애기 반복되는 아이템에 특정 태그를 선택했을때 그 태그만 클래스를 붙여주고 스타일을 지정해줄 수 있도록 했어요. 02. array.from()를 활용해서 만들었어요! HTML 1 2 3 4 5 6 menu01 menu02 menu03 menu04 cs 간단한 메뉴 리스트! CSS 1 2 3 4 5 6 7 8 9 10 .menu-wrap li{ display: inline-block; background: #dcb8b8; border-radius: 10px; padding: 10px;} .menu-wrap li.selected{ backgrou.. 자바스크립트 텍스트 복사하기 버튼 만들기 계좌번호를 넣는 Ul를 만들다가 복사하기버튼이 있고 계좌번호가 복사되게 한다면 더 편리할 것 같다는 생각들어 클립보드에 복사하는 버튼을 만들어봤습니다. 먼저 클립보드에 복사하는 기능이 한개만 필요한 경우와 여러개 필요한 경우로 나눠서 제작했습니다. 처음에는 한개만 했더니, 여러개 일땐 반복해서 써야 하는 문제점이 있어 나눠봤어요. 특징. 1. 클립보드에 복사하기 1개만 필요할 경우 2. input태그를 이용해 복사하기 원하는 내용 넣기 HTML 1 2 3 4 5 6 7 cs - input의 value값에 복사하기 원하는 텍스트 삽입 - input이 아니라 그냥 텍스트처럼 보이기 위해 readonly 속성을 주고, css로 테두리 삭제 - 이미지 출처는 내가 만듦 - button클릭시 스크립트가 작동하도록.. 자바스크립트 문자열 자르기 slice(), substring(), substr() 비교 자바스크립트의 문자열을 자르는 함수들이 여러개 있는데 비슷하면서 조금씩 다르게 기능하고 있다. 그래서 각 함수의 작동방법을 비교해 보려고 합니다. slice() 1 문자열.slice(시작 인덱스, 종료 인덱스) cs slice() 함수는 파라미터로 시작인덱스와 종료 인덱스를 받아 값을 반환하는 함수이며, 두번째 인자인 종료 인덱스는 필수 값이 아닙니다. 특징 01. index 는 0부터 시작함 02. 문자열 길이를 뛰어넘는 숫자를 파라미터로 넣으면 빈 값을 반환함 03. 시작인덱스가 종료인덱스보다 크면 정상적으로 작동하지 않음 04. 음수도 사용가능하며, 뒤에서부터 시작하는 의미로 사용됨 ex) string.slice(3, -10) // 3번째 글자부터 뒤에서 10번째 글자까지 반환 substring().. [javascript]자바스크립트 부모, 자식, 형제 노드 찾기 매번 뭐였지 찾게 되는 자바스크립트 부모, 자식, 형제 찾기.. 처음에는 제이쿼리로 굉장히 익숙한데 자바스크립트로는 어떻게 해야하는지 한참 찾았던 기억이 있어요. 그래서 한번 정리해두려고 합니다. 01. 자바스크립트 자식 찾기 ( childNodes ) HTML 1 2 3 4 5 cs JAVASCRIPT 1 2 3 4 5 6 7 8 var first = parent.childNodes; // 모든 자식들 찾아 변수에 담기 var first = parent.firstChild; // 첫번째 자식 찾아 변수에 담기 var last = parent.lastChild; // 마지막 자깃 찾아 변수에 cs 모든 자식은 .childNodes 첫번째 자식은 .firstChild 마지막 자식은 .lastChild 02.. 이전 1 2 3 다음
