11.3.1 새 요소 만들기 - 웹페이지 조립 공장에서 새 부품 만들기

📘 11.3.1 새 요소 만들기 - 웹페이지 조립 공장에서 새 부품 만들기

웹페이지의 요소들을 찾고, 꾸미고, 속성을 바꾸는 법을 배웠으니, 이제는 한 걸음 더 나아가 완전히 새로운 요소를 만드는 시간입니다. 마치 도예가가 손으로 흙을 빚어 새로운 그릇을 만들어내듯, 우리도 코드로 새로운 HTML 요소를 탄생시킬 수 있습니다.

이것은 단순히 기존 것을 바꾸는 것이 아니라, 무에서 유를 창조하는 일입니다. 사용자의 행동이나 상황에 따라 실시간으로 새로운 요소가 화면에 피어나는 것을 상상해보세요.

🧠 새로운 단어들과 친해지기

새로운 창조의 세계로 들어가기 전에, 함께 걸어갈 단어들을 만나보겠습니다.

단어	쉬운 설명
createElement	새로운 HTML 요소를 만들어주는 특별한 명령어예요.
createTextNode	순수한 글자 내용만을 만들어주는 명령어예요.
실시간 생성	프로그램이 실행되면서 즉시 새로운 요소를 만드는 것이에요.
요소 상자	만들어진 HTML 요소를 담고 있는 특별한 상자예요.

createElement는 "창조하다"와 "요소"가 만나 이루어진 단어입니다. 말 그대로 새로운 HTML 요소를 창조해주는 도구이지요. createTextNode는 순수한 텍스트를 만드는 도구입니다.

✨ 새 요소 만들기의 핵심 개념

지금까지는 이미 HTML 파일에 적혀있는 요소들을 찾아 사용했습니다. 하지만 때로는 프로그램이 실행되면서 완전히 새로운 요소가 필요한 순간들이 있습니다. 사용자가 버튼을 누를 때마다 새로운 메시지가 꽃처럼 피어나거나, 게임에서 새로운 캐릭터가 등장하는 것처럼 말입니다.

createElement 기능을 사용하면 코드로 새로운 HTML 요소를 창조할 수 있습니다. 단락, 버튼, 이미지 등 우리가 원하는 어떤 요소든 만들어낼 수 있습니다. 마치 3D 프린터가 디지털 설계도를 바탕으로 실제 물건을 만들어내는 것과 같습니다.

여기서 중요한 점은 새로 만든 요소는 처음에는 메모리라는 보이지 않는 공간에만 존재한다는 것입니다. 실제 웹페이지에 나타나려면 별도의 과정이 필요합니다. 마치 조각가가 작품을 완성했지만 아직 전시실에 놓지 않은 상태와 같습니다.

재미있는 비유: 학교 만들기 수업의 재료 준비실

새 요소 만들기를 더 쉽게 이해하기 위해 학교 만들기 수업의 재료 준비실을 떠올려보겠습니다.

여러분이 학교에서 만들기 수업을 하고 있는데, 갑자기 특별한 모양의 재료가 필요한 상황이 생겼습니다. 선생님이 재료 준비실에 가서 "파란색 동그라미 하나 만들어주세요!"라고 부탁하시면, 준비실에서 즉시 새로운 재료를 정성스럽게 만들어줍니다.

하지만 준비실에서 갓 만들어진 재료는 아직 준비실 선반에 가만히 놓여있는 상태입니다. 여러분이 직접 그 재료를 가져와서 작품에 조심스럽게 붙여야 비로소 작품의 일부가 되는 것이지요.

마찬가지로 자바스크립트의 createElement도 새로운 HTML 요소를 만들어주지만, 처음에는 메모리라는 '준비실'에만 있습니다. 나중에 웹페이지라는 '작품'에 붙여야 사용자가 볼 수 있게 됩니다.

🎯 새 요소 만들기를 배우는 이유

웹페이지가 살아 숨쉬며 사용자와 교감하는 공간이 되려면 새로운 요소를 만드는 능력이 꼭 필요합니다. 사용자의 행동에 따라 실시간으로 새로운 내용이 나타나야 하기 때문입니다.

예를 들어, 할 일 목록 앱에서 사용자가 새로운 할 일을 추가할 때마다 새로운 항목이 자연스럽게 나타나거나, 댓글 시스템에서 댓글을 쓸 때마다 새로운 댓글 박스가 생겨나는 것들이 모두 새 요소 만들기로 구현됩니다.

