이제 이 섹션을 마무리하기 위해
테일윈드 css를 살펴봅시다
또 다른 매우 인기 있는
이 웹 앱 스타일링 솔루션은
리액트 앱 뿐 아니라 일반적인 웹 앱에서도
효과적을 작동하는 것으로 나타납니다
테일윈드 css는
어떤 웹 프로젝트에서든 사용할 수 있는 css 프레임워크입니다
이것은 리액트에만 집중하지 않지만
리액트와 아주 잘 작동합니다
여기에서 볼 수 있듯이
테일윈드는 html 요소에
이러한 클래스를 추가하여
스타일을 단계적으로 적용하고
결과적으로는 전체 컴포넌트를 스타일링하는 것과 관련 있습니다
추가적으로 테일윈드는 전반적인 문서에
영향을 미칠 기본 스타일을 설정하지만
주요 아이디어는
이러한 작은 유틸리티 클래스에 추가하는 것입니다
이것을 처음 보는 경우
꽤 놀랍고 조금은 지저분 해보일 수 있습니다
결국 jsx 코드에 많은 css코드를
추가할 것입니다
그러나 이 데모 프로젝트에서 볼 수 있듯
실제로 그렇게 나쁘진 않습니다
많은 개발자들에게는
테일윈드 css를 사용하는 것이 꽤 편리하며
이것은 이를 사용하려면 css를 알지 않아도 되기 때문입니다
이것이 이러한 css 프레임워크의 아이디어입니다
이제 테일윈드 css를 사용하려면
공식 테일윈드 css 사이트의 설명서로 이동하고
그곳에서 설치 아래에서
프레임워크 가이드를 클릭하거나
vite를 클릭하거나
이 강의에서 첨부된 링크를 사용하면 됩니다
그와 관련하여, 이 강의에 첨부된 링크를 통해
테일윈드 css가 이미 설정된 새 CodeSandbox 프로젝트에
연결할 수 있습니다
그리하여 수동으로 설정할 필요가 없습니다
그러나 로컬 프로젝트의 경우는
이 설정 단계를 진행해야 합니다
CodeSandbox의 경우는 단순히 업데이트된
샌드박스 링크를 활용하면 됩니다
로컬 프로젝트에서는 이미 프로젝트가 있기에
첫 번째 단계를 건널 뛸 수 있습니다
그러나 테일윈드 css 패키지와 그에 필요한
일부 패키지를 설치하고
초기화하기 위해
이 두 명령을 실행해야 합니다
여기서 볼 수 있는 정확한 명령은 시간이 지남에 따라 변경될 수 있고
여기에서 볼 수 있는 명령을 실행하기만 하면 됩니다
따라서 여러분은 개발 서버를 종료하고
테일윈드를 설치하고 초기화하기 위해
두 가지 명령을 실행해야 합니다
이렇게 하고 나면
일부 새로운 구성 파일이 추가된 것을 볼 수 있습니다
이 섹션에서는 여러분을
테일윈드 css로 시작하게 하겠습니다
이것은 테일윈드 css 강의가 아니므로
테일윈드를 구성하고
제공하는 모든 기능을
살펴보지 않습니다
대신 더 자세히 알아보고자 한다면
공식 테일윈드 css 문서 혹은
전용 테일윈드 ccs 강의를
사용해야 합니다
지금은 그냥 시작해보겠습니다
그리고다음 단계에서는
이러한 구성 파일 중 하나를 조정하여
해당 항목을 이 항목으롤 덮어쓰는 것입니다
다시 말하면 시간이 지남에 따라 변경될 수 있으므로
프로젝트를 보고 따라 하다 보면
테일윈드 웹 사이트에서 현재 시점에
다른 단계가 표시될 수 있습니다
그러나 지금은 여기에 표시된 대로 구성을 조정해야 합니다
그러한 다음 거의 마지막 단계로
이 세가지 문을 index.css 파일로
복사해야 합니다
이를 위해 저는 실제로 먼저
기존의 index.css 파일을 복사하고
index-old.css로 이름을 변경하여
남겨 둡니다
그리고 나서 나머지 index.css 파일에 모든 내용을 삭제하고
이 세 가지 문장을 추가합니다
이는 테일윈드에서 필요합니다
이로써 모든 설정이 마무리되었습니다
이제 npm run dev를 실행하면
이 프로젝트는 테일윈드의 css 를 사용하게 되고
따라서 전에 css 파일 이름을 변경했고
해당 변경된 파일은 더 이상 가져오지 않기에
결과적으로 웹 사이트를 방문하면
이것이 기본적으로
망가진 것을 볼 수 있습니다
헤더는 깨지지 않았고
입력과 레이블
그리고 버튼도 여전히 어느 정도 괜찮아 보입니다
왜냐하면 여기서 styled component를 사용하고 있기 때문입니다
그러나 이제는 이것도 바꿀 것이며
대신에 테일윈드 css로 전환하겠습니다
이전에 언급한 대로
테일윈드 css의 핵심 개념은 간단히 말하여
소규모 유틸리티 css 클래스에 요소를 추가하여
외관을 변경하고
테일윈드 팀에서 사전에 정의한
css 규칙을 이용하는 것입니다
따라서 이 프로젝트에서는
이러한 styled.header
코드를 제거하고
일반 헤더라도 다시 전환하며
해당 styled. import와
이 import를 제거할 수 있습니다
따라서 헤더가 물론 지금 깨졌고
그래서 이제 이러한 유틸리티 클래스를 추가해볼 수 있습니다
이를 위해 헤어데 다시 className
속성을 추가하겠습니다
그리고 이제 여기에서는 테일윈드 클래스에 대한
멋진 자동 완성을 받게 되는데 이것은 꽤 편리합니다
저는 이것을 visual studio code에서 받고 있습니다
왜냐하면 저는 테일윈드 css intellisense 확장 프로그램을 설치했기 때문입니다
그리고 저는 이것을 설치하는 것을 추천합니다
이것은 테일윈드 팀에서 자체적으로 출시한 것으로
테일윈드와의 작업하는 과정을
간소화해주는데
테일윈드 클래스 이름 제안을 받아볼 수 있기에
공식 문서에서
모든 클래스의 이름을 찾아보지 않아도 됩니다
이것은 대안이지만
문서를 살펴보면
일반적인 핵심 개념 및 테일윈드를 구성하고
사용자를 정의하는 방법에 대한 자세한 내용만이 아니라
다양한 스타일을 적용하는
다양한 방법도 배울 수 있습니다
테일윈드와 함께 Flexbox를 사용하는 방법을 예로 들자면
flex 클래스를 컨테이너에 추가하여
Flexbox를 생성하고
그런 다음에 이것에
요소의 너비와 높이를 설정하는 등의 방법입니다
그리고 그것이 제가 여기서 하고 싶은 것입니다
이 헤더는 child 요소를 위치시키기 위하여
css Flexbox를 사용해야 합니다
테일윈드 css를 사용하면 여기에
flex 클래스를 추가하고
다음 메인 축이 수직인 Flexbox가 되도록
flex col을
추가합니다
그리고 이 클래스가 적용될 때
적용되는 기본 css 코드의 미리보기를
볼 수 있습니다
저는 이러한 항목을
가운데 정렬하기 위해
items-center를 추가할 것입니다
그리고 mt 유틸리티 클래스를 사용하여
위쪽에 2rem의 여백을 추가하고
여기 mt-8로 표시되는 것과 같이
아래쪽에는 mb-16으로 4rem의 여백을 추가하겠습니다
저는 테일윈드를 사용해 본적이 없을 경우에
이것이 매우 혼란스러울 수 있음을 이해합니다
이상한 클래스 이름이 많고
어떤 클래스 이름이 존재하고
어떤 클래스 이름이 무엇을 하는지
어떻게 알아야 할까요?
당연히 공식 문서의 도움을 받을 수 있습니다
여기에서는 예를 들어 여백을 설정하는 방법에 대해서도 배웁니다
그리고 방금 사용한 mb 클래스와 같은 클래스도 볼 수 있습니다
그리고 당연히 여러분이 이 프로젝트에서
테일윈드를 사용하면서 핵심 클래스가
익숙해지도록 익히게 될 것입니다
여러분은 지금 이것을 적극적인 과정으로 진행하는 것보다
필요할 때마다 클래스를
찾아보고
연습하게 되면 시간이 지나면 자연스럽게 익히게 될 것입니다
예를 들어 이러한 클래스를 추가함으로써
이것이 다시 가운데로 정렬된 것을 볼 수 있습니다
물론 모든 것은 아닙니다
여전히 이미지는 좋아 보이지 않습니다
따라서 여기에도 몇 가지의 클래스를 추가해야 합니다
예를 들어
mb-8을 추가하여 아래에 4 rem의 여백을 추가하고
w-44 클래스를 사용하여
이 경우에는 11rem의 너비를 추가하여
이미지에 고정된 너비를 지정하고
동일한 높이를 지정하여
이미지가 더 멋지게 보이도록 합니다
또한 현재의 이미지가 왜곡되지 않도록
확인하기 위해 object-contatin을 추가하여
이 속성에 해당하는 css 속성을 추가할 것입니다
그리고 물론 여기서는 title과
paragraph를 스타일링 할 수도 있습니다 text-4xl 클래스를 추가하여
텍스트를 크게 만들거나
예를 들어 font-semibold 클래스를 추가하여 볼드로 만들거나
tracking-widest를 추가하여 문자 간에 간격을
추가하거나 text-center를 추가하여 가운데
정렬하거나 uppercase 를 추가하여 모두 대문자로 만들 수 있습니다
그런 다음 text-amber-800을 사용하여 이 색상을 설정할 것입니다
왜냐하면 테일윈드 css의 좋은 점은
많은 내장 배경 문자와 색상이 제공되어
색상 팔레트를 정의하지 않고도
즉시 멋진 색상 팔레트를 얻을 수 있다는 것입니다
그러나 여전히 원한다면
직접 색상을 정의할 수도 있습니다
테일윈드를 사용자 정의하고 나만의 색상을 설정할 수 있습니다
그러나 여기 내장 색상에서
빠르게 좋은 것을 얻기 위해 이것들을 사용할 수도 있습니다
이로써 이미 훨씬 더 좋아 보입니다
그러나 여기에서는 테일윈드의
소개일 뿐이기 때문에 조금은 커스텀하고 싶습니다
전체 페이지에 멋진 배경을
다시 가져오고 싶습니다
그리고 사용하려고 했던
사용자 지정 폰트를 가져오고 싶습니다