web sprit

우리가 흔히 마크업을 하게 되면layerPopUp을 만들게 됩니다. 레이어 팝업을 만들 경우 레이어팝업 안에 닫기 버튼이 존재하게 되는데요.PC 같은경우 닫기 버튼이 존재하게 되면 그리 큰 이상은 없습니다.만약 닫기 버튼이 없는 레이어 메뉴라고 가정합시다. 그리고 모바일 입니다.닫기 버튼이 없는 레이어 메뉴는 어떻게 숨김처리 해야할까요?? 이럴때 메뉴영역을 제외한 영역을 클릭했을 시 숨김처리되는 스크립트 소스가 필요한 것입니다. 검색을 통하여 여러가지 소스를 확인해 보았는데요. 정작 저에게 필요하고 깔금한 소스를 찾지 못했습니다.그래서 제가 정리한 소스를 정리하려 합니다.많은 분들이 참고하고 더 좋게 custom 하셧음 좋겠네요 소스는 아래와 같습니다. HTML1234567891011121314 targ..

https://owlcarousel2.github.io/OwlCarousel2/ 반응형웹이나 모바일웹에서 터치 슬라이드를 적용하는데 아주 유용한 플러그인을 소개해 드리겠습니다.플러그인의 사용이 무조건 좋다고 볼 수는 없으나 직접적인 소스를 만드는 시간에 대한 할애가 너무 많기 때문에 이런 플러그인을 잘 사용하는 것도 중요하다 생각합니다. 1. 사용방법위 사이트에서 Download 버튼을 클릭해 다운 받습니다.그럼 위사이트 전체적인 설명이 들어있는 폴더를 확인할 수 있는데요.아래의 파일을 찾아 원하는 경로위치에 넣어 줘야 하는데 정확히 어디 위치에 있는지 찾기 힘드실 수 있습니다.owl.carousel.min.css 와 owl.theme.default.min.css 는 OwlCarousel2 > docs ..

간단한 예를 들어character 라는 변수안에 라는 문자를 넣고 싶다면저 쌍따옴표는 어떻게 표현할 수 있을까요? javascript 문법에서는 이렇게 표현합니다. 1var character = "난 \"미키 마우스\" 입니다."cs 위처럼 홀따옴표나 쌍따옴표를 표현하려면 백슬래시(＼) 다음에 사용하고자하는 따옴표를 넣으어console 창에 찍어보면 그대로 원하는 문자열로 출력되는 것을 확인할 수 있습니다. 반대로 홀따옴표로 표현하고 싶다면 아래와 같습니다.1var character = "난 \'미키 마우스\' 입니다."cs

is() 메서드는 선택한 요소 중 하나가 is( 선택한 Element )와 일치하는지 확인합니다.결과값은 참(true)/거짓(false)을 나타냅니다.말보다 예시를 보면 더 빠른 이해가 되겠죠? 아래에 예를 들겠습니다. html12345678 item01 item02 item03 확인cs javascript (tag 확인)1234567891011121314151617$(document).ready(function(){ var $testBox = $(".is_test_box"); var $list = $(".is_test_box .list"); var $Btn = $(".is_test_box button"); $Btn.on("click", function(){ var $liBool = $list.child..

http://bxslider.com/위의 사이트로 접속 후 Download 버튼을 눌러 내용을 다운 받으세요~ ^^ 1. 설치1-1. head태그에 연결123456789101112 Colored by Color Scriptercs 1-2. MarkUp12345678 Colored by Color Scriptercs 1-3. 선언12345 $(document).ready(function(){ $('.bxslider').bxSlider();}); cs 2. option위에서 설명한 선언 말고도 option을 설정하기 위한 선언방법이 있습니다. 아래를 참고해 주세요.예)1234567 $('.bxslider').bxSlider({ // 옵션 설정 mode: 'fade', captions: true}); cs 3..

메일이나 어떠한 체크폼을 보다 보면 전체 선택과 그에따른 하위선택함에 있어 전체 체크 되었다 풀리는 스크립트를 보곤 하는데요 한번 제이쿼리로 만들어 보았습니다. 다른 분들은 이 소스를 참고하여 작업하셧으면 좋겠네요좋은 방법이나 좋은 예재가 있으면 공유 했으면 합니다. 소스는 다음과 같습니다. HTML1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 구분 사과 배 귤 오렌지 수박 멜론 참외 Colored by Color Scriptercs CSS1234.check_board_tb{border-collapse:collapse; width:100%;}.check_board_tb input{border:1px..

1. 함수 정의1-1. basic 함수1234567 function funname() { // 내용 작성}; funname(); cs해석 : function 다음 함수이름(funname)이 나오며 소괄호 안에는 인자값이 들어갈 수 있다.인자는 함수를 호출할 때 함수 로직에 전달될 변수 이다. 인자는 생략할 수 있다.중괄호 안에는 함수를 호출 했을때 실행되어 지는 내용을 작성하면 된다. 1-2. 변수대입 함수1234567 var funname = function() { // 내용 작성}; funname(); cs해석 : 변수 funname 이라는 이름을 정해주고 그 안에 익명함수(이름이 정해지지 않은 함수)를 대입한다.마지막은 변수명으로 함수를 호출하고 있다. 1-3. 즉시실행 익명함수12345 (func..

대부분 관공서나 공단 사이트를 보면 하단 footer 부분에 흐르는 배너를 볼 수 있습니다.저는 이 명칭을 flow banner라고 멋데로 짓고 나중을 위해 소스를 올리려 합니다. 소스는 다음과 같습니다. HTML123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 관련사이트 이전 다음 재생 멈춤 Colored by Color Scriptercs CSS1234567891011121314151617/* banner */.footer_banner_zone{position:relative; width:100%; ..

자바스크립트의 연산자는 다음과 같은 형태의 연산자가 있습니다.대입 연산자비교 연산자산술 연산자비트단위 연산자논리 연산자문자열 연산자조건(삼항) 연산자콤마 연산자단항 연산자관계 연산자나는 천재가 아니다. 우선 많이 보았고 많이 사용한 연산자의 관하여 설명을 하고 추후 전체적이 설명을 업로드 할 예정입니다. ^^ 대입 연산자 이름 복합 대입 연산자 뜻 대입 연산 x = y x = y 덧셈 대입 x += y x = x + y 뺄셈 대입 x -= y x = x - y 곱셈 대입 x *= y x = x * y 나눗셈 대입 x /= y x = x / y 나머지 연산 대입 x %= y x = x % y 비교 연산자 연산자 설명 예제 ( true 반환 ) == (같은) 피연산자들의 값이 같으면 true 3 == var..

window.open() 메서드는 대부분 새창으로 팝업을 만들때 사용합니다. window.open() 의 내용은 아래와 같습니다. 1234window.open('팝업 주소', '팝업창 이름', '팝업창 설정'); ex)window.open('popup.html', 'pop01', 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no');cs 팝업 설정팝업창 설정은 아래와 같이 존재합니다. - 값은 yes 또는 no 로 지정.toolbar = 상단 도구창 출력 여부 menubar = 상단 메뉴 출력 여부location = 메뉴아이콘 출력 여부directories = 제목 표시줄 출력 여부status =..