전체 글 87

jQuery로 Skill bar 만들어보기

자신의 스킬이 어느 정도인지를 나타내는 이른바 스킬바(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..

mouseenter / mouseleave 이벤트

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를 떼었을 때의 효과를..

css placeholder 설정 방법

간단한 예시를 통해 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 플러그인 사용법(기본)

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

워크래프트 3 설치하는 방법

pc방에서 항상 즐겨하던 워크래프트 3 컴퓨터를 산지 얼마 안되서 그런지 pc방에서 했던 게임들이 그리워졌다. 그 중 하나가 워크래프트 3인데.. 블리자드에서 사자니 돈이 좀 아까운 것 같았다. 해서 CD키만 다른 곳에서 구입을 하고 setup파일을 다운로드 하기로 했다. 아니 근데.. 이 놈의 setup파일은 대체 어디있냐는 말이다 ㅠㅠ 한참을 찾아내다결국 찾아내긴 했다. ※ 필요하신 분들은 쓰세요 ~ 해당 파일을 setup하면 쉬워진다. 순식간에 설치만 하면 끝! 설치를 하면 CD-KEY 입력란이 나온다. CD-KEY를 입력하면 바탕화면에 워크3 아이콘이 생성될 것이다 !! 그럼 배틀넷에 들어가서 즐겜하면 된다 읔.. 모니터 해상도가 1900대여서 그런지 짤린다. 나중에 해상도 수정도 올려야겠다 그럼..

일상/게임 2017.12.02