Mini Project : Mini Project. 사용자 정보 입력받기 (Javascript :1일차 과제)

📌 1회차 마무리 프로젝트: 사용자 정보 입력받고 출력하기

이번 프로젝트에서는 사용자 정보를 입력받고 출력하는 웹 페이지를 만들기 위해 HTML, CSS, JavaScript를 활용한 간단한 예제를 다뤘습니다. 이 프로젝트를 통해 입력, 처리, 출력의 순서로 자바스크립트를 사용하여 웹 페이지를 동적으로 구성하는 방법을 익혔습니다.

---

🚦 프로젝트 개요

• 목표: 웹 브라우저에서 사용자에게 이름, 취미, 좋아하는 노래를 입력받고, 그 결과를 웹 페이지에 표시하는 것입니다.
• 입력: 사용자가 이름, 취미, 좋아하는 노래를 입력합니다.
• 처리: 사용자가 입력한 정보를 받아 변수에 저장하고, 이를 HTML 요소에 동적으로 적용합니다.
• 출력: 입력된 정보를 웹 페이지에 표시합니다.

---

💻 1. HTML 구조

먼저, 사용자 정보를 입력받을 빈 콘텐츠와 HTML 구조를 설정합니다. 예를 들어, <h1> 태그는 이름을 표시하고, <p> 태그는 취미와 좋아하는 노래를 표시하는 역할을 합니다.

<h1 id="name"></h1>
<p id="hobby"></p>
<p id="song"></p>

---

🚦 2. 자바스크립트로 사용자 입력 받기

이름 입력받기:

prompt() 메서드를 사용하여 사용자로부터 이름을 입력받고, 그 값을 웹 페이지에 출력합니다.

let name = prompt("당신의 이름은?");
let nameElement = document.querySelector("#name");
nameElement.textContent = name;  // 입력받은 이름을 H1 태그에 표시

---

취미 입력받기:

비슷한 방식으로 취미를 입력받고, 이를 웹 페이지에 출력합니다. 템플릿 리터럴을 사용하여 취미 문장을 완성합니다.

let hobby = prompt("당신의 취미는?");
let hobbyElement = document.querySelector("#hobby");
hobbyElement.textContent = `취미는 ${hobby}입니다.`;  // 취미 정보 출력

---

좋아하는 노래 입력받기:

마지막으로 좋아하는 노래를 입력받고, 이를 웹 페이지에 출력합니다.

let song = prompt("당신이 좋아하는 노래는?");
let songElement = document.querySelector("#song");
songElement.textContent = `좋아하는 곡은 ${song}입니다.`;  // 좋아하는 노래 출력

---

💡 3. 최종 출력

위의 자바스크립트 코드들을 모두 작성한 후, 사용자가 이름, 취미, 좋아하는 노래를 입력하면 웹 페이지에 다음과 같이 표시됩니다:

이름: [사용자 이름]
취미는 [사용자 취미]입니다.
좋아하는 곡은 [사용자 좋아하는 노래]입니다.

---

✅ 4. 과제

1회차 과제로는 이름, 좋아하는 동물, 좋아하는 과일을 입력받고 이를 웹 페이지에 표시하는 프로젝트를 만들었습니다. **prompt()**를 사용하여 값을 입력받고, 입력받은 값들을 HTML 요소에 출력하는 방식입니다.

---

🧑‍💻 프로젝트 확장

이 프로젝트를 통해 HTML과 자바스크립트를 사용하여 사용자 입력을 처리하고, 그 결과를 웹 페이지에 동적으로 출력하는 방법을 배웠습니다. 이제 이 기본 개념을 바탕으로 인터랙티브한 웹 페이지를 더 많이 만들어볼 수 있습니다.