마카로닉스

2272 No

tailwindcss - 테일윈드 css

2024-08-20 23:07:31 By 라이트 0 150 댓글수 0 삭제 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

1.프로젝트 링크 코스 링크

코드 및 데모:

주요 웹사이트(프로젝트 데모 포함) - https://tailwindfromscratch.com

샌드박스 코드 - https://github.com/bradtraversy/tailwind-sandbox

모든 프로젝트 코드 - https://github.com/bradtraversy/tailwind-course-projects

간단한 Tailwind 스타터 코드 - https://github.com/bradtraversy/simple-tailwind-starter

문서:

Tailwind CSS 공식 문서

코스 제공:

Traversy Media - https://traversymedia.com

2.Tailwind의 주요 특징

Tailwind CSS는 웹 개발에서 많이 사용되는 유틸리티 우선 CSS 프레임워크입니다. 기존의 Bootstrap 같은 프레임워크는 미리 정의된 컴포넌트(예: 알림, 내비게이션 바, 카드 등)를 제공하는 반면, Tailwind는 다양한 유틸리티 클래스를 제공하여 개발자가 커스텀 컴포넌트를 쉽게 만들 수 있도록 도와줍니다.

Tailwind의 주요 특징은 다음과 같습니다:

유틸리티 클래스: HTML 클래스가 단일 CSS 속성에 집중되어 있어 명확하고 사용하기 쉽습니다.
유연한 디자인: 미리 정의된 디자인이 없기 때문에 완전히 사용자 정의된 스타일을 만들 수 있습니다.
빠른 UI 제작: 실시간으로 브라우저에서 다양한 스타일을 테스트하고 수정할 수 있어 빠르게 UI를 구성할 수 있습니다.
커스터마이징: Tailwind는 설정 파일을 통해 클래스의 값을 사용자 정의할 수 있습니다.
반응형 디자인: 미디어 쿼리를 직접 작성할 필요 없이 반응형 클래스를 사용하여 쉽게 디자인할 수 있습니다.
상태 기반 클래스: 요소의 상태(예: hover)에 따라 조건부로 스타일을 적용할 수 있습니다.

단점으로는 HTML에 클래스가 많아질 수 있다는 점이 있지만, 커스텀 클래스를 만들어 이를 최소화할 수 있습니다. 결론적으로 Tailwind는 유연하고 빠른 UI 개발을 가능하게 해주며, 특히 세부적인 디자인 제어가 필요한 프로젝트에 적합합니다.

3.Tailwind의 설정

필요한 프로그램 및 도구

VS Code: 다재다능한 텍스트 에디터로, 추천드립니다. 직관적인 인터페이스와 다양한 확장 기능을 제공하며, 통합 터미널이 있어 편리합니다.
Node.js: Node Package Manager(NPM)를 통해 Tailwind와 기타 패키지를 설치하기 위해 필요합니다.
Git: 버전 관리를 위해 Git이 필요하며, 프로젝트를 배포할 때도 사용됩니다.

VS Code 확장 추천

Live Server: HTML 파일을 로컬 서버에서 실시간으로 실행하며 변경 사항을 자동으로 반영합니다.
Tailwind CSS IntelliSense: Tailwind 클래스 자동 완성 기능을 제공합니다.
PostCSS Language Support: Tailwind의 지시어(Directives)를 사용할 때 발생하는 오류 표시를 방지하고 추가적인 기능을 제공합니다.
Prettier: 코드 포맷터로, 코드 스타일을 일관되게 유지합니다.
Auto Rename Tag: HTML 태그를 변경할 때 시작 및 종료 태그를 동시에 수정해줍니다.

Emmet 사용

HTML을 더 빠르게 작성할 수 있도록 도와주는 도구입니다. 예를 들어, h1을 입력 후 엔터를 누르면 자동으로 <h1></h1> 태그가 생성됩니다. Emmet은 기본적으로 VS Code에 내장되어 있으며, 다른 텍스트 에디터에서는 플러그인으로 설치해야 할 수 있습니다.

자바스크립트 스타일

세미콜론을 사용하지 않으며, 작은따옴표(')를 선호합니다. 이는 개인 취향이므로 원한다면 세미콜론을 추가해도 괜찮습니다.

설정 파일(JSON) 확인

폰트 크기는 18, 터미널 폰트 크기도 18로 설정되어 있습니다.
자동 저장은 비활성화되어 있으며, format on save 옵션은 활성화되어 있습니다.
기타 설정으로는 워드 랩과 탭 크기 2 등이 있습니다.

4.Sandbox 프로젝트 개요

목적: Tailwind의 다양한 클래스(예: 타이포그래피, 레이아웃, 경계선, 필터 등)를 이해하고 실습하기 위한 환경을 설정합니다.
파일 구성:
- 완료된(don) 버전과 시작용(starter) 버전이 있습니다.
- 각 폴더에는 타이포그래피, 레이아웃 등 특정 주제에 맞는 HTML 파일이 포함되어 있습니다.
- 시작용 폴더는 HTML 구조가 빈 상태로 제공되며, 각 클래스의 예제를 직접 작성하며 학습합니다.

학습 접근 방식

선택 사항: Tailwind에 익숙하다면 이 과정을 건너뛰어도 됩니다. 그러나 Tailwind를 처음 접한다면 이 과정을 통해 기본 개념을 탄탄히 다질 수 있습니다.
프로젝트 다운로드: GitHub에서 레포지토리를 복제하거나 ZIP 파일을 다운로드한 후, 시작용 폴더를 컴퓨터에 복사해 사용합니다.
폴더 이름 변경: 시작 폴더를 "Tailwind Sandbox"로 이름을 바꾼 후, 텍스트 에디터(예: VS Code)로 열어 작업합니다.

Live Server 설정