크롬 브라우저 설치 및 확장 도구
크롬 브라우저 설치
크롬 개발자 도구
- 개발자 도구 실행:
F12 (Windows) 또는 cmd + option + i (Mac) 키를 눌러 개발자 도구를 열 수 있습니다.
- Elements 탭: HTML 및 CSS 구조를 실시간으로 확인하고 수정할 수 있습니다.
- Console 탭: 자바스크립트 오류를 디버깅할 수 있습니다.
- Tailwind CSS 디버깅 팁:
- Elements 탭에서 Tailwind CSS 클래스를 수정하고 실시간으로 스타일 변화를 확인할 수 있습니다.
크롬 확장 프로그램 추천
- Wappalyzer: 웹사이트에서 사용된 기술 스택을 분석하는 확장 프로그램.
- WhatFont: 웹사이트에서 사용 중인 폰트를 쉽게 확인할 수 있는 도구로, Tailwind CSS 프로젝트에서 폰트 스타일을 참고할 때 유용합니다.
- Auto Rename Tag: VSCode에서 쌍을 이루는 HTML/XML 태그의 이름을 자동으로 바꿉니다.
VSCode (Visual Studio Code)
VSCode 설치
- 웹사이트: VSCode 공식 다운로드
- VSCode는 다양한 언어와 도구를 지원하는 무료 코드 에디터로, Tailwind CSS 프로젝트를 진행할 때 최적화된 환경을 제공합니다.
프로젝트 생성
프로젝트 디렉토리 생성