.learn 문서 작성 가이드 (AI 전용)

이 문서는 .learn/ 폴더에 들어가는 문서를 AI가 작성할 때의 기준입니다. 목표는 사용자가 읽기만 해도 장면을 상상하고 바로 따라할 수 있게 만드는 것입니다.

1) 핵심 원칙

• •예측 가능성: 사용자가 문서를 읽는 즉시 “어떤 구조인지” 머릿속에 그릴 수 있어야 한다.
• •직접 묘사: DOM 구조, UI 배치, 코드 흐름을 직접 보여주는 예시로 설명한다.
• •초심자 기준: 축약 표현이나 전제 지식을 최소화하고, 핵심 용어는 풀어서 설명한다.
• •친절함: “왜 이 방식인지”를 이유와 함께 설명한다.

2) 반드시 포함해야 하는 구성

아래 항목을 되도록 모두 포함합니다.

1. •

   실제 구조 예시

   • •DOM 구조는 HTML 코드로 직접 보여준다.
   • •사용자가 “아, 이런 배치구나” 바로 상상 가능해야 한다.
2. •

   핵심 원리 한 줄 요약

   • •예: “왼쪽 패널을 고정 폭으로 만들고 오른쪽이 남은 공간을 채운다.”
3. •

   세부 동작 흐름

   • •단계별로 작동 순서를 설명한다.
   • •예: 마우스 누름 → 이동 → 마우스 놓음
4. •

   축약 속성 풀어서 설명

   • •예: flex: 0 0 320px → flex-grow/shrink/basis의 의미를 모두 설명
5. •

   오해 방지 섹션

   • •“가리는 방식이 아니다”처럼 흔한 오해를 잡아준다.

3) 설명 스타일 가이드

• •짧은 문장 + 명확한 결론
• •코드 먼저 보여주고 설명
• •중요 용어는 풀어서 재설명

좋은 예시 (축약 속성 설명)

flex: 0 0 320px;

⬇️ 풀어 쓰면 이렇게 됩니다.

flex-grow: 0;
flex-shrink: 0;
flex-basis: 320px;

4) [!note] 사용 규칙

다음처럼 추가 개념 설명이 필요할 때 사용합니다.

[!note] flex-basis는 “이 요소의 기본 크기”라고 생각하면 이해가 쉽습니다.

5) 금지 사항

• •“대충 이해하면 된다” 같은 표현 금지
• •예시 없는 추상 설명만 나열 금지
• •축약 용어만 쓰고 설명하지 않는 것 금지

6) 체크리스트 (작성 전 점검)

• • DOM 구조를 HTML 예시로 보여줬는가?
• • 사용자가 머릿속으로 배치를 그릴 수 있는가?
• • 축약 속성을 풀어서 설명했는가?
• • 흐름을 단계별로 설명했는가?
• • 오해 방지 섹션이 있는가?