CARD NEWS · 디자인

테일윈드 CSS 4장 카드뉴스

SNS·수업 자료·발표 슬라이드에 붙여 쓰기 좋은 4장 세트입니다. 화면을 캡처하거나 브라우저의 인쇄 기능으로 PDF를 저장해 공유할 수 있습니다.

1/4
디자인

테일윈드 CSS란?

2017년 미국 개발자 Adam Wathan이 만든 CSS 프레임워크로, 'text-lg bg-blue-500'처럼 짧은 클래스 이름을 조합해 디자인을 적용하는 방식을 표준화한 현재 가장 널리 쓰이는 웹 스타일링 도구입니다.

2/4
쉬운 풀이

이렇게 이해하면 쉬워요

예전에는 디자인을 적용할 때 별도의 CSS 파일을 만들어 'card-title { font-size: 18px; color: blue; }' 같은 규칙을 따로 적었어요. Tailwind CSS는 HTML 안에 'text-lg text-blue-500' 같은 짧은 단어를 그대로 써서 디자인을 입힙니다. 한 번에 결과를 볼 수 있어서 입문자에게 진입 장벽이 낮고, 동시에 1만 줄짜리 큰 코드도 관리하기 쉬워서 대형 회사도 씁니다.

3/4
활용 사례

누가·언제 쓰나?

ac] 구분: AI for Everyone도 Tailwind 기반 디자인 시스템을 씁니다. 수치: 사이트 전체 클래스 수 약 3,500개, 새 화면 만들 때 평균 30분 단축. 결과: 운영자가 코드 한 줄에 색·여백을 즉시 바꿀 수 있습니다. [OpenAI ChatGPT 웹] 구분: ChatGPT의 채팅 화면도 Tailwind 위에서 만들어졌습니다. com/}}.

4/4
더 알아보기

ai.percent.ac
/word/tailwind-css

AI for Everyone by Percent · CC BY-SA 4.0
← 원문 페이지

카드를 캡처하거나 브라우저 인쇄 → PDF로 저장하면 인스타·수업 자료에 쓸 수 있습니다. CC BY-SA 4.0에 따라 출처(AI for Everyone by Percent · ai.percent.ac)와 라이선스를 표시하면 상업적으로도 이용할 수 있습니다. 내용을 바꿨다면 그 사실을 밝히고 같은 라이선스로 공유해 주세요.