⏱️ [ JavaScript Interval & CSS 관련 정리 ]

---

🕒 [ Interval ]

항목	설명
💡 정의	일정한 시간 간격에 따라 특정 함수를 자동으로 실행시키는 기능
🧩 주요 함수	setInterval() / clearInterval()
⚙️ 시간 단위	밀리초(ms) — 1초 = 1000ms
🔁 반복 실행	일정 주기로 함수 재실행 가능
🛑 중단 방법	clearInterval()로 반복 중지 가능

---

📘 1️⃣ setInterval()

setInterval( 함수명, 밀리초 );

매개변수	설명
함수명	실행할 함수 이름 (괄호 생략!)
밀리초(ms)	1000 = 1초 / 5000 = 5초

💬 반환값: Interval 객체 (→ 중단 시 clearInterval()에 사용)

---

📘 2️⃣ clearInterval()

clearInterval( interval객체 );

항목	설명
interval객체	setInterval()의 반환값
기능	해당 interval 실행을 중지

---

💻 [ 예제 1️⃣ – 숫자 증가 함수 ]

let value = 0; // 전역 변수

function 증가함수(){
    value++;
    const box1 = document.querySelector('#box1');
    box1.innerHTML = value;
}

// 1초 간격으로 실행
setInterval( 증가함수, 1000 );

🧠 설명
| 단계 | 동작 |
|------|------|
| ① | 전역 변수 value 증가 |
| ② | DOM에서 #box1 요소 선택 |
| ③ | 증가된 값 출력 |
| ④ | 1초마다 반복 실행 |

---

⏰ [ 예제 2️⃣ – 시계 만들기 ]

function 시계함수(){
    let today = new Date();
    let hour = today.getHours();
    let minute = today.getMinutes();
    let second = today.getSeconds();
    
    const box2 = document.querySelector('#box2');
    let html = `${hour} : ${minute} : ${second}`;
    box2.innerHTML = html;
}

📎 포인트

• new Date() : 현재 날짜·시간 객체 생성
• ${} (백틱) : 문자열 보간법 — 변수와 텍스트를 함께 출력

---

⏳ [ 예제 3️⃣ – 타이머 만들기 ]

let time = 0;
let timerObj;

// 초 증가 함수
function 시간증가(){
    time++;
    document.querySelector('#box3').innerHTML = time;
}

// 타이머 시작
function 타이머시작(){
    timerObj = setInterval( 시간증가, 1000 );
}

// 타이머 중지
function 타이머중지(){
    clearInterval( timerObj );
}

🧠 작동 원리
| 함수 | 설명 |
|------|------|
| 시간증가() | 초를 1씩 증가시켜 화면에 출력 |
| 타이머시작() | setInterval로 1초마다 실행 |
| 타이머중지() | clearInterval로 중단 |

---

🎨 [ CSS 관련 자료 & 아이디어 ]

사이트	설명
🎯 Bootstrap	빠른 UI 구성용 CSS 프레임워크
🧠 CodePen	CSS·JS 디자인 샘플 및 실습 공유 플랫폼
📊 Chart.js	다양한 차트 시각화 라이브러리

---

🌐 [ CDN (Content Delivery Network) ]

항목	설명
💡 정의	외부 서버에서 CSS·JS 파일을 불러오는 방식
📦 장점	별도 설치 없이 바로 적용 가능
🔗 예시	cdnjs.com

---

📈 [ Chart.js 기본 구조 ]

const data = {
  labels: ['Mon', 'Tue', 'Wed'],
  datasets: [{
    label: '매출',
    data: [10, 20, 30],
    backgroundColor: ['red', 'blue', 'green']
  }]
};

항목	설명
type	차트 유형 (bar, line, polarArea 등)
data	차트 데이터 구조
labels	가로축 항목 이름
datasets	각 데이터 묶음
label	범례 이름
data	실제 수치 데이터 배열

---

💬 [ 느낀점 ✨ ]

• ⏳ 제한시간 안에서 코딩하려니 아는 것도 까먹게 된다.
• 💭 코드를 외우기보단 알고리즘의 흐름을 익히자.
• ⚡ querySelector에서 #, .를 잊지 말자!
• 💾 localStorage에는 문자열만 저장 가능 — JSON.stringify() 필수!
• 🧱 getItem() / setItem()을 함수화하면 코드 복잡도 ↓ 유지보수 ↑

---