본문 바로가기

퍼블리싱

 (57)
체크박스를 이용한 필터만들기 + 전체체크 전체선택 기능이 있는 체크박스를 또 만들어봤습니다. ㅎㅎ 다 만들고 반디캠을 찍어봤어요. 허접하지만 동영상까지 있는 글을 쓰다닝 전체선택 체크박스 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
크로스브라우징 익스플로러 잡기 크로스브라우징이란! 크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다흔 기종의 운용체계나 HTML 렌더링 기술로 웹페이지를 제작하는 방법론이다. 인터넷 익스플로러, 오페라, 파이어폭스, 크롬, 사파리 등등 많은 브라우저들이 있고, 사용자들이 어떤 브라우저를 통해서 웹사이트를 들어오던지 문제 없이 웹사이트가 보여지도록 만들어야 한다. 또한 나이가 어린사람, 시각 장애인, 노약자도 웹을 쉽게 사용 할 수 있도록 맞춰야 한다. 사실 브라우저마다 생각보다 많이 다르고, 한 브라우저에서 완벽했는데, 다른 브라우저로 들어가면 난리가 나는 상황을 자주 만나곤 합니다...지금 작업하는 웹사이트를 크로스브라우징하면서 있었던 이슈에 대해 정리해 놓을 겸 블로그를 적어보려 합니다. 우선, 크롬을..
자바스크립트 이미지 파일 미리보기 여러개 만들기 자바스크립트를 이용해서 이미지 파일 업로드시 미리보기를 만들어봤어요. 만들었던 상황의 특징은 여러개의 이 있고 같은 형태로 반복되도록 만들었어요. 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로 삼각형안에 이미지 넣기 CSS를 이용해 삼각형안에 이미지 넣는 방법에 대해 적어봅니다. 간단히 설명하면 border를 이용해 삼각형을 만들고, 그 뒤에 background-image를 통해 이미지를 넣는 방식입니다. 완성 샷! 조금 무섭긴 한데, css로 세모안에 원숭이 이미지를 넣어봤습니다. html 1 2 cs css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .triangle{ width: 0; height: 0; border-left: 100px solid #fff; border-right: 100px solid #fff; border-bottom: 200px solid transparent; z-index: 1; } .triangle::after{ width: 200px; height:..
자바스크립트 선택요소만 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클릭시 스크립트가 작동하도록..

티스토리툴바