티스토리 뷰

북마크

북마크

sosohot 2014. 4. 14. 13:53

<Style Guide>

- https://github.com/yamoo9/cj-olive-networks/tree/master/DAY02


<github>

- https://github.com/yamoo9

- https://github.com/KennethanCeyer


<반응형 웹>

- http://screensiz.es/ (모바일 스크린사이즈 정리)

- http://blog.naver.com/PostView.nhn?blogId=dmssla1211&logNo=192871991 (반응형 웹디자인/모바일 퍼스트 이해)

- http://d2.naver.com/helloworld/81480 (반응형 웹 입문자을 위한 글)

- http://readme.skplanet.com/?p=9739 (반응형 웹 기술 이해 - 정찬명님)


<버그 관련>

- http://programmingsummaries.tistory.com/315 (안드로이드 브라우저에서 로데이션시 뷰포트 리셋 버그)


<기타>

- https://tools.arantius.com/tabifier (code 정렬해주는 사이트)

- http://nuli.navercorp.com/sharing/fe/nmet (code 정렬해주는 사이트2)

- http://colorscripter.com/ (code를 이쁘게 나오게 해줌. 질문할때 유용)

- http://ui.daum.net/ (다음 UI개발자 블로그)

- http://it.nodong.net/zbxe/index.php?mid=JOBQNA01 (한국정보통신노조)

- http://jsfiddle.net/

- http://markup.su/highlighter/ (블로그에 코드 올릴때 유용함)

- http://smallpdf.com/ (문서변환, 예{pdf -> 엑셀})

- http://winmerge.org/ (코드 소스 비교해주는 프로그램)

- https://hacosa.co.kr/ (하코사 세미나 및 발표자료)

- http://mylife365.tistory.com (css, js 실무에 자주 적용할 수 있는 예제들이 있음)


<크로스브라우징, 검수>

- https://validator.w3.org/ (HTML마크업 검사)

- http://caniuse.com/ (HTML, CSS, javaScript 브라우저 지원 유무 확인할때 유용)

- http://troy.labs.daum.net/ (모바일 작업시 확인할때[추천하지는 않음])

- http://developers.google.com/speed/pagespeed/insights/ (웹페이지 속도를 분석)


<벤치마킹>

- http://www.awwwards.com/ (해외 우수한 디자인 웹 사이트 모음)

- http://www.dbcut.com/ (디비컷)

- http://www.5day.co.kr/ (오데이)

- http://www.gdweb.co.kr/ (굿디자인웹)


<접근성>

- http://blog.daum.net/moonsabu/7864551 (웹 접근성 사이트 모음)

- http://naradesign.net/wp/2008/10/11/159/ (input, textarea, select, option, button 등 서식요소 디자인하려는 디자이너에게 꼭 해줘야 하는 말)

- http://mctenshi.tumblr.com/

- http://accessibility.kr/nia/check.php (웹 접근성 자가진단 사이트)


<html>

- http://validator.kldp.org/ (html유효성 검사)

- http://naradesign.net/wp/2012/09/20/1863/ (반응형 웹 관련자료)

- http://prettydiff.com/?m=beautify (HTML, CSS, JavaScript 코드 정리)

- http://placehold.it/350x150 (크기조절[레이아웃 잡을때 유용할 듯])

- http://htmlarrows.com/currency/ (HTML 엔티티 코드)


<css>

- http://www.createcss3.com/ (css3코드 쉽게 생성해주는 사이트)

- http://www.css3factory.com/linear-gradients/ (css3 그라데이션 만들어주는 사이트1)

- http://angrytools.com/gradient/ (css3 그라데이션 만들어주는 사이트2)

- http://www.w3schools.com/cssref/css_selectors.asp (css 속성 모음)

- http://htmlcss.kr (html/css한글 레퍼런스 사이트)

- http://browserhacks.com/ (css핵 모음)

- http://nicolasgallagher.com/micro-clearfix-hack/ (clearfix 플롯해제)

- https://daneden.github.io/animate.css/ (css3 animation 효과)

- http://ko.learnlayout.com/ (CSS 레어아웃을 배웁시다)

- https://github.com/nolboo/nolboo.github.io/wiki (HTML & CSS & 모바일 Tip 한글 번역 문서모음)

- https://css-tricks.com/centering-in-the-unknown/  ,  

  http://wit.nts-corp.com/2014/08/22/2004 (화면 컨텐츠 가운데 정렬[레이어팝업 제작시 유용])

- https://fortawesome.github.io/Font-Awesome/ (확대해도 깨지지 않는 벡터 이미지 아이콘)

- https://developer.mozilla.org/ko/docs/Web/CSS/Writing_Efficient_CSS (효율적인 CSS 작성하기)


<SASS>

- http://sass-guidelin.es/ko/ (sass가이드 한글번역)


<js>

- http://cosmosjs.blog.me/130189512027 (Infinite Carousel)

- https://cdnjs.com/ (js, jQuery 플러그인 cdn search)

- http://css3pie.com/ (ie6-9에서도 css3 기능을 사용할 수 있게 해주는 js라이브러리)

- http://greensock.com/ (js 애니메이션 효과)

- http://greensock.com/gsap


<jQuery>

- http://www.websamo.com/ (제이쿼리 API한글로 번역해 놓은 곳)

- http://oscarotero.com/jquery/ (jQuery Quick API Reference)

- http://speckyboy.com/2014/12/08/jquery-plugins-2014/ (유용한 제이쿼리 플러그인 모음)

