jquery

jquery

jquery.com

jquery을 소개합니다. jquery는 자바스크립트를 편리하게 사용할수 있도록 만들어진 라이브러리 입니다. jquery의 장점은 가장 많이 사용되는 자바스크립트 라이브러리 중 하나 라는 것입니다. 다이나믹한 웹페이지를 제작하기 위해 자바스크립트는 필수 입니다. 물론 CSS나 플래시 등을 통해서 구현 가능하지만 기본적으로 다이나믹한 웹페이지를 위해서는 자바스크립트를 사용합니다. 그러나 만들순 있지만 쉽게 구현하기는 어렵습니다. 그래서 쉽게 만들수 있도록 jquery를 사용합니다. 사용이 간편하고 효과가 좋아 아주 많은 사람들이 사용하고 있습니다. 사람들이 많이 사용하는 것은 그만한 이유가 있습니다. 저 역시 jquery를 많이 사용합니다. 해당 사이트에서는 사용할수 있는 방법 api가 제공되고 https://api.jquery.com 이미 만들어진 plugin도 존재하여 더욱 쉬운 사용을 도와줍니다. https://plugins.jquery.com 메뉴구성은 Dowload, API Documentation, Blog, Plugins, Browser Support등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 jquery는 홈페이지뿐 아니라 트위터등의 채널을 통해 고객들과 더 많이 소통하려 노력하고 있습니다. 자세한 정보를 원하신다면 https://jquery.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

드로우킷

www.drawkit.com

드로우킷의 홈페이지입니다. https://www.drawkit.com 다양한 주제를 기반으로 한 무료 일러스트 패키지를 제공하는 드로우킷의 홈페이지입니다. 교통수단, 선거, 레스토랑, 일하는 근로자들 등 다양한 주제를 기반으로 하는 일러스트들을 10개 묶여서 한꺼번에 패키지로 다운받을 수 있는 곳입니다. 각 패키지마다 같은 상황 아래서의 다양한 디자인 리소스가 있습니다. 그래서 원하는 느낌을 갖는 일러스트들을 자유롭게 다운받고 선택할 수 있다는 장점이 있습니다 이 사이트 내에서 400 혹은 800 혹은 1200 크기로 png의 사이즈를 맞춘 리소스가 있습니다. 그래서 지금 개발하는 것이 웹사이트인지, 블로그인지에 따라 필요한 곳을 골라서 쓸 수 있습니다. 특히 다른 사이트들과 달리 다양한 컬러 버전과 단순 흑백 스케치 버전 2가지 다 제공한다는 것도 장점입니다. 라이센스는 상업적이건 비상업적이건 다 열려 있고요. 출처도 필요하지 않습니다 결과물은 PNG나 SVG 두 종류로 받아볼 수 있습니다. 구글, 아마존, 인비전, 타입폼, 토요타, 마이크로소프트 등애서 인증을 받았다고 하니 신뢰도는 상당한 둣 합니다.

w3schools

www.w3schools.com

w3schools을 소개합니다. w3schools 은 다양한 프로그램 소스를 공부할수 있는 사이트 입니다. w3schools의 장점은 소스와 실행되는 결과같은 바로 볼수 있다는 것이 장점입니다. 웹관련 소스가 궁금한 경우 검색하면 잘 나옵니다. 그러나 소스를 적용했을때 잘 되는지에 대해서는 장담하지 못합니다. 열심히 적용해 봤는데 소스가 잘못된경우 또는 버전이 맞지 않아 사용할수 없는 경우가 있기 때문입니다. 물론 올린사람이 의도적으로 틀린 소스를 올리는 것은 아니지만 시간이 흐름에 따라 틀린 소스가 되기도 합니다. 그러다 보니 적용하기전 정상적인 소스인지 먼저 확인 해봐야 하는데 w3schools 에서는 Try it Yourself 를 통해 미리 확인해 볼수 있습니다. 또 다른 장점으로 CSS관련 정보를 많이 얻을수 있다는 것입니다. 개인적으로 CSS관련 부분이 궁금한 경우 자주 활용하는 사이트입니다. 일반적으로 CSS의 특정 기능이 궁금하면 인터넷에 검색하여 정보를 얻습니다. 그러다 보니 체계적인 정보를 얻기보다는 산발적인 정보를 얻게 되는데 w3schools 에서는 체계적으로 관련정보가 잘 정리되어 있습니다. 적용 예시 뿐아니라 연관된 스타일들까지 다양하게 확인해볼수 있습니다. 그러기에 CSS를 공부하기에는 더할나위없이 좋은 사이트입니다. 메뉴구성은 HTML, CSS, AJVASCRIPT, SQL, PYTHON, PHP등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 웹관련 프로그램 소스가 궁금하시다면 w3schools를 활용해 보시기 바랍니다. 자세한 정보를 원하신다면 https://www.w3schools.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

