하루y

Tailwind CSS의 수천 가지 클래스명을 모두 외우는 것은 불가능에 가깝고, 숙련자들도 그렇게 하지 않습니다. 효율적으로 클래스명을 찾고 익히는 4가지 핵심 방법을 알려드릴게요.

1. 공식 문서 검색 (가장 정확한 방법)

가장 추천하는 방법은 **Tailwind CSS Documentation**을 활용하는 것입니다.

• Ctrl + K (맥은 Cmd + K): 공식 문서에서 단축키를 눌러 검색창을 띄우세요.
• 찾고 싶은 CSS 속성(예: font-size, flex, position)을 입력하면 대응하는 클래스명 리스트가 즉시 나옵니다.

2. VS Code 확장 프로그램 (필수 설치)

Tailwind CSS IntelliSense 확장을 설치하면 코딩 스타일이 완전히 달라집니다.

• 자동 완성: 클래스명을 입력하기 시작하면 사용 가능한 목록을 보여줍니다.
• 실시간 미리보기: 클래스명 위에 마우스를 올리면 실제 어떤 CSS 코드가 적용되는지 팝업으로 보여줍니다.
• 색상 확인: 색상 클래스 옆에 작은 사각형으로 실제 색상을 표시해 줍니다.

3. 클래스명 명명 규칙(Naming Convention) 이해

Tailwind의 클래스명은 일정한 패턴이 있어, 원리만 알면 유추하기 쉽습니다.

• 속성-값 구조: m-4 (margin: 4), p-2 (padding: 2)
• 방향 지정: mt-4 (margin-top), px-2 (padding left & right)
• 색상 단계: bg-blue-500처럼 색상명-밝기(50~900) 구조를 가집니다.
• 수치 단위: 보통 1 단위당 0.25rem (4px)입니다. 즉, w-4는 1rem (16px)이 됩니다.

4. 치트 시트(Cheat Sheet) 활용

공식 문서가 너무 방대하다면, 한 페이지에 모든 클래스를 모아둔 치트 시트 사이트를 북마크해 두세요. 한눈에 클래스를 훑어볼 때 매우 유용합니다.

• Tailwind Components Cheat Sheet
• Nerdcave Tailwind Cheat Sheet

팁: 브라우저 개발자 도구 활용

이미 만들어진 Tailwind 사이트가 있다면, **F12(개발자 도구)**를 눌러 요소를 찍어보세요. 어떤 클래스 조합이 어떤 디자인을 만드는지 직접 눈으로 확인하는 것이 가장 빠른 학습법입니다.

처음에는 flex나 grid 같은 레이아웃 관련 클래스부터 시작해서, 점차 색상과 간격 순으로 익혀보시는 건 어떨까요? 가장 먼저 구현해보고 싶은 UI 스타일이 있으신가요?

JSON (JavaScript Object Notation)은 가벼운 데이터 교환 형식입니다. 
JavaScript 프로그래밍 언어 표준 ECMA-262 3판 - 1999년 12월의 하위 집합을 기반으로 합니다. 
JSON은 완전히 언어 독립적인 텍스트 형식이지만 C를 비롯한 C 계열 언어의 프로그래머에게 친숙한 규칙을 사용합니다. 
이러한 속성은 JSON을 이상적인 데이터 교환 언어로 만듭니다.

JSON은 두 가지 구조를 기반으로 합니다.

1. 이름/값 쌍의 모음. 다양한 언어에서 이것은 객체 , 레코드, 구조체, 사전, 해시 테이블, 키 목록 또는 연관 배열 로 실현됩니다 .
 - {} : 객체로 이름/값 의 정렬되지 않은 집합

2. 정렬된 값 목록. 대부분의 언어에서 이는 배열 , 벡터, 목록 또는 시퀀스로 실현됩니다.
 - [] : 배열로 정렬 된 값 모음. 배열에 객체를 다양하게 담을 수 있기 때문에, 처음 의도와 달리 순수한 정렬된 값 목록으로는 사용되지 않음.

9.양식

1) whitespace 는 공백("", " "), 캐리지리턴, 폼피드, 탭가 있음.

2) 제어문자

\b 백스페이스

\f 폼 피드

\n 개행

\r 캐리지 리턴

\t 탭

\" 따옴표

\/ 슬래시

\\ 역슬래시

\uHHHH  16진수 네자리로되어 있는 유니코드 문자

관련사이트

https://www.json.org/

https://ko.wikipedia.org/wiki/JSON

 {
    "키1": "가나다",
    "키2": 999,
    "배열1": ["A", "B"],
    "객체1": {"키1": 0, "키2": "문자1", "키3": "문자2"},
 }

end.