tailwindcss (테일윈드) 를 사용해서 이력서를 만들어 보자!

 

tailwindcss?

 

https://tailwindcss.com/

 

테일윈드는 디자인이 정의된 부트스트랩(bootstrap)과 다르게 커스텀이 편하고 직관적이기 때문에 좀더 다양하게 스타일을 편하고 빠르게 구성 할수 있습니다.

 

 

 

---

 

 

테일윈드는 사용법

 

 

부트스트랩이나 다른 프레임 워크와 비슷하게 정해진 링크를 헤드에 정의하여 사용하면 된다.

 

테일윈드는 마크업 구조에 클래스 이름으로 미리 정해진 사이즈나 정의들을 사용할수있는데 예를들어 <div> 태그가 있고 폰트 사이즈를 변경하려면 <div class= "text-xl"> 이런식으로 써주면 테일윈드에서 xl 에 미리 정의해둔 사이즈가 적용된다.

 

사이트에 들어가면 컨트롤 + k 로 원하는 것들 검색하여 바로 적용할수 있으므로 빠르고 편하게 적용할수 있다.

 

 

테일윈드의 장점으로는

 

• css를 잘 모르고 사용할지 몰라도 테일윈드의 사용법과 설명을 조금만 읽어봐도 금방 사용할수 있다.
• 클래스 이름으로 속성값이 정의되어 있기 때문에 재사용하기 용이하며 유지 보수에도 편하다.
• 반응형도 속성들이 미리 정의되어 있어서 반응형에 어려움을 느끼는 부분도 어느정도 쉽게 해결할수있다.

 

 

 

다음은 테일윈드만을 사용해서 만들어본 이력서인데 처음 사용이라 100프로 원하는 만큼 나오지 않았지만 좀더 익숙해지면 유용하게 사용할수 있을꺼 같다.

 

 

 

 

 

 

 

https://github.com/chry8822

chry8822 - Overview