메모 앱 디자인 변경해보기

가장 먼저 부트스트랩을 매모 앱에 적용해보겠습니다.

단순한 메모 앱에 부트스트랩 스타일을 적용하기 위해 커서에게 다음과 같이 부탁해보겠습니다.

부트스트랩을 적용해서 메모 앱의 기능은 그대로 두고, 디자인만 더 멋지게 바꿔줘.

 

그러면 커서는 부트스트랩 설치에 필요한 명령어르 실행하고 이후 전체 코드에 부트스트랩을 적용하기 시작합니다. 실행해야할 명령어 또는 반영해야 할 코드는 [Run]을 클릭하여 적용하세요.

 

변경을 적용하고 실행해보면 전반적으로 깔끔하면서 정돈된 부트스타일 메모 앱을 바뀐 것을 볼 수 있습니다.

 

이번에는 테일윈드 CSS를 적용해보라고 할까요? 그러면 테일윈드 CSS를 적용함과 동시에 기존의 부트스트랩을 정리하는 모습을 보입니다.

기능은 그대로 두고 TailwindCSS를 적용해줄래?

 

설치하고 적용하는 등 모든 작업을 마치면 테일윈드 CSS를 적용하기 위해 실행한 서버를 종료하고 다시 시작해야 합니다. 터미널에서 Ctrl + C 를 눌러 서버를 강제 종료합니다.

 

다시 npm start로 서버를 다시 구동합니다.

 

변경이 완료된 다음 메모 앱을 실행해보면 테일윈드 CSS 특유의 현대적인 디자인으로 바뀌었습니다.