일단 하나를 해보자

https://react.vlpt.us/mashup-todolist/01-create-components.html

이거 보고 투두리스트 만드는 중인데 

  Line 4:10:  'MdDone' is defined but never used    no-unused-vars
  Line 4:18:  'MdDelete' is defined but never used  no-unused-vars

컴포넌트만 생성하고 안에 변수 안넣어서 안뜨는 거였다!ㅎㅎㅎ삽질좋아

아까는 

모듈문제인 주 알고 react-icon 다시깔고 그랬네

그거 다시 까니까 styled-component 모듈 찾을 수 없대서 또 다시깔았어..

(참고로 투두리스트 시작할때 styled-component모듈 깔아도 안된다길래 뭐지 했는데 

버전 문제였음 5.0.0로 하니까 잘되더라. 이놈의 버전에러)

yarn add styled-components@5.0.0

모듈깔때 다른 것도 삭제되기도 하나보네 

그것만 삭제하고 다시 깔아야되는데 그냥 해서 그런가..

한번에 이렇게 스타일 여러 개 줄 수 있는 거 좋다

컴포넌트를  app.js말고

다른 컴포넌트 안에 넣는 경우도 있는데 만들면서 경로 잘봐야겠다!!

얘를 들면 Todolist 에 들어가는 TodoItem 같은 경우

출처:https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1

방향

방향마다 여백을 다르게 설정할 수 있습니다.

• margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다
• margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
• margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
• margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.

즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정합니다.

https://velog.io/@jary/flex%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC

margin: 0 auto;

근데 이게 안될때도 있어. 

왜 안되는지 잘 모르겠어

가장 일반적인 방법은 상위 엘리먼트의 margin값을 0 auto를 주어서 왼쪽과 오른쪽을 자동으로 설정하여 중앙 정렬하는 방법이다.
여기서 단점은 상위 엘리먼트의 width값을 명시를 해주어야 적용이 된다는 것이다. 또한 수평정렬만 가능하다는 점..

라고 한다.

flex 이용하는 방법도 있더라

display로 가운데 줬는데

앞에가 이상하게 떨어져있길래 

마진이랑 패딩 0 줬더니 깔끔하게 중앙배열됨

https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction

이것도 봐라~

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.

• content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
• border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

content-boxCSS 표준이 정의한 초기 기본값. width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 370px입니다.요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.border-boxwidth 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 350px입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 border-box를 사용해 요소를 사라지게 할 수는 없습니다.요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.

이거 만으로 가운데 맞춰지네 오..

출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dahamee&logNo=220494959638

 box-shadow 속성은 그림자(Drop-Shadow)를 만들어 주는 기능을 한다.

     css3를 지원하는 브라우저와 모바일 웹브라우저에서 적용할 수 있다.

    형식 : box-shadow:1px 1px 1px rgba(0, 0, 0, .1);   x-offset, y-offset, blur, color의 순서

     ㆍx-offset : 정해진 수치만큼의 크기로 오른쪽에 그림자를 지정한다. 

                     -(마이너스)값은 왼쪽에 그림자를 지정한다.
     ㆍy-offset : 아래쪽에 정해진 수치만크의 크기로 그림자를 지정한다. 

                      -(마이너스)값은 위쪽에 그림자를 지정한다.
     ㆍblur : 정해진 수치만큼 그림자가 흐려지는 정도. t생략가능, default, 숫자가 클수록 흐려짐
     ㆍcolor : 그림자의 색상 지정. #FEFEFE  또는 rgba(0, 0, 0, 1) 방식 모두 사용 가능  
     ㆍrgba의 a값은 불투명도를 의미. 숫자 1은 원색 . 0.5 혹은 .5는 50%를 뜻한다. 

scss 써보려고 깔았는데 계속 안돼서 찾아보니까 버전문제...ㅎ

이전거 삭제하고
$ npm uninstall node-sass
깔고
$ npm install node-sass@5.0.0

나는 yarn으로 하고 있으니까 이걸로
삭제하고
$ yarn remove node-sass
깔고
$ yarn add node-sass@5.0.0

이제 잘뜸~

출처: https://domdom.tistory.com/55

아 그리고 아까 경로잘못설정해서 오류 나더라 

컴포넌트 login 만들었으니까

여기 넣어야되지 않을까 했지만 

아니었음 오류원인!

App.js 에 들어가줘야함

이제 잘뜸요