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/