- http://www.htmldrive.net/ (플러그인 찾을때 유용)


<jQuery Plugin 모아놓은 사이트>

- http://www.jqueryscript.net/

- http://www.htmldrive.net/

- http://pgwjs.com/


<node.js>

- http://nodejs.sideeffect.kr/docs/ (nodejs doc 한글 번역 문서)


<angularJs>

- https://angularjs.org/ (angularjs 홈페이지)

- http://ngmodules.org/ (angularjs 모듈 모음 사이트)


<js 모듈 관리>

- http://programmingsummaries.tistory.com/204 (require.js 사용법)


<파폭 부가 기능 추천>

- measureit (px 체크할 수 있음)

- jQuerify (제이쿼리 콘솔)


<크롬 부가 기능 추천>

- GitHub Mate (깃 허브 소스 개별적으로 다운 받을 수 있게 해줌)

- jQuerify (제이쿼리 콘솔)

- Octotree (깃 허브 소스를 트리 구조로 볼 수 있게 해줌)

- Tooltip Dictionary (English-Korean) (외국 사이트 볼때 단어에 마우스 올리면 바로 한글로 번역해줌)

- 크롬 오토 스크롤 캡쳐(화면이 자동으로 내려가면서 캡쳐됨.)

  다운링크 : https://chrome.google.com/webstore/search/Awesome%20Screenshot?hl=ko&_category=extensions

  설명 사이트 : http://www.igoodpeople.kr/study_ok/25202

- jQuery API Browser (jQuery를 급하게 찾을 때 편하다) : https://chrome.google.com/webstore/detail/abefhanahjellfbchdmkjdcchkogijhk


<이미지 관련>

- https://unsplash.com/ (무료 고화질 이미지)

- http://placehold.it/ , http://lorempixel.com/ (더미 이미지 생성 사이트)

- http://spritepad.wearekiss.com/ (스프라이트 이미지 생성해주는 사이트)

- https://tinypng.com/  ,  http://pnggauntlet.com/ (이미지 최적화 해주는 사이트)

- http://www.maschek.hu/imagemap/imgmap (이미지 맵 만들어주는 사이트)


<Emmet 컨닝페이퍼>

- http://docs.emmet.io/cheat-sheet/ (Emmet 단축키모음)

- https://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn (HTML)

- https://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn (css)


<공부 할 만한 사이트>

- http://www.w3schools.com/ (w3school)

- https://developer.mozilla.org/ko/docs/Web (개발자를 위한 웹 기술)

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/   ,

  https://dev.opera.com/articles/advanced-cross-browser-flexbox/ (css3 flex 설명)

- http://www.freecodecamp.com/

- http://www.bennadel.com/blog/1482-a-graphical-explanation-of-javascript-closures-in-a-jquery-context.htm4244 (javascript 클로저 이해)

- http://viralpatel.net/blogs/understanding-jquery-animate-function/ (jQuery animate 이해)

- http://bonsaiden.github.io/JavaScript-Garden/ko/ (JavaScript 언어의 핵심에 대한 내용)

- http://naradesign.net/open_content/lecture/wp/ (유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드)

- http://beautifulcss.com/archives/431 (웹 폰트 파헤치기)

- http://superkts.com/ (css, 제이쿼리 예제 및 설명이 잘나와있음)

- http://hwaba.nflint.com/lab/tween/ (GSAP JS 라이브러리 사용법 및 설명)

- https://goo.gl/4StP1y (제이쿼리 플러그인 제작 방법)

- https://naver.github.io/jindo-to-jquery/ (제이쿼리 플러그인 제작 방법)

- http://youmightnotneedjquery.com/ (제이쿼리의 API를 javascript 함수로 만들어 놓은 사이트 [공부하기 딱 좋음] )

- http://www.atmarkit.co.jp/ait/kw/jquery_html5_css3_majime.html (패럴럭스 스크롤 기초 예제)

- https://github.com/tipjs/javascript-style-guide (airbnb 자바스크립트 가이드)

- http://jindo.dev.naver.com/jindo_home/Mobile.html (진도 모바일)

- https://www.zerocho.com/ (js 기본지식 잘 설명 되어 있음)

- https://opentutorials.org/course/2418/13684 (css3 transform 설명)


<마크다운>

- https://stackedit.io/ (마크다운 문서 문법 설명 및 실습)


<이메일 CSS Support>

- https://www.campaignmonitor.com/css/ (이메일 템플릿 작업시 참고)


<웹 폰트>

- http://www.etorrent.co.kr/bbs/board.php?bo_table=tip&wr_id=78884 (무료 한글 글꼴 총정리)

- http://pxtoem.com/ (가변 폰트 크기를 쉽게 계산해주는 사이트)

- https://www.google.com/fonts/earlyaccess (구글에서 제공해주는 폰트)

- https://www.google.com/fonts (구글에서 제공해주는 폰트)

- http://deminoth.github.io/google-font-kor/ (무료 웹 폰트[구글 제공])

- http://spoqa.github.io/spoqa-han-sans/ (스포카 한 산스 웹 폰트)


<아이콘>

- http://www.flaticon.com/ (무료 아이콘)


<워드프레스>

- http://editorizer.tistory.com/53 (워드프레스 강좌 목록)

- https://www.cmsfactory.net/node/11590 (워드프레스 강좌 목록2)

- https://brunch.co.kr/@hancoma/232 (워드프레스 게시판 설명)



<form 디자인 커스텀>

- https://github.com/silver0r/customizeForm (form 요소 디자인)


댓글