Day 5: JavaScript 기초 학습
좋습니다 👍 이제 **Day 5 학습 플랜 (JavaScript 기초)**를 실습 예제까지 포함해서 정리해드릴게요.
🗓️ Day 5: JavaScript 기초 학습
1. 학습 목표
- 변수와 자료형:
let,const, 문자열, 숫자, 불리언 - 조건문과 반복문:
if,for,while - DOM 선택과 이벤트 처리:
document.querySelector,addEventListener - HTML 요소와 상호작용하는 기본 기능 구현
2. 프로젝트 구조
my-first-web/
├── index.html
└── script.js
└── style.css
3. 실습 예제: 버튼 클릭 시 텍스트 변경
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript 기초 실습</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">안녕하세요! 👋</h1>
<button id="changeBtn">텍스트 바꾸기</button>
<script src="script.js"></script>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
background: #16a085;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #1abc9c;
}
script.js
// 버튼과 제목 요소 선택
const title = document.querySelector("#title");
const button = document.querySelector("#changeBtn");
// 버튼 클릭 이벤트 처리
button.addEventListener("click", () => {
// 조건문 활용: 텍스트가 바뀌도록 설정
if (title.textContent === "안녕하세요! 👋") {
title.textContent = "JavaScript로 텍스트가 바뀌었어요!";
} else {
title.textContent = "안녕하세요! 👋";
}
});
4. 실행 방법
- VS Code에서
index.html실행 → Live Server로 브라우저 열기 - 버튼 클릭 시 텍스트가 바뀌는지 확인
- 다시 클릭하면 원래 텍스트로 돌아옴
5. 학습 포인트
- DOM 요소 선택과 이벤트 연결 방법 이해
- 조건문을 활용해 상태에 따라 다른 동작 구현
- HTML, CSS, JS가 함께 작동하는 경험 쌓기
👉 Day 6에서는 JavaScript 심화로 배열, 객체, 함수 활용을 배우고 To-do 리스트 앱을 만들어보게 됩니다. 원하시면 Day 6 실습 예제도 바로 이어서 정리해드릴 수 있습니다.