또한 게임이나 상호작용 앱을 만들 때도 필수적입니다. 게임에서 새로운 캐릭터나 아이템이 나타나거나, 퀴즈 앱에서 새로운 문제가 화면에 등장하는 것들이 모두 이 기능으로 만들어집니다.

무엇보다 사용자 맞춤형 경험을 제공할 수 있게 됩니다. 사용자의 선택이나 행동에 따라 웹페이지의 구조 자체가 변하는 역동적인 경험을 선사할 수 있습니다.

⚙️ 기본 문법 살펴보기

새로운 요소를 만드는 기본 문법은 간단하면서도 강력합니다.

// 새로운 HTML 요소 만들기
let 새요소 = document.createElement("태그이름");

// 순수한 글자 내용 만들기
let 글자내용 = document.createTextNode("원하는 텍스트");

자주 만드는 요소들:

// 단락 요소 만들기
let 새단락 = document.createElement("p");

// 버튼 요소 만들기
let 새버튼 = document.createElement("button");

// 이미지 요소 만들기
let 새이미지 = document.createElement("img");

// 제목 요소 만들기
let 새제목 = document.createElement("h1");

요소를 만든 후에는 내용을 넣거나 속성을 설정할 수 있습니다. 마치 빈 그릇을 만든 후에 음식을 담고 예쁜 장식을 더하는 것과 같습니다.

🧪 직접 해보면서 배우기

이제 구체적인 예시를 통해 새 요소 만들기가 어떻게 작동하는지 자세히 살펴보겠습니다.

🔹 첫 번째 예시: 첫 번째 새 요소 만들기

가장 기본적인 단락 요소를 만들어보는 첫 번째 시도입니다.

// 새로운 단락 요소를 만들어요
let 새단락 = document.createElement("p");

// 만든 단락에 글자를 넣어줘요
새단락.textContent = "안녕하세요! 저는 새로 태어난 단락이에요.";

// 단락의 색깔도 바꿔봐요
새단락.style.color = "blue";

// 무엇이 만들어졌는지 확인해봐요
console.log("새로운 단락이 만들어졌어요:", 새단락);
console.log("단락의 내용:", 새단락.textContent);
console.log("아직 웹페이지에는 보이지 않아요!");

이 과정을 차근차근 살펴보면, 먼저 createElement로 비어있는 단락 요소를 만들어 변수에 소중히 담아둡니다. 그다음 textContent로 내용을 채우고, style.color로 색깔도 입혀줍니다. 마지막으로 콘솔에서 확인하지만, 아직 웹페이지에는 나타나지 않는다는 점을 확인합니다.

🔹 두 번째 예시: 버튼과 이미지 요소 만들기

이번에는 서로 다른 성격의 요소들을 여러 개 만들어보겠습니다.

// 새로운 버튼을 만들고 내용을 설정해요
let 새버튼 = document.createElement("button");
새버튼.textContent = "저를 클릭해보세요!";
새버튼.style.backgroundColor = "green";
새버튼.style.color = "white";

// 새로운 이미지 요소를 만들고 속성을 설정해요
let 새이미지 = document.createElement("img");
새이미지.setAttribute("src", "cute-cat.jpg");
새이미지.setAttribute("alt", "귀여운 고양이");
새이미지.style.width = "200px";

// 만들어진 요소들을 확인해봐요
console.log("초록색 버튼이 만들어졌어요:", 새버튼);
console.log("고양이 이미지가 만들어졌어요:", 새이미지);
console.log("모든 요소가 메모리에 준비되었어요!");

이 예시에서는 두 가지 다른 요소를 동시에 만들어봅니다. 버튼에는 텍스트와 스타일을 설정하고, 이미지에는 경로와 설명, 크기를 설정하여 각각의 요소를 완성된 형태로 만들어냅니다.

🔹 세 번째 예시: 제목과 텍스트 노드 만들기

마지막으로 제목 요소와 순수 텍스트를 만들어보겠습니다.

// 새로운 제목 요소를 만들어요
let 새제목 = document.createElement("h2");
새제목.textContent = "새로 만든 멋진 제목입니다!";
새제목.style.textAlign = "center";