웹디자인CSS 소스

wsss.tistory.com

CSS를 통한 디자인 소스가 제공되는 사이트 입니다. 단순 디자인을 넘어 애니매이션 소스도 같이 제공됩니다 예전에는 플래시로 애니매이션을 만들었다면 지금은 CSS, HTML5, 자바스크립트 등을 통해 애니매이션을 제작 하는 추세입니다 그런 면에서 볼때 아주 도움을 주는 사이트 입니다 아래는 실행 화면입니다 https://wsss.tistory.com/55

블루비

www.blueb.co.kr

웹프로그램 관련 소스를 다운받아 사용할수 있는 블루비(http://www.blueb.co.kr) 사이트를 소개합니다. 블루비는 HTML, 자바스크립트, CSS, Ajax 등 다양한 웹프로그램 코딩을 제공해주는 사이트 입니다. 대부분의 소스는 무료로 이용가능하며 유료로 제공하는 소스도 있습니다. 유료인 경우 그만한 가치가 있는 소스이기 때문에 결제하시는 것이 더 나은 서비스를 위해 좋은 방법이 아닐까 생각합니다. 소스들은 웹상에서 자주 사용되는 기능을 제공하고 있습니다. 트리메뉴, 탭메뉴, 갤러리, 슬라이드쇼 등 웹 상에서 한번쯤 사용해 봤을 만한 소스가 많이 있습니다. 사실 직접 제작해서 사용하려면 많은 시간과 노력이 필요합니다. 그렇지만 블루비를 통해 얻은 소스를 커스트마이징해 자신의 홈페이지에 적용 한다면 쉽고 빠르게 작업 할 수 있습니다. 간혹 소스를 다운받아 단순 업로드 하면 적용될 것이라 생각하시는 분들이 있는데 이는 너무 모르는 소리입니다. 홈페이지에 소스를 적용하려면 그에 맞게 고치는 커스트마이징 작업이 꼭 필요하다는 것을 명심해야 합니다. 홈페이지를 멋지게 꾸미기 원하신다면 블루비를 활용해 보시는 것은 어떨까요?

게시글

jquery 활용해 버튼클릭시 레이어창이 뜨고 다른 배경 클릭할때 뜬 레이어 창 닫게 하는

배경클릭시 레이어 창을 닫는 방법입니다 일반적으로 레이어 창이 뜨면 배경 아무곳을 클릭하여 제거하려는 습관이 있습니다 배경을 클릭했는데 떠있는 레이어모달창이 닫히지 않으면 참 난감할때가 있습니다 이런걸 방지하기 위해 배경클릭시 모달창을 닫게 하는 이벤트를 추가해 놓으면 유용합니다

게시글

display가 none인지 display인지 알아내는 방법

jquery로 dispaly의 보여진 상태인지 감추어진 상태인지 알기위해서 여러가지 방법이 있다 그러나 나는 아래와같은 방법을 즐겨사용한다 $("#아이디").css("display") css()함수를 사용해서 none인지 block인지를 구분해서 처리한다

순서도 그리기

app.diagrams.net

아주 편한 순서도 그리기 사이트 기획자나 개발자들은 순서도를 다룰 일들이 많으실 텐데요. 과거 저도 뭔가 기획을 할 때면 우선 순서도를 그리는 게 제일 처음 하는 일들 중 하나였습니다. 주로 파워포인트로 만들곤 했는데요. 간단한 거야 그냥저냥 그리곤 했지만 간혹 복잡한 프로세스를 순서도로 그리다 보면 파워포인트로 그리고 있느니 그냥 펜으로 그리는 게 낫다는 생각이 들기도 합니다. 수정이 여러 번 있으면 정말 머리가 복잡해지죠. 하나하나 사각형을 마름모로 바꾸고, 화살표 옮기고 있다 보면 그게 하루를 잡아먹곤 했습니다. 그래서 추천 드립니다. 혹시 모르시는 분들 계실까 봐서요. https://app.diagrams.net 위 사이트로 접속하셔서 회원가입하시면 순서도를 무료로 그릴 수 있는데요. 이게 엄청 편리한 게 화살표와 사각형 같은 걸 하나의 묶음으로 해 줄 수가 있어서 처음에 그리기도 무척 쉽고 나중에 수정이 생기더라도 확실히 편하고 빠르게 작업이 가능합니다. 순서도를 그리실 일이 별로 없는 분들도 계실 테지만, 기왕이면 순서도는 기본적으로 그릴 줄 아시는 게 무엇이든 설명하기가 굉장히 편하니까, 겸사겸사 위 사이트 통해서 익혀두시는 것도 좋을 거에요.