블루비

웹디자인CSS 소스

wsss.tistory.com

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

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 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

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 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

123rf 이미지

123rf.com

무료 이미지를 다운받을 수 있는 123rf.com (상업적이지 않은 분야의) 디자인 일을 하다 보면 사진과 일러스트가 많이 필요한데, 아무래도 기업 소속이 아니다 보니 유료 콘텐츠 구매가 부담스러울 경우가 많다. 저작권이 워낙 중요하고 그걸 어겼다가 걸리면 그걸로 끝(...)이기에 기왕이면 무료로 제공되는 것들을 사용하고 싶지만 무료 제공 이미지들 제공 사이트에서 제공하는 것은 좀 다채롭지가 않아서 고민이었다. 그러다가 우연히 123rf.com 을 발견하고 소스가 무척 많아져서 행복한 중이다. 물론 무료 이미지라고 해도 함부로 상업적으로 사용하면 문제가 생기니 상업적으로 써도 되는 정말 무료사진인지 잘 확인하거나, 나처럼 비상업적인 분야에서만 사용하기 바란다. 우선 대한민국 내 접속주소는 다음과 같다. https://kr.123rf.com/ 무료 이미지가 상당히 많은데 정교한 사진들도 많고 귀여운 일러스트들도 많아서 갖다가 활용하기가 좋다. 3D 그래픽 콘텐츠도 많다. 그런데... 너무 많다. 고르고 있다가 시간이 다 갈 정도다. 검색어를 잘 활용해야 목적에 딱 맞는 콘텐츠를 금방 찾을 수 있을 것이다. 꼭 한국어로만 찾지 말고 가끔 영어 검색도 하는 게 좋다. 물론 123rf에 무료 이미지만 있는 건 아니다. 기업계정이나 유료계정도 물론 사용할 수 있다. 꼭 마음에 드는데 유료인 경우라면 결제를 고민해야 할 때도 있을 것이다. 좀 최근에 부각하기 시작한 사이트인 만큼 다른 곳들에 비해 '무료 이미지 도착 알림' 등 다른 서비스들도 해 주고 있다. 나로서는 내 콘텐츠가 갑자기 늘어난 것만 같아 기분이 좋을 뿐이다...^^

리틀딥

littledeep.com

리틀딥의 홈페이지입니다. https://littledeep.com 여러 유명한 일러스트 디자인 제공업체들 중에서도 거의 유일하게 한국어 서비스를 제공하고 있는 무료 사이트 리틀딥의 홈페이지입니다. 아무래도 영어에 아직 익숙하지 않은 분들이 이 사이트를 이용하시기 무척 편리해 보입니다. 또한 한국어로 사람들이 자주 찾는 주제들을 기준으로 해서 카테고리 등도 구분이 되어 있어서 그 점이 더 유용한 것 같습니다. 카테고리 종류는 100가지가 넘습니다. 귀여운 새 등의 동물들에서부터 인공지능 로봇 등 별의별 디자인이 다 보입니다. 날짜, 뷰 수, 인기순, 다운로드 수 등으로 정렬도 가능합니다. 매주마다 새로운 고화잘 이미지가 업로드되고 있고요. 각 사진마다 연관 태그도 달려 있어서 유사한 이미지 검색도 용이합니다. PNG나 AI 형식으로 다운받을 수 있습니다. 게다가 출처를 밝힐 필요도 없다고 하는데요. 그러다 보니 원하는 것과 가장 유사한 디자인을 다운받은 후 자기 자신이 원하는 대로 수정하고 변형할 수 있습니다. 그리고 마음껏 사용도 가능하지요. 상업적이건 비상업적이건 마음껏 사용할 수도 있습니다. 단 하나 조건이 있습니다. 이메일 구독을 하고 있어야 출처 표기 없는 사용이 마음대로 가능하다는 점입니다.

웹상에서 화면 캡쳐하는 플러그인

html2canvas.hertzen.com

포토샵과 같은 응용프로그램으로 화면을 캡쳐하는것이아닌 웹상에서 웹화면을 캡쳐하는 방법입니다 자바스크립트를 활용한 방법이기 때문에 브라우저 내부화면만 캡쳐가능한 단점은 있지만 웹상에서 캡쳐하여 이미지로 저장할수있다는 점은 활용도가 아주 높은 기술입니다 이미지 편집할때 화면 합성과 같은 곳에 아주 유용하게 사용할수 있습니다

언미니파이

unminify.com

웹브라우저에서 소스보기를 하면 웹관련 소스들이 보여집니다 그러나 보안을 위해 자바스크립트와 같은 언어를 암호화 하여 파악하기 어려운 경우가 있습니다 이때 해당 암호화된 문구를 사이트( https://unminify.com )에 입력하여 해독을 시켜줍니다 사용법도 간단합니다 입력하고 Unminfy 버튼을 클릭하면 그걸로 끝입니다

텍스처X

www.texturex.com

배경에 쓰기 좋은 패턴들을 무료로 받는 곳, 텍스처X 웹사이트 배경이 그냥 공백인 것도 좋지만 경우에 따라서는 예쁜 배경이 있으면 좋을 때가 있어요. 소소한 이야기 블로그라면 엽서 같은 느낌을 주고 싶을 때도 있고, 혹은 기계와 관련된 블로그라면 금속성 배경을 넣고 싶겠죠? 뭐 그 외에도 다양한 다른 경우가 있을 것 같아요. 그런데 딱 어울리는 배경을 찾는다는 게 의외로 어렵습니다. 막 쓰면 저작권에 걸리는 경우도 많고요. 그런데 배경으로 쓰기 좋은 패턴들을 무료로 제공해주는 곳이 있네요. 텍스처X라는 사이트입니다. https://www.texturex.com 금속성, 화염, 벽돌, 천, 빛, 나무, 돌 등 여러 느낌의 이미지들을 제공해 주고 있는데요. 여기도 그 수가 너무 많아서 딱 맞는 걸 고르기가 오히려 힘드네요...ㅎㅎ 게다가 이 사이트의 획기적인 점이 또 있어요. 자신이 스스로 패턴을 만드는 방법도 배울 수 있다는 건데요. 사이트 홈 화면 메뉴의 맨 오른쪽에 있는 'About'를 누르면 사이트의 철학을 소개하면서 자신의 기술을 쌓을 수 있는 코너가 준비돼 있어요. 다 영어로 되어 있지만, 구글 번역기가 요새 워낙 잘 되어 있으니 뭐... 크게 걱정은 안 하셔도 됩니다...ㅎㅎ 자신만의 배경을 찾거나 만들어서 좀 더 예쁜 블로그나 홈페이지를 만들고 싶다면, 텍스처X 잊지 마세요!