// 순수한 텍스트 노드도 만들어봐요
let 텍스트노드 = document.createTextNode("이것은 순수한 텍스트입니다.");

// 또 다른 단락을 만들어서 색다르게 꾸며봐요
let 화려한단락 = document.createElement("p");
화려한단락.textContent = "화려한 단락이에요!";
화려한단락.style.fontSize = "20px";
화려한단락.style.fontWeight = "bold";

console.log("멋진 제목:", 새제목);
console.log("텍스트 노드:", 텍스트노드);
console.log("화려한 단락:", 화려한단락);
console.log("재료 준비실에서 여러 부품을 만들었어요!");

이 예시에서는 제목 요소를 만들어 가운데 정렬하고, createTextNode로 순수 텍스트를 만들고, 화려하게 꾸민 단락까지 만들어 다양한 요소 생성 방법을 경험해봅니다.

🧚‍♀️ 이야기로 다시 배우기: 학교 컴퓨터실의 프로젝트 제작 시간

지금까지 배운 내용을 하나의 이야기로 다시 정리해보겠습니다.

여러분이 학교 컴퓨터실에서 멀티미디어 프로젝트를 만들고 있다고 상상해보세요.

선생님이 부드러운 목소리로 말씀하셨습니다. "오늘은 여러분이 직접 필요한 요소들을 만들어서 프로젝트에 추가해볼 거예요." 여러분 앞에는 요소 제작 프로그램이 조용히 열려있습니다.

첫 번째 학생이 조심스럽게 말했습니다. "저는 프로젝트에 새로운 제목이 필요해요!" 그래서 요소 제작 프로그램에 "새 제목 만들기"를 클릭하고, 내용을 정성스럽게 입력하고, 색깔까지 신중하게 정했습니다. 그러자 컴퓨터 화면의 작업 공간에 멋진 제목이 조용히 만들어졌습니다.

두 번째 학생은 "저는 클릭할 수 있는 버튼이 필요해요!"라고 했습니다. 마찬가지로 프로그램에서 버튼을 만들고, 글자를 넣고, 색깔을 칠해서 작업 공간에 준비해두었습니다.

하지만 아직 이 요소들은 작업 공간에만 있는 상태입니다. 실제 프로젝트에 보이려면 작업 공간에서 프로젝트 화면으로 조심스럽게 옮겨야 합니다.

웹페이지 개발도 똑같은 과정입니다. createElement로 요소를 만들면 메모리라는 '작업 공간'에 준비되고, 나중에 실제 웹페이지로 옮겨야 사용자가 볼 수 있게 되는 것입니다.

✏️ 연습문제로 개념 다지기

봄이 오면 새싹이 자연스럽게 돋아나듯, 우리도 연습을 통해 새 요소 만들기를 자연스럽게 익혀보겠습니다.

Ex1) 새로운 제목을 만들고 "환영합니다!"라는 내용을 넣어보자

// 새로운 h1 제목 요소를 만들어요
let 환영제목 = document.createElement("h1");

// 제목에 환영 메시지를 넣어요
환영제목.textContent = "환영합니다!";

// 제목이 어떻게 만들어졌는지 확인해요
console.log("새로운 제목이 만들어졌어요:", 환영제목);
console.log("제목 내용:", 환영제목.textContent);

Ex2) 파란 배경의 "시작하기" 버튼을 만들어보자

// 새로운 버튼 요소를 만들어요
let 시작버튼 = document.createElement("button");

// 버튼에 "시작하기" 텍스트를 넣어요
시작버튼.textContent = "시작하기";

// 버튼을 파란 배경에 흰 글씨로 꾸며요
시작버튼.style.backgroundColor = "blue";
시작버튼.style.color = "white";

// 완성된 버튼을 확인해요
console.log("멋진 파란 버튼이 만들어졌어요:", 시작버튼);

Ex3) 이미지 요소를 만들고 필요한 속성들을 설정해보자

// 새로운 이미지 요소를 만들어요
let 내사진 = document.createElement("img");

// 이미지 파일 경로를 설정해요
내사진.setAttribute("src", "my-photo.jpg");

// 시각장애인을 위한 이미지 설명을 설정해요
내사진.setAttribute("alt", "내 사진");

// 이미지 크기를 150px로 설정해요
내사진.style.width = "150px";

// 완성된 이미지 요소를 확인해요
console.log("새로운 이미지 요소가 준비되었어요:", 내사진);

