16일차: 최종 SASS 수정

이 포스트는 이전 포스트의 연속입니다. 컨텍스트를 위해 저는 FreeCodeCamp 프로젝트를 위한 임의 인용 기계를 만들고 있습니다. 이렇게 완성했습니다.

임의 색상 추가 🌈

그 전에 페이딩 기능을 완료했습니다. 이제 새 견적이 표시될 때마다 색상을 변경하려고 합니다. 이 부분은 다소 사소합니다. 이것은 독자에게 연습 문제로 남겨둘 것입니다.

버튼의 background-color 속성과 body 요소에도 색상을 적용했습니다.

이제 몇 가지 터치 업을 할 시간입니다!

Twitter 의도를 올바르게 추가했습니다.

일부 웹사이트에서 트윗 버튼을 본 적이 있다면 Twitter Web Intent를 사용할 수 있습니다.

사용자가 미리 정의된 일부 콘텐츠를 트윗할 수 있는 특별한 Twitter URL입니다. URL은 버튼에 href 속성으로 배치됩니다.

당신은 더 많은 것을 읽을 수 있습니다.

트윗 버튼 안에 넣은 후 마지막 손질을 할 시간입니다!

사이트 마무리

먼저 레이아웃 조정으로 사이트를 깔끔하게 만들었습니다.

그런 다음 모든 버튼과 따옴표 상자에 둥근 모서리를 추가했습니다.

또한 Google Fonts에서 일부 글꼴(특히 Akshar 및 Open Sans 글꼴)을 가져왔습니다.

그리고... 끝났습니다! 얼마나 멋진가요?
'
이제 CodePen에 게시합니다.

출판!

CodePen은 일반적으로 body 태그 안에 넣는 HTML 코드만 허용하므로 JavaScript를 통해 인라인 스타일을 설정해야 합니다.

var body = document.body;
body.classList.add("same-color");

document.documentElement.style.setProperty("--trans-time", "0.5s");

순수한 CSS나 JavaScript를 작성하지 않기 때문에 각각에 대해 전처리기를 설정해야 합니다. JS용 Babel, CSS용 SASS입니다.

또한 Google Fonts 링크를 head 태그에 넣어야 합니다. 다행스럽게도 CodePen에는 이미 이를 위한 특별한 설정이 있습니다.

여기서 가장 중요한 것은 React, ReactDOM 및 FontAwesome 라이브러리를 사이트로 가져오는 것입니다. 이는 설정에서 필요한 패키지를 검색하여 수행할 수 있습니다.

이제 끝났습니다.

후기

이야 완성했어! 저는 이제 프론트엔드 개발자의 길에 한 발 더 다가섰습니다. 버그나 임의의 항목으로 어려움을 겪고 있는 분들을 위해 계속 진행하세요! 프로젝트를 완료하면 새벽 3시에 발생하는 임의의 버그나 마주치는 종속성 문제를 잊어버리게 됩니다. 뿌듯하고 든든하게 느껴졌다.

내일이 당신에게 더 좋을 수 있기를 바랍니다!

Fullo me on Github !
또한 !