본문으로 바로가기
TILNOTE
page thumbnail

프로그래밍 용어 완전 정복 - 암기 가이드

달의이성
달의이성
•조회수 22
요약

🎓 프로그래밍 용어 완전 정복 - 암기 가이드

🏠 프로그래밍 = 디지털 세상 만들기

프로그래밍 용어들을 집 짓기에 비유해서 쉽게 이해해보아요!

🎯 프로그래밍 용어 암기 카드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로그래밍 용어 완전 정복</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Comic Sans MS', cursive;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .hero {
            text-align: center;
            padding: 40px 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            margin-bottom: 30px;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        
        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            animation: glow 2s infinite alternate;
        }
        
        @keyframes glow {
            from { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
            to { text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5); }
        }
        
        .term-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin: 20px 0;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .term-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            border-color: #ffd700;
        }
        
        .term-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            transform: rotate(45deg);
            transition: opacity 0.3s ease;
            opacity: 0;
        }
        
        .term-card:hover::before {
            opacity: 1;
        }
        
        .term-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .term-emoji {
            font-size: 3em;
            margin-right: 20px;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        
        .term-title {
            font-size: 2.2em;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .term-subtitle {
            font-size: 1.2em;
            color: #87ceeb;
            margin-left: 10px;
        }
        
        .analogy {
            background: rgba(255, 215, 0, 0.2);
            border-radius: 15px;
            padding: 20px;
            margin: 15px 0;
            border-left: 5px solid #ffd700;
            position: relative;
        }
        
        .analogy::before {
            content: '💡';
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5em;
        }
        
        .code-example {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            border: 1px solid rgba(0, 255, 0, 0.3);
            position: relative;
            overflow-x: auto;
        }
        
        .code-example::before {
            content: '</>';
            position: absolute;
            top: 5px;
            right: 10px;
            color: #00ff00;
            font-size: 1.2em;
        }
        
        .memory-tip {
            background: rgba(255, 20, 147, 0.2);
            border-radius: 15px;
            padding: 20px;
            margin: 15px 0;
            border: 2px solid rgba(255, 20, 147, 0.5);
            position: relative;
        }
        
        .memory-tip::before {
            content: '🧠';
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5em;
        }
        
        .relationship {
            background: rgba(0, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid rgba(0, 255, 255, 0.3);
        }
        
        .quiz-section {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            text-align: center;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .quiz-button {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            border: none;
            border-radius: 25px;
            padding: 15px 30px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            margin: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .quiz-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }
        
        .quiz-result {
            background: rgba(0, 255, 0, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border: 2px solid rgba(0, 255, 0, 0.5);
            font-size: 1.2em;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .summary-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .summary-card:hover {
            transform: scale(1.05);
        }
        
        .highlight {
            background: rgba(255, 215, 0, 0.3);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .term-header {
                flex-direction: column;
                text-align: center;
            }
            
            .term-emoji {
                margin-right: 0;
                margin-bottom: 10px;
            }
            
            .hero h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="hero">
            <h1>🎓 프로그래밍 용어 완전 정복</h1>
            <p>집 짓기로 배우는 프로그래밍 세상! 🏗️</p>
        </div>

        <!-- 변수 (Variable) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">📦</span>
                <div>
                    <div class="term-title">변수 (Variable)</div>
                    <div class="term-subtitle">= 이름표가 붙은 상자</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                변수는 <strong>창고의 상자</strong>와 같아요! 상자에 이름표를 붙여서 무엇이 들어있는지 알 수 있죠.
                <br><br>
                예: "장난감상자", "책상자", "옷상자" - 각각 다른 물건을 담고 있어요!
            </div>
            
            <div class="code-example">
let 장난감상자 = "자동차";<br>
let 책상자 = "해리포터";<br>
const 이름 = "김철수";  // 바뀌지 않는 상자
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">변수 = 변하는 수</span><br>
                상자 안의 물건은 언제든 바뀔 수 있어요! (const 제외)
            </div>
        </div>

        <!-- 함수 (Function) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">🏭</span>
                <div>
                    <div class="term-title">함수 (Function)</div>
                    <div class="term-subtitle">= 마법의 공장</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                함수는 <strong>공장</strong>과 같아요! 재료를 넣으면 완성된 제품이 나와요.
                <br><br>
                예: 빵공장에 밀가루를 넣으면 빵이 나오죠! 🍞
            </div>
            
            <div class="code-example">
function 빵만들기(밀가루) {<br>
  return "맛있는 " + 밀가루 + " 빵";<br>
}<br><br>
// 사용법

let 결과 = 빵만들기("식빵");  // "맛있는 식빵 빵"
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">함수 = 기능</span><br>
                특정 기능을 수행하는 코드 덩어리예요!
            </div>
        </div>

        <!-- 매개변수/인수 (Parameter/Argument) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">📥</span>
                <div>
                    <div class="term-title">매개변수 & 인수</div>
                    <div class="term-subtitle">= 공장의 재료</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                <strong>매개변수</strong>는 공장이 받을 수 있는 <strong>재료 종류</strong><br>
                <strong>인수</strong>는 실제로 넣는 <strong>구체적인 재료</strong>
                <br><br>
                예: 쿠키공장(설탕, 버터) ← 매개변수<br>
                실제로 넣는 것: (200g, 100g) ← 인수
            </div>
            
            <div class="code-example">
// 매개변수: name, age

function 소개하기(name, age) {<br>
  return name + "은 " + age + "살입니다";<br>
}<br><br>
// 인수: "철수", 12

소개하기("철수", 12);
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong><br>
                <span class="highlight">매개변수</span> = 매개체가 되는 변수 (틀)<br>
                <span class="highlight">인수</span> = 인간이 주는 수치 (실제 값)
            </div>
        </div>

        <!-- 객체 (Object) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">🏠</span>
                <div>
                    <div class="term-title">객체 (Object)</div>
                    <div class="term-subtitle">= 완성된 집</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                객체는 <strong>완성된 집</strong>이에요! 집에는 여러 방(속성)과 할 수 있는 일(메서드)이 있죠.
                <br><br>
                예: 우리 집 = {방3개, 화장실2개, 주소: "서울시"}, 할 수 있는 일: {문열기, 불켜기}
            </div>
            
            <div class="code-example">
let 우리집 = {<br>
  방개수: 3,<br>
  화장실: 2,<br>
  주소: "서울시",<br>
  문열기: function() {<br>
    return "문이 열렸습니다!";<br>
  }<br>
};
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">객체 = 객관적 사물</span><br>
                실제 사물을 코드로 표현한 것!
            </div>
        </div>

        <!-- 클래스 (Class) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">📐</span>
                <div>
                    <div class="term-title">클래스 (Class)</div>
                    <div class="term-subtitle">= 집 설계도</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                클래스는 <strong>집 설계도</strong>예요! 설계도로 똑같은 집을 여러 개 지을 수 있죠.
                <br><br>
                예: 아파트 설계도 하나로 101호, 102호, 103호... 여러 집을 만들어요!
            </div>
            
            <div class="code-example">
class 집 {<br>
  constructor(주소, 방개수) {<br>
    this.주소 = 주소;<br>
    this.방개수 = 방개수;<br>
  }<br>
  <br>
  문열기() {<br>
    return this.주소 + " 집 문이 열렸어요!";<br>
  }<br>
}<br><br>
// 집 만들기

let 우리집 = new 집("서울시", 3);
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">클래스 = 분류</span><br>
                같은 종류의 객체들을 만드는 틀!
            </div>
        </div>

        <!-- 메서드 (Method) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">🔧</span>
                <div>
                    <div class="term-title">메서드 (Method)</div>
                    <div class="term-subtitle">= 집에서 할 수 있는 일</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                메서드는 <strong>집에서 할 수 있는 행동</strong>이에요!
                <br><br>
                예: 문열기(), 불켜기(), 요리하기(), 청소하기() - 집의 기능들!
            </div>
            
            <div class="code-example">
let 스마트홈 = {<br>
  온도: 20,<br>
  <br>
  // 메서드들

  문열기: function() {<br>
    return "문이 열렸습니다!";<br>
  },<br>
  <br>
  온도올리기: function() {<br>
    this.온도 += 1;<br>
    return "온도가 " + this.온도 + "도가 되었어요!";<br>
  }<br>
};
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">메서드 = 방법</span><br>
                객체가 뭔가를 하는 방법! (객체 안의 함수)
            </div>
        </div>

        <!-- 배열 (Array) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">📚</span>
                <div>
                    <div class="term-title">배열 (Array)</div>
                    <div class="term-subtitle">= 순서대로 정리된 서랍</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                배열은 <strong>순서대로 정리된 서랍</strong>이에요! 1번 칸, 2번 칸, 3번 칸... 순서가 있죠.
                <br><br>
                예: 옷장 서랍 [모자, 셔츠, 바지, 양말] - 순서대로 정리!
            </div>
            
            <div class="code-example">
let 가족 = ["아빠", "엄마", "나", "동생"];<br>
<br>
// 사용법

console.log(가족[0]);  // "아빠" (첫 번째)

console.log(가족[2]);  // "나" (세 번째)

<br>
가족.push("강아지");  // 새 가족 추가!
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">배열 = 배치된 열</span><br>
                순서대로 나열된 데이터들! (0번부터 시작)
            </div>
        </div>

        <!-- 조건문 (If Statement) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">🚪</span>
                <div>
                    <div class="term-title">조건문 (If)</div>
                    <div class="term-subtitle">= 조건부 문</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                조건문은 <strong>스마트 도어</strong>와 같아요! 조건을 만족하면 문이 열리고, 아니면 안 열려요.
                <br><br>
                예: "가족이면 문 열어줘, 아니면 열지 마"
            </div>
            
            <div class="code-example">
let 나이 = 12;<br>
<br>
if (나이 >= 20) {<br>
  console.log("성인입니다!");<br>
} else if (나이 >= 13) {<br>
  console.log("청소년입니다!");<br>
} else {<br>
  console.log("어린이입니다!");<br>
}
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">If = 만약에</span><br>
                "만약에 ~라면 ~해줘" 하는 명령!
            </div>
        </div>

        <!-- 반복문 (Loop) -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">🔄</span>
                <div>
                    <div class="term-title">반복문 (Loop)</div>
                    <div class="term-subtitle">= 자동 반복 로봇</div>
                </div>
            </div>
            
            <div class="analogy">
                <strong>🏠 집 짓기 비유:</strong><br>
                반복문은 <strong>자동 청소 로봇</strong>과 같아요! 같은 일을 계속 반복해서 해줘요.
                <br><br>
                예: "방 10개를 차례대로 모두 청소해줘!"
            </div>
            
            <div class="code-example">
// for 반복문

for (let i = 1; i <= 5; i++) {<br>
  console.log(i + "번째 방 청소 완료!");<br>
}<br>
<br>
// 결과: 1번째, 2번째, 3번째, 4번째, 5번째 방 청소!
            </div>
            
            <div class="memory-tip">
                <strong>암기법:</strong> <span class="highlight">Loop = 고리</span><br>
                고리처럼 돌고 도는 반복 작업!
            </div>
        </div>

        <!-- 퀴즈 섹션 -->
        <div class="quiz-section">
            <h2>🧠 기억력 테스트!</h2>
            <p>용어들을 잘 기억하고 있는지 확인해보세요!</p>
            
            <button class="quiz-button" onclick="startQuiz()">퀴즈 시작! 🎯</button>
            <button class="quiz-button" onclick="showAllTerms()">전체 용어 보기 📚</button>
            
            <div class="quiz-result" id="quizResult">
                퀴즈를 시작해보세요! 🚀
            </div>
        </div>

        <!-- 관계도 -->
        <div class="term-card">
            <div class="term-header">
                <span class="term-emoji">🕸️</span>
                <div>
                    <div class="term-title">용어들의 관계</div>
                    <div class="term-subtitle">= 가족 관계도</div>
                </div>
            </div>
            
            <div class="relationship">
                <strong>🏗️ 집 짓기 전체 과정:</strong><br><br>
                
                📐 <span class="highlight">클래스 (설계도)</span><br>
                ↓<br>
                🏠 <span class="highlight">객체 (완성된 집)</span><br>
                ├── 📦 <span class="highlight">변수 (집 안의 물건들)</span><br>
                ├── 🔧 <span class="highlight">메서드 (집에서 할 수 있는 일)</span><br>
                └── 📚 <span class="highlight">배열 (순서대로 정리된 물건들)</span><br><br>
                
                🏭 <span class="highlight">함수 (공장)</span><br>
                ├── 📥 <span class="highlight">매개변수 (받을 재료 종류)</span><br>
                ├── 📤 <span class="highlight">인수 (실제 재료)</span><br>
                └── 🚪 <span class="highlight">조건문/반복문 (작업 규칙)</span>
            </div>
        </div>

        <!-- 암기 요약판 -->
        <div class="quiz-section">
            <h2>📝 암기 요약판</h2>
            <div class="summary-grid">
                <div class="summary-card">
                    <h3>📦 변수</h3>
                    <p><strong>= 이름표 붙은 상자</strong><br>
                    데이터를 저장하는 공간</p>
                </div>
                
                <div class="summary-card">
                    <h3>🏭 함수</h3>
                    <p><strong>= 마법의 공장</strong><br>
                    재료를 넣으면 결과가 나옴</p>
                </div>
                
                <div class="summary-card">
                    <h3>🏠 객체</h3>
                    <p><strong>= 완성된 집</strong><br>
                    속성과 기능을 가진 덩어리</p>
                </div>
                
                <div class="summary-card">
                    <h3>📐 클래스</h3>
                    <p><strong>= 집 설계도</strong><br>
                    객체를 만드는 틀</p>
                </div>
                
                <div class="summary-card">
                    <h3>🔧 메서드</h3>
                    <p><strong>= 할 수 있는 일</strong><br>
                    객체 안의 함수</p>
                </div>
                
                <div class="summary-card">
                    <h3>📚 배열</h3>
                    <p><strong>= 순서대로 정리된 서랍</strong><br>
                    순서가 있는 데이터 목록</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const terms = [
            {
                question: "데이터를 저장하는 '이름표 붙은 상자'는?",
                answer: "변수",
                hint: "📦 물건을 담는 상자처럼..."
            },
            {
                question: "재료를 넣으면 결과가 나오는 '마법의 공장'은?",
                answer: "함수",
                hint: "🏭 빵공장에 밀가루를 넣으면..."
            },
            {
                question: "속성과 기능을 가진 '완성된 집'은?",
                answer: "객체",
                hint: "🏠 방도 있고 할 수 있는 일도 있는..."
            },
            {
                question: "객체를 만드는 '집 설계도'는?",
                answer: "클래스",
                hint: "📐 설계도로 여러 집을 지을 수 있는..."
            },
            {
                question: "객체가 할 수 있는 '행동'은?",
                answer: "메서드",
                hint: "🔧 문열기, 불켜기 같은..."
            },
            {
                question: "순서대로 정리된 '서랍'은?",
                answer: "배열",
                hint: "📚 0번, 1번, 2번 순서로..."
            }
        ];
        
        let currentQuizIndex = 0;
        let score = 0;
        
        function startQuiz() {
            currentQuizIndex = 0;
            score = 0;
            showNextQuestion();
        }
        
        function showNextQuestion() {
            if (currentQuizIndex >= terms.length) {
                showQuizResult();
                return;
            }
            
            const term = terms[currentQuizIndex];
            const result = document.getElementById('quizResult');
            
            result.innerHTML = `
                <div style="text-align: left;">
                    <strong>문제 ${currentQuizIndex + 1}/${terms.length}</strong>


                    <strong>Q: ${term.question}</strong>


                    <em>${term.hint}</em>


                    <button class="quiz-button" onclick="checkAnswer('${term.answer}')">정답 확인</button>
                    <button class="quiz-button" onclick="showHint()">힌트 더 보기</button>
                </div>
            `;
        }
        
        function checkAnswer(correctAnswer) {
            const result = document.getElementById('quizResult');
            score++;
            
            result.innerHTML = `
                <div style="text-align: center;">
                    <h3>🎉 정답!</h3>
                    <p><strong>${correctAnswer}</strong>가 맞습니다!</p>
                    <button class="quiz-button" onclick="nextQuestion()">다음 문제</button>
                </div>
            `;
        }
        
        function nextQuestion() {
            currentQuizIndex++;
            showNextQuestion();
        }
        
        function showQuizResult() {
            const result = document.getElementById('quizResult');
            const percentage = Math.round((score / terms.length) * 100);
            
            let message = "";
            if (percentage === 100) {
                message = "🏆 완벽해요! 프로그래밍 마스터!";
            } else if (percentage >= 80) {
                message = "🌟 훌륭해요! 거의 다 맞췄네요!";
            } else if (percentage >= 60) {
                message = "👍 좋아요! 조금만 더 연습하면 완벽!";
            } else {
                message = "💪 괜찮아요! 다시 한 번 도전해보세요!";
            }
            
            result.innerHTML = `
                <div>
                    <h3>${message}</h3>
                    <p>점수: ${score}/${terms.length} (${percentage}%)</p>
                    <button class="quiz-button" onclick="startQuiz()">다시 도전!</button>
                </div>
            `;
        }
        
        function showAllTerms() {
            const result = document.getElementById('quizResult');
            
            result.innerHTML = `
                <div style="text-align: left;">
                    <h3>📚 전체 용어 요약</h3>
                    

                    📦 <strong>변수</strong> = 이름표 붙은 상자

                    🏭 <strong>함수</strong> = 마법의 공장

                    🏠 <strong>객체</strong> = 완성된 집

                    📐 <strong>클래스</strong> = 집 설계도

                    🔧 <strong>메서드</strong> = 할 수 있는 일

                    📚 <strong>배열</strong> = 순서대로 정리된 서랍

                    📥 <strong>매개변수</strong> = 받을 재료 종류

                    📤 <strong>인수</strong> = 실제 재료

                    🚪 <strong>조건문</strong> = 스마트 도어

                    🔄 <strong>반복문</strong> = 자동 반복 로봇
                </div>
            `;
        }
        
        // 페이지 로드 시 애니메이션
        window.addEventListener('load', () => {
            const cards = document.querySelectorAll('.term-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(50px)';
                    card.style.transition = 'all 0.8s ease';
                    
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 100);
                }, index * 150);
            });
        });
    </script>
</body>
</html>

🏠 집 짓기로 기억하는 프로그래밍!

용어집 짓기 비유한 줄 정의암기법
📦 변수이름표 붙은 상자데이터를 저장하는 공간변하는 수치
🏭 함수마법의 공장재료→결과 만드는 기계기능을 수행
🏠 객체완성된 집속성+기능의 덩어리객관적 사물
📐 클래스집 설계도객체 만드는 틀같은 분류
🔧 메서드집에서 할 수 있는 일객체 안의 함수행동하는 방법
📚 배열순서대로 정리된 서랍순서 있는 데이터 목록배치된 열
📥 매개변수공장이 받을 재료 종류함수가 받는 변수매개체 변수
📤 인수실제로 넣는 재료함수에 전달하는 실제값인간이 주는 수치
🚪 조건문스마트 도어조건에 따라 실행만약에 ~라면
🔄 반복문자동 반복 로봇같은 일을 반복고리처럼 반복

🧠 5분 완성! 암기 비법

1️⃣ 연상 암기법

📦 변수 = 변하는 수 → 상자 안 물건이 바뀜
🏭 함수 = 기능 수행 → 공장이 제품 생산
🏠 객체 = 객관적 사물 → 실제 집처럼 완성품
📐 클래스 = 분류 → 같은 종류 집 설계도

2️⃣ 스토리 암기법

"철수가 집을 짓는 이야기" 🏗️

  1. 철수는 📐클래스(설계도)를 보고

  2. 🏠객체(집)을 지었어요

  3. 집 안에 📦변수(상자들)를 두고

  4. 📚배열(서랍)도 순서대로 정리했어요

  5. 집에서 🔧메서드(할 일들)을 하려면

  6. 🏭함수(공장)에 📥매개변수(재료)를 넣어

  7. 📤인수(실제 재료)로 결과를 만들어요

  8. 🚪조건문으로 "비 오면 우산"

  9. 🔄반복문으로 "매일 청소" 반복!

3️⃣ 몸짓 암기법

  • 📦 변수: 상자 모양 손 만들기

  • 🏭 함수: 재료 넣고 돌리는 동작

  • 🏠 객체: 집 모양 손 만들기

  • 📐 클래스: 설계도 그리는 동작

  • 🔧 메서드: 도구 사용하는 동작

🎯 빠른 복습 체크리스트

암기 완료 체크:
□ 📦 변수 = 이름표 붙은 상자
□ 🏭 함수 = 재료→결과 공장  
□ 🏠 객체 = 속성+기능 완성품
□ 📐 클래스 = 객체 만드는 설계도
□ 🔧 메서드 = 객체의 행동
□ 📚 배열 = 순서 있는 목록
□ 📥📤 매개변수/인수 = 재료 종류/실제 재료
□ 🚪 조건문 = 만약에~라면
□ 🔄 반복문 = 자동 반복

🚀 실전 활용 예시

// 🏗️ 집 짓기 프로그래밍!

// 📐 클래스 (설계도)
class 집 {
  // 📦 변수들 (집 속성)
  constructor(주소, 방개수) {
    this.주소 = 주소;
    this.방개수 = 방개수;
  }
  
  // 🔧 메서드 (할 수 있는 일)
  문열기() {
    return this.주소 + " 집 문이 열렸어요!";
  }
}

// 🏠 객체 만들기 (실제 집)
let 우리집 = new 집("서울시", 3);

// 📚 배열 (가족 목록)
let 가족 = ["아빠", "엄마", "나", "동생"];

// 🏭 함수 (인사 공장)
function 인사하기(이름) {  // 📥 매개변수
  return "안녕 " + 이름 + "!";
}

// 🔄 반복문 (모든 가족에게 인사)
for (let i = 0; i < 가족.length; i++) {
  console.log(인사하기(가족[i]));  // 📤 인수
}

🌟 핵심 포인트:

  1. 집 짓기 비유로 관련성 기억

  2. 스토리로 연결해서 암기

  3. 몸짓으로 체감하며 학습

  4. 반복 연습으로 완전히 내 것으로!

위의 인터랙티브 가이드에서 퀴즈도 풀어보고, 암기카드도 활용해서 완전히 마스터해보세요! 🎓✨

#프로그래밍 입문#용어 암기법#비유 학습#코딩 기초#퀴즈 학습