🤔 조금 더 어려운 문제로 실력 확인하기

기본 연습을 마쳤으니, 이제 조금 더 깊이 있는 문제들을 통해 새 요소 만들기에 대한 이해를 점검해보겠습니다.

Q1. createElement로 만든 요소가 왜 바로 웹페이지에 보이지 않는지 설명해보세요.

정답: createElement로 만든 요소는 메모리에만 존재하고, 아직 웹페이지의 DOM 구조에 추가되지 않았기 때문입니다.

해설: 마치 공장에서 부품을 만들었지만 아직 제품에 조립하지 않은 상태와 같습니다. 요소를 만드는 것과 웹페이지에 추가하는 것은 별개의 작업입니다. 다음 시간에 배울 appendChild 같은 기능을 사용해야 실제 웹페이지에 나타나게 됩니다.

Q2. createElement와 createTextNode의 차이점을 설명해보세요.

정답: createElement는 HTML 태그 요소를 만들고, createTextNode는 순수한 텍스트만 만듭니다.

해설: createElement("p")는 <p></p> 같은 HTML 태그를 만들어서 속성을 추가하고 스타일을 변경할 수 있습니다. 하지만 createTextNode("안녕하세요")는 오직 "안녕하세요"라는 글자만 만들어서 다른 요소 안에 넣을 수 있습니다.

🔄 이전 단원 복습 - 함께 기억해요!

새로운 내용을 배우는 것도 중요하지만, 이전에 배운 내용들도 잊지 않도록 함께 되새겨보겠습니다.

🔁 복습 문제 1: 요소 찾기와 새 요소 만들기 결합 (11.1단원 복습)

11.1단원에서 배운 요소 찾기와 이번에 배운 새 요소 만들기를 함께 사용해보겠습니다.

// 11.1단원의 요소 찾기와 11.3.1단원의 새 요소 만들기 결합하기
function 기존요소와새요소비교() {
    // 기존 요소 찾기 (11.1단원에서 배운 방법)
    let 기존제목 = document.getElementById("originalTitle");

    if (기존제목) {
        console.log("기존 제목을 찾았어요:", 기존제목.textContent);

        // 새로운 요소 만들기 (11.3.1단원에서 배운 방법)
        let 새제목 = document.createElement("h2");
        새제목.textContent = "새로 만든 제목: " + 기존제목.textContent + " (복사본)";
        새제목.style.color = "green";
        새제목.style.fontStyle = "italic";

        console.log("새로운 제목을 만들었어요:", 새제목.textContent);
        console.log("기존 제목과 새 제목을 비교해보세요!");
    }

    // querySelector로 첫 번째 단락 찾기
    let 첫번째단락 = document.querySelector("p");
    if (첫번째단락) {
        // 비슷한 새 단락 만들기
        let 새단락 = document.createElement("p");
        새단락.textContent = "원본: '" + 첫번째단락.textContent + "'을 참고해서 만든 새 단락이에요!";
        새단락.style.backgroundColor = "lightgray";

        console.log("기존 단락을 참고해서 새 단락을 만들었어요!");
    }
}

// 요소 찾기와 새 요소 만들기 결합 실행하기
기존요소와새요소비교();

해답 설명: 기존에 있는 요소를 찾아서 그 내용을 참고하여 새로운 요소를 만들 수 있습니다. 이렇게 하면 기존 정보를 활용하면서도 완전히 새로운 요소를 생성할 수 있습니다.

🔁 복습 문제 2: 요소 조작과 새 요소 만들기 결합 (11.2단원 복습)

11.2단원에서 배운 요소 조작 기능들과 새 요소 만들기를 함께 사용해보겠습니다.

// 11.2단원의 요소 조작과 11.3.1단원의 새 요소 만들기 결합하기
function 완전한요소만들기() {
    console.log("스타일이 적용된 새 요소들을 만들어볼게요!");

    // 1. 텍스트가 있는 멋진 제목 만들기 (11.2.1 + 11.3.1)
    let 멋진제목 = document.createElement("h1");
    멋진제목.textContent = "멋진 새 제목입니다!";  // 11.2.1에서 배운 내용 설정
    멋진제목.style.color = "purple";              // 11.2.2에서 배운 스타일 적용
    멋진제목.style.textAlign = "center";
    멋진제목.style.fontSize = "28px";

    // 2. 속성이 설정된 이미지 만들기 (11.2.3 + 11.3.1)
    let 예쁜이미지 = document.createElement("img");
    예쁜이미지.setAttribute("src", "special-photo.jpg");  // 11.2.3에서 배운 속성 설정
    예쁜이미지.setAttribute("alt", "특별한 사진");
    예쁜이미지.style.border = "3px solid blue";          // 11.2.2에서 배운 스타일 적용
    예쁜이미지.style.borderRadius = "10px";

    // 3. 완전히 꾸며진 버튼 만들기 (모든 조작 기능 활용)
    let 완성버튼 = document.createElement("button");
    완성버튼.textContent = "완성된 버튼";           // 텍스트 설정
    완성버튼.style.backgroundColor = "orange";      // 배경색 설정
    완성버튼.style.color = "white";                // 글자색 설정
    완성버튼.style.padding = "10px 20px";          // 여백 설정
    완성버튼.setAttribute("title", "완전히 꾸며진 버튼이에요!"); // 속성 설정

    console.log("멋진 제목 완성:", 멋진제목);
    console.log("꾸며진 이미지 완성:", 예쁜이미지);
    console.log("완전한 버튼 완성:", 완성버튼);
    console.log("모든 요소가 완벽하게 준비되었어요!");
}

// 완전히 꾸며진 요소들 만들기 실행하기
완전한요소만들기();

해답 설명: 새로 만든 요소에 텍스트 설정, 스타일 적용, 속성 설정을 모두 조합하면 완전히 준비된 요소를 만들 수 있습니다. 이렇게 하면 웹페이지에 추가할 준비가 완료된 요소들을 미리 만들어둘 수 있습니다.

새로운 요소를 창조하는 모든 비밀을 탐험해보았습니다. 이제 여러분도 필요할 때마다 새로운 HTML 요소를 자유자재로 만들어낼 수 있는 웹 개발자가 되었습니다. 다음 시간에는 이렇게 만든 요소들을 실제 웹페이지에 추가하는 방법을 배워보겠습니다.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
createElement의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

더 많은 연습을 원하는 여러분을 위한 추가 문제들입니다.

추가 문제 1. 새로운 제목(h1) 요소를 만들고 "환영합니다!"라는 내용을 넣어보세요.

// 답:
let 새제목 = document.createElement("h1");
새제목.textContent = "환영합니다!";
console.log("새 제목 생성:", 새제목);

추가 문제 2. 버튼을 만들고 "시작하기"라는 텍스트를 설정해보세요.

// 답:
let 새버튼 = document.createElement("button");
새버튼.textContent = "시작하기";
console.log("새 버튼 생성:", 새버튼);
console.log("버튼 텍스트:", 새버튼.textContent);

추가 문제 3. 이미지 요소를 만들고 src와 alt 속성을 설정해보세요.

// 답:
let 새이미지 = document.createElement("img");
새이미지.setAttribute("src", "photo.jpg");
새이미지.setAttribute("alt", "사진");
console.log("새 이미지 생성:", 새이미지);

추가 문제 4. createElement와 createTextNode의 차이점은 무엇인가요?

답: createElement는 HTML 태그 요소(p, button, img 등)를 만들고, createTextNode는 순수한 텍스트 내용만 만듭니다. createElement로 만든 요소에는 속성을 추가할 수 있지만, createTextNode는 오직 글자 내용만 가지고 있습니다.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

let element = document.createElement("paregraph");
element.textContent = "새로운 단락";

답: 태그 이름이 잘못되었습니다. 올바른 코드:

let element = document.createElement("p");
element.textContent = "새로운 단락";

("paregraph" → "p" 또는 정확한 태그명 사용)

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해보겠습니다.

1단계 과정: 단락 요소 생성 → 내용 설정 → 변수에 저장 → 확인 (아직 화면에 안 보임)

2단계 과정: 버튼 생성 → 텍스트 설정 → 이미지 생성 → 속성 설정 → 확인

3단계 과정: 텍스트 노드 생성 → 제목 요소 생성 → 각각 내용 설정 → 준비 완료

📂 마무리 정보

오늘 배운 11.3.1 내용이 여러분의 자바스크립트 지식 상자에 소중히 보관되었나요? 다음 시간에는 더욱 흥미로운 내용으로 찾아뵙겠습니다.

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---