react code snippet

https://react.vlpt.us/basic/27-useful-tools.html

27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet · GitBook

 

템플릿 코드를 저장해서 귀찮게

안쳐도 되게끔 만든다.

나같은 경우에는 rfc를 치면된다.

 

 

className을 귀찮게 치지 않아도 되게끔 해준다.

 

 

이미지를 가져오는 방법에는

여러가지 방법이 있는데

나는 import를 하는 방법을 사용했다.

 

여기서 주의할점은 

이미지가 src 폴더 하위에 있어야한다는 것이다.

 

 

또 뭣같은 경우가 있었는데.

계속 이미지만 css가 안먹어서.

className을 class로 바꿨더니

css가 적용이 됐다.

그런데 npm start를 다시하니

className으로도 css가 적용이

되었다.

 

진짜 이거때매 1시간 날린거같다.

짜증난다.

 

아니였다 그냥 이미지에는 class로 css를 먹이자.

 

 

 

 

 

lorem을 사용하면

긴 텍스트를 자동으로 넣어준다.

 

 

 

ctrl + shift + p

 

 

ctrl + p

 

hr 태그

 

 

overflow

 

https://offbyone.tistory.com/296

CSS - overflow 속성 사용하기

text-overflow

https://aboooks.tistory.com/382

[CSS3] text-overflow 속성

 

 

flex-wrap

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pjh445&logNo=221160742046 

CSS flex > flex-wrap 속성

 

z-index default = 0 이다.

 

 

.singlePostEdit 이런식으로 입력하면

<div>태그에 className이 자동생성된다.

 

 

float

https://www.zerocho.com/category/CSS/post/5881edef636a7f0b8e8507d8

(CSS) CSS 정렬과 Float - 세로 가운데 정렬, inline-block 간격 문제

 

 

 

justify-content: space-between;

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

 

 

 

relative , absolute

https://blog.naver.com/tkdgus830416/70173677850

[css] position

 

flex-direction: column 이므로, align-self center시에 가로축으로 중앙정렬이 된다.

만약에 그냥 flex만 있었다면,

세로축으로 중앙정렬 됐을꺼다.

 

https://webzz.tistory.com/363

[CSS] align-self

검색하다 찾은 사이트인데 좋은사이트인 것 같다.

 

 

linear-gradient

https://aboooks.tistory.com/362

[css3] gradient (linear-gradient) 사용법