일상, 그리고 휴식

위의 경우 IE 빼고 크롬에서는 정상적으로 동작된다. 허나.. IE를 사용하는 분들도 있기 때문에 위와 같이 사용하게 되면 한글 입력시 "선택불가" alert 창이 계속해서 노출될 것이다. 이럴때 야매(?)로 쓰기 좋은 방법은 바로 css를 이용하는 것이다. 위의 코드를 아래의 코드로 사용하면 된다. ps. 전체 감싸고 싶으면 body에 class 둘 것

ajax if문 적용불가 고치기 ajax를 하다가 값은 제대로 잘 넘어오는데 꼭 if문에서 해당 데이터값을 못읽었다. 왜 이러지 한참 찾다가 알아낸 것이 값이 넘어올 때 공백도 같이 넘어와서 그런 경우가 있다고 한다. done일때 data 값이 잘 넘어오는지 확인하기 위해 console.log로 찍어보았다. 비밀번호는 임시로 123으로 만들어 놓았다. 분명 Console창에서 OK라는 문구가 뜨지만 if ~ else문에서 else { alert(); }창이 활성화 되는 것을 볼 수 있었다. 값은 잘 넘어오지만 if문에서만 해당 데이터를 못 읽는 경우, 아래 코드처럼 if문에 $.trim(data) 를 추가하면 된다.

jQuery animate()를 이용한 헤더 navigation 만들기 오늘은 jQuery effects 중 animate()를 이용한 헤더 부분의 navigation bar를 제작해보자.스크롤을 내렸을 때 navigation bar에 효과를 주려고 한다. 먼저 html, css로 간단하게 header 부분의 navigation bar를 만들어보자. 12345678910111213141516171819202122232425262728293031body{ height: 2000px;}#header { width: 100%; height: 45px; background:#cdd;}div{ float: left; padding: 12px 20px; letter-spacing: 2px;} HOME MYHOME ..

자신의 스킬이 어느 정도인지를 나타내는 이른바 스킬바(Skill-bar)를 한 번 만들어보자. 우선 기본적인 bar를 구성해보자. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 Skill-barh1 { padding: 15px 0 30px 0;}.skill{ width: 980px;}.skill-title{ font-size: 20px;}.skill-bar-wrap{ width: 100%; background: #000;}.skill-bar1{ width: 90%; text-align: center; backgro..

1234567891011121314151617181920212223242526272829303132333435363738 jQuery mouseenter와 mouseleave이벤트 $(function(){ $(".img1").mouseenter(function(){ $(this).css({opacity : 0.5 , transition: "all .5s"}); }); }); Colored by Color Scriptercs 공부하다가 헷갈리는 부분이있어서 정리하는 폴더를 하나 만들었다. 위의 소스코드는 mouseenter 이벤트 시 작동되는 소스코드예제이다. mouse를 갖다 대니 위에처럼 사진이 뿌옇게 변했다. (opacity: 0.5)값을 넣어 주어서 변환된 것. 이제 mouse를 떼었을 때의 효과를..

간단한 예시를 통해 placeholder의 설정방법에 대해 알아보자. css 부분에 placeholder를 추가해보자. (편의상 chrome과 ie브라우저만 사용함) .ex1::-webkit-input-placeholder { /* chrome 브라우저 placeholder */font-weight: 600;color: red;}.ex2:-ms-input-placeholder { /* ie 브라우저 placeholder */font-weight: 700;color: #e8e8e8;font-size: 15px;} chrome 브라우저에서 정상 작동된다. (현재 내 pc의 ie버전은 9버전이여서 10버전으로는 확인이 불가능했다 ㅠ)

bxSlider 홈페이지에서 option 클릭 여러 옵션들을 확인할 수 있다. 자신이 원하는 옵션을 가지고 사용하면 된다.

https://bxslider.com/ 상단의 링크로 bxSlider로 접속한다. 하단의 이미지를 참조하여 플러그인을 사용해보자. 먼저 우측 상단의 install을 클릭한다. install을 클릭하면 위의 이미지와 같은 화면이 나온다. 위의 파란색으로 블럭쳐져있는 부분을 복사하고, 본인의 코드의 head부분에 붙여넣는다. 플러그인이 잘 작동되고 있는지 확인하면 된다. 사진의 크기가 커서 이렇게 짤려나오는데 CSS를 이용해서 수정해주면 끄읏-!

http://rwdb.kr/