Studing Reference 이 repository는 공부를 하면서 참조할 수 있는 여러가지 자료를 모아두고 있습니다. 1. Mozilla 접속 링크 : https://developer.mozilla.org/ko/ HTML, CSS, JS 등의 태그 및 엘리먼트들을 확인하고 설명 및 예시를 참고할 수 있다. media queries-> 이건 반응형 웹을 만드는 필요함. MDN에서 모를 떄 찾아보자. 2. JS Bin, jsfiddle, codesandbox 접속링크 : https://jsbin.com/ 간단한 웹 프로그래밍을 쉽고 직관적이게 확인할 수 있다. 필자가 느끼기에 codesandbox, jsfiddle, JS Bin 순서로 이용할 수 있는 기능이 많다. 3. CSS Diner 접속 링크 : https://flukeout.github.io/ CSS를 거의 처음 할 때 연습하기 좋다. 게임 형식으로 연습 할 수 있다. 총 32단계 구성으로 되어있음. 4. Can I use 접속 링크 : https://caniuse.com/ CSS, JS 등의 속성 값이 다양한 웹 브라우저에 호환되는지 알아볼 수 있는 사이트 5. Color Tool 접속 링크 : https://material.io/resources/color/#!/?view.left=0&view.right=0 원하는 색상에 대해 웹사이트에서 UI적으로 어떻게 보여질 수 있는지 확인 할 수 있다. 6. CSS-TRICKS 접속 링크 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS의 flex box 모델 구현을 위해 기초적인 속성이나 가이드를 볼 수 있다. 7. FLEXBOX FROGGY 접속 링크 : https://flexboxfroggy.com/ CSS의 flex box 모델 구현을 게임 형식으로 연습 할 수 있다. 총 24단계 구성으로 되어있음. 8. Emmet documentation 접속 링크 : https://docs.emmet.io/ html 작성을 빠르게 해 줄 수 있는 문범을 확인 할 수 있다. 9. VSC(Visual Studio Code) 검색 후 설치해야함. 강력한 텍스트 에디터 툴이다. VSC에서 유용한 10 extention Material theme VSC의 다양한 테마 제공 Material icon theme VSC의 다양한 아이콘 테마 제공 Prettier Code Formatter임. 세팅값에서 여러가지를 바꿀 수 있음. bracket pair colorizer2 각 중괄호 묶음마다의 색깔을 달리해서 알아보기 쉽게 해 줌. Indent-rainbow Tab한 공간에 무지개 색을 채워넣어줌. Auto rename tag Tag 한쪽만 수정해도 양 쪽의 Tag를 동시 수정 가능하게 해 줌. CSS PEEK HTML에서 작성한 id나 class 값에 대해 CSS 파일 어디에서 쓰여졌는지 컨트롤+클릭 커멘드로 바로 볼 수 있게 해줌. HTML CSS SUPPORT 자동완성 기능을 제공함.(Tab키 사용) LIVE SERVER 프로그래밍 하고 있는 웹 사이트 새로고침을 알아서 해줌. HTML to CSS autocompletion 자동완성 기능을 제공함.(HTML에서 정의한 걸 CSS에서, Tab키 사용) 10. Font awsome 접속 링크 : https://fontawesome.com/ 다양한 이모티콘 폰트 로고 등을 얻을 수 있다. 11. google font 접속 링크 : https://fonts.google.com/ 다양한 폰트를 웹 사이트에 적용시킬 수 있다. 12. where by 접속 링크 : https://whereby.com/ 화면 공유를 렉없이 쉽게 웹으로 할 수 있는 사이트. 전화 및 화상통화 기능도 있다. 13. LearnningTools 접속 링크 : https://tools.learningcontainer.com 다양한 툴 제공. 대표적 예시는 다음과 같다. JSON diff 접속 링크 : http://www.jsondiff.com/ The semantic JSON compare tool JSON formatter 접속 링크 : https://jsonformatter.org 깨진 json의 정보들을 이쁘게 edit 해주거나(beautifier) object형태로 볼 수 있게(Parser) 해준다. JSON validator 접속 링크 : https://jsonlint.com JSON이 올바르게 작성되었는지 확인할 수 있다. 오류가 있을 때 이 사이트에서 확인 가능하다. 14. Pinterest, Dribble 접속 링크 : https://www.pinterest.co.kr/, https://dribbble.com/ 웹 디자인을 참고할 수 있음.responsive web, moblie app 등을 검색해서 볼 것. 15. codepen.io 접속 링크 : https://codepen.io/ 웹에서 사용되는 효과들이나 방식들을 코드와 함께 볼 수 있다. 16. TodoMVC 접속 링크 : http://todomvc.com/ 다양한 언어로 만들어진 Todo 리스트를 확인 할 수 있다.(추가설명 필요 다시 좀 더 찾아볼 것.) 17. PXToEM 접속 링크 : https://pxtoem.net/ px값을 em 등 다른 값으로 바꾸어 준다. ect) 도움이 될만한 사이트 라이프사이클 api : https://velog.io/@ejchaid/React%EC%9D%98-%ED%95%84%EC%88%98%EC%9A%94%EA%B1%B4-LifeCycle-API-g8k2lj2la 깃허브연동vsc : https://bytrustu.tistory.com/65 java등 설명 잘되있음 : https://limkydev.tistory.com/