[HTML & CSS] 라이브러리

[라이브러리]

• 이번에는 HTML과 CSS를 보다 더 편하게 꾸며줄 수 있는 몇 가지 라이브러리를 소개하려고 합니다.
• 라이브러리는 보통 HTML의 body 태그 아래에 작성할 수 있습니다.

 

[cdnjs]

• cdnjs는 Cloudflare에서 호스팅하는 무료 오픈 소스 소프트웨어 콘텐츠 전송 네트워크이다.
• JavaScript와 CSS 라이브러리를 제공한다.
• URL : https://cdnjs.com/

cdnjs - The #1 free and open source CDN built to make life easier for developers

 

[테일윈드 라이브러리]

• 테일윈드(Tailwind)는 다른 UI 라이브러리처럼 스타일링이 입혀진 컴포넌트를 지원하는 것이 아닌, class를 통해 개발자가 직접 HTML에서 스타일을 입히면서 컴포넌트를 커스텀하게 제작하는 방식을 가지고 있다.
• 이를 통해서 더 빠르고 유연하게 UI를 디자인하고 스타일링이 가능하다.
• 가장 유용한 점은 body, ul, li, a 태그에 대한 노멀라이즈도 기본으로 적용되어 있어 따로 작업을 해줄 필요는 없다.
• 테일윈드 치트시트 URL : https://nerdcave.com/tailwind-cheat-sheet

Tailwind CSS Cheat Sheet

 

[데이지UI 라이브러리]

• 데이지UI는 사용자가 직접 UI를 커스텀할 필요없이 이미 구현되있는 여러 UI들을 사용할 수 있도록 제공된 라이브러리이다.
• 애니매이션이 동작이 포함되어 있거나, 버튼, 이모티콘, 뱃지 등 여러가지 컴포넌트를 사용할 수 있다.
• 데이지UI URL : https://daisyui.com/components/

Components — Tailwind CSS Components ( version 4 update is here )

 

• 아래는 위에서 설명한 라이브러리를 적용한 HTML과 CSS이다.

See the Pen html day8-2 by psm817 (@psm817) on CodePen.

 

• 코드펜은 기본적으로 HTML에 body가 적혀있기 때문에 바로 라이브러리의 주소를 작성해도 괜찮다.
• 라이브러리 주소들은 cdnjs에서 모두 가져올 수 있고, 현재 import된 라이브러리는 테일윈드, 데이지UI, 폰트어썸이다.
• 상단에 정사각형은 div 태그로 이루어져 있고, CSS에서 직접 너비, 높이를 지정하고 있다.
• 그 아래의 정사각형은 nav 태그로 이루어져 있고, CSS에서 커스텀을 하지 않고, nav의 class를 통해 HTML에서 커스텀을 적용하였다.
• w-24는 너비를, h-24는 높이를, bg-red는 배경 색상을, m-10은 margin 여백을 의미하고, 이런 정보들은 위에 첨부된 치트시트에서 모두 확인할 수 있다.
• 그 아래의 Success 버튼은 현재 제가 직접 커스텀한 것이 아니고 데이지UI에서 가져온 버튼이다.