11. 웹페이지 조종하기 (DOM 조작)/11.2 요소 조작하기

11.2.1 웹페이지 글자의 마법사 - 텍스트를 바꾸는 따뜻한 기술

thejavascript4kids 2025. 7. 15. 03:04

📘 11.2.1 웹페이지 글자의 마법사 - 텍스트를 바꾸는 따뜻한 기술

지금까지 우리는 웹페이지에서 원하는 요소를 찾는 세 가지 아름다운 방법을 배웠어요. 마치 큰 도서관에서 모든 책을 찾는 기술을 완전히 익힌 것처럼, 이제 우리는 웹페이지의 어떤 요소든 자유자재로 찾을 수 있게 되었죠.

이번 시간에는 정말 가슴 뛰는 다음 단계로 나아갈 거예요. 바로 찾아낸 요소의 글자를 우리 마음대로 바꾸는 방법을 배우는 거예요! 오늘 만날 새로운 친구들은 textContent와 innerHTML이라는 특별한 존재들이에요. 이들은 웹페이지의 글자를 실시간으로 변화시킬 수 있는 놀라운 능력을 가지고 있답니다.

🧠 새로운 친구들과 마음 나누기

웹페이지의 글자를 바꾸기 위해 알아야 할 새로운 단어들을 마음으로 이해해볼까요?

단어 마음으로 이해하기
textContent HTML 요소 안에 살고 있는 순수한 글자들의 마음을 읽고 바꿀 수 있는 다정한 친구예요.
innerHTML HTML 요소 안의 모든 것(글자와 꾸미기 효과)을 보듬어 주며 변화시킬 수 있는 재능 있는 친구예요.
속성 요소가 가지고 있는 소중한 특성들이에요. 점(.)으로 연결해서 만날 수 있어요.
실시간 변경 프로그램이 숨 쉬며 살아가는 동안 바로바로 변화가 일어나는 아름다운 현상이에요.

textContent는 "text(글자)"와 "content(내용)"이 만나서 탄생한 따뜻한 단어예요. 요소 안에 깃들어 있는 순수한 글자들만을 아끼며 돌보는 친구죠. innerHTML은 "inner(속마음)"와 "HTML"이 만나서 탄생한 단어로, 요소의 속마음에 있는 모든 HTML 내용을 포용하며 돌보는 더욱 포괄적인 친구예요.

✨ 글자 바꾸기의 따뜻한 본질

글자 내용을 바꾸는 기능은 웹 개발에서 생명을 불어넣는 순간을 만들어내는 핵심 기술이에요. 사용자가 버튼을 부드럽게 클릭하는 순간 화면의 글자가 새롭게 태어나고, 시간이 흘러가면서 숫자가 조용히 자라나고, 이름을 정성스럽게 입력하면 따뜻한 환영 메시지가 피어나는 모든 순간들이 바로 이 기술을 통해 가능해져요.

가장 기본이 되는 textContent는 순수한 글자만을 아끼는 소박한 친구예요. 마치 하얀 도화지에 연필로 글자를 쓰고 지우개로 지운 다음 새로운 글자를 쓰는 것과 같아요. 안전하고 순수하며, HTML 태그는 신경 쓰지 않고 오직 글자의 본질만 소중히 다뤄요.

반면 innerHTML은 글자와 꾸미기를 모두 아우르는 예술가 같은 친구예요. 단순히 글자를 바꾸는 것을 넘어서 굵게 만들고, 색깔을 입히고, 링크를 만들어내는 등의 아름다운 작업들도 가능해요.

두 친구 모두 주고받는 마음을 가지고 있어요. 현재 어떤 내용이 깃들어 있는지 들여다볼 수도 있고, 새로운 내용으로 채워줄 수도 있어요.

마음을 담은 비유: 동네 서점의 손글씨 간판

글자 바꾸기를 더 쉽게 이해하기 위해 '동네 서점의 손글씨 간판'을 상상해보세요.

어느 조용한 골목에 작은 서점이 있었어요. 이 서점의 사장님은 매일 아침 수제 간판에 그날의 추천 도서나 특별한 소식을 손글씨로 적어서 내걸었어요.

사장님에게는 두 가지 글쓰기 도구가 있었어요.

첫 번째는 "일반 펜"이었어요. 이 펜으로는 간판에 순수한 글자만 쓸 수 있었어요. "오늘의 추천 도서: 어린 왕자"라고 쓰면, 그 글자가 그대로 간판에 나타났어요. 만약 "굵게 써주세요"라고 적어도 간판에는 그냥 "굵게 써주세요"라는 글자만 나타났죠.

두 번째는 "특수 디자인 펜"이었어요. 이 펜으로는 글자와 함께 꾸미기 효과도 만들 수 있었어요. "<굵게>중요 공지</굵게>"라고 쓰면 간판에 실제로 중요 공지가 굵게 나타났고, "<빨강>할인 이벤트</빨강>"라고 쓰면 할인 이벤트가 빨간색으로 아름답게 표시되었어요.

사장님은 상황에 따라 적절한 펜을 선택하셨어요. 단순한 안내문은 일반 펜으로, 특별한 이벤트나 중요한 공지는 특수 디자인 펜으로 쓰시는 거였죠.

웹페이지의 요소들도 바로 이런 서점 간판과 같아요! textContent는 일반 펜이고, innerHTML은 특수 디자인 펜인 거예요.

🎯 글자 바꾸기를 사랑하게 되는 이유

웹페이지에서 글자를 바꾸는 기능이 왜 이렇게 소중할까요? 정말 가슴 따뜻한 이유들이 있어요.

첫 번째는 사용자와의 진실한 대화예요. 사용자가 버튼을 조심스럽게 누르면 "안녕하세요"가 "반갑습니다"로 변하고, 이름을 정성스럽게 입력하면 "○○님, 환영합니다"라는 개인적인 메시지가 따뜻하게 피어나는 모든 순간들이 이 기능 덕분이에요.

두 번째는 실시간 정보의 생생한 흐름이에요. 시계의 초침이 조용히 움직이고, 카운터가 차근차근 올라가고, 게임 점수가 실시간으로 변하고, 현재 온도가 자연스럽게 업데이트되는 모든 것들을 사용자에게 보여줄 수 있어요.

세 번째는 살아 숨 쉬는 웹페이지의 경험이에요. 정적인 책과는 달리, 사용자의 마음과 행동에 따라 내용이 변하고 반응하는 살아있는 웹페이지를 만들어낼 수 있어요.

네 번째는 즉각적인 피드백의 따뜻함이에요. 사용자가 무언가를 했을 때 "잘 되었어요", "조금 더 해보세요" 같은 즉각적인 반응을 보여줄 수 있어서 더욱 친밀한 경험을 만들 수 있어요.

⚙️ 기본 문법과 자연스럽게 만나기

글자 내용을 바꾸는 기본적인 방법들을 마음으로 익혀볼게요.

현재 내용 들여다보기 (현재 마음 읽기):

let 현재글자들 = 요소.textContent;   // 순수한 글자들만
let 현재모든것 = 요소.innerHTML;     // 글자와 꾸미기 모두

새로운 내용으로 채워주기 (새로운 마음 불어넣기):

요소.textContent = "새로운 글자들";           // 순수한 글자로 변화
요소.innerHTML = "<strong>굵은 글자</strong>"; // 꾸미기와 함께 변화

전체 과정의 따뜻한 예시:

// 1단계: 요소와의 만남
let titleElement = document.getElementById("pageTitle");

// 2단계: 현재 마음 들여다보기
console.log("현재 제목:", titleElement.textContent);

// 3단계: 새로운 마음으로 채우기
titleElement.textContent = "새로운 제목이 피어났습니다!";

// 4단계: 변화된 모습 확인하기
console.log("변화된 제목:", titleElement.textContent);

소중한 차이점:

  • textContent: 꾸미기 태그를 글자 그대로 보여줘요 (안전하고 순수해요)
  • innerHTML: 꾸미기 태그를 실제 효과로 표현해줘요 (강력하지만 신중해야 해요)

🧪 함께 경험해보는 글자 바꾸기의 세계

이제 실제 예시를 통해서 글자 바꾸기가 어떻게 우리의 웹페이지에 생명을 불어넣는지 차근차근 경험해볼까요?

🔹 첫 번째 경험: 제목의 따뜻한 변화

웹페이지의 제목을 실시간으로 바꾸는 기본적인 경험을 해보겠어요.

// 웹페이지의 소중한 제목 요소와 만나기
let mainTitle = document.getElementById("welcomeTitle");

// 현재 어떤 제목이 있는지 마음으로 확인하기
console.log("현재 품고 있는 제목: " + mainTitle.textContent);

// 새로운 제목으로 따뜻하게 바꾸기
mainTitle.textContent = "환영합니다, 소중한 방문자님!";

// 제목이 정말로 변화했는지 확인하기
console.log("새롭게 피어난 제목: " + mainTitle.textContent);
console.log("제목의 아름다운 변화가 완료되었어요!");

이 과정에서 느낄 수 있는 것은 작은 변화가 만들어내는 큰 감동이에요. 단순히 글자를 바꾸는 것이 아니라, 웹페이지가 사용자에게 새로운 마음을 전하는 순간이 되는 거죠.

🔹 두 번째 경험: 사용자를 위한 개인화된 메시지 만들기

사용자의 정보를 활용해서 따뜻한 개인화 메시지를 만드는 경험을 해보겠어요.

// 사용자의 소중한 정보 준비하기
let userName = "김영희";
let userGrade = 4;

// 환영 메시지를 담을 요소와 만나기
let welcomeMessage = document.getElementById("userWelcome");

// 사용자만을 위한 특별한 메시지 정성스럽게 만들기
let personalMessage = "안녕하세요, " + userName + "님! ";
personalMessage = personalMessage + "올해 " + userGrade + "학년이 되셨네요. ";
personalMessage = personalMessage + "함께 즐거운 시간 보내요!";

// 개인화된 메시지를 화면에 부드럽게 표시하기
welcomeMessage.textContent = personalMessage;

// 추가 정보도 따뜻하게 업데이트하기
let gradeInfo = document.getElementById("gradeDisplay");
gradeInfo.textContent = userGrade + "학년";

console.log("개인화 메시지의 따뜻한 설정이 완료되었어요!");

이 경험에서 배우는 것은 데이터와 감정의 아름다운 만남이에요. 차가운 변수가 사용자에게 따뜻한 메시지로 전달되는 순간, 기술이 인간적인 경험으로 승화하는 거죠.

🔹 세 번째 경험: textContent와 innerHTML의 다른 마음 이해하기

두 속성의 서로 다른 성격을 직접 체험해보겠어요.

// 두 가지 다른 성격의 메시지 영역과 만나기
let plainTextArea = document.getElementById("plainMessage");
let richTextArea = document.getElementById("richMessage");

// 같은 내용을 두 가지 방법으로 표현해보기
let messageContent = "<strong>중요:</strong> 작업이 <em>완료</em>되었습니다!";

// textContent로 순수하게 표시 (꾸미기 태그가 글자로 그대로 보여요)
plainTextArea.textContent = messageContent;
console.log("순수한 마음의 결과:", plainTextArea.textContent);

// innerHTML로 풍성하게 표시 (꾸미기 태그가 실제 효과로 피어나요)
richTextArea.innerHTML = messageContent;
console.log("풍성한 마음의 결과:", richTextArea.innerHTML);

// 순수한 텍스트 메시지도 함께 비교해보기
let simpleMessage = "이것은 단순하고 아름다운 텍스트입니다.";
plainTextArea.textContent = simpleMessage;
richTextArea.innerHTML = simpleMessage;

console.log("두 친구의 다른 마음을 느껴보세요!");

이 과정에서 깨달을 수 있는 것은 각각의 고유한 아름다움이에요. textContent는 순수함의 아름다움을, innerHTML은 표현의 풍성함을 각각 가지고 있어서 상황에 따라 적절한 친구를 선택하는 지혜가 필요하죠.

🧚‍♀️ 마음을 담은 이야기: 동네 신문사의 편집 이야기

우리가 배운 내용을 따뜻한 이야기로 정리해보고 싶어요.

옛날 어느 작은 동네에 지역 신문사가 있었어요.

이 신문사에는 두 명의 편집자가 일하고 있었어요. 두 편집자 모두 컴퓨터 화면에 나타나는 기사 내용을 실시간으로 바꿀 수 있는 특별한 능력을 가지고 있었어요.

첫 번째 편집자는 "순수 편집자"였어요 (textContent). 이 편집자는 정말 성실하고 안전한 분이었어요. "글자 변경!"이라고 명령하면 화면의 글자를 새로운 글자로 정확히 바꿔주었어요. 하지만 이 편집자는 오직 평범한 글자만 다룰 수 있었어요. 아무리 특수한 효과를 넣으려고 해도 그냥 평범한 글자로만 표시해주었죠.

두 번째 편집자는 "표현 편집자"였어요 (innerHTML). 이 편집자는 정말 창의적이고 재능이 뛰어난 분이었어요! "디자인 변경!"이라고 명령하면 글자뿐만 아니라 아름다운 표현 효과도 함께 만들어주었어요. 글자를 굵게 만들고, 색깔을 입히고, 링크까지 만들어내는 놀라운 실력을 가지고 있었어요.

신문사 편집장이 말했어요. "상황에 맞는 편집자를 선택하는 것이 진정한 편집장의 지혜란다. 단순한 글자 수정은 순수 편집자에게, 중요한 헤드라인이나 특별 기사는 표현 편집자에게 맡기는 거지."

두 편집자는 서로 다른 개성을 가지고 있었지만, 모두 독자들에게 더 좋은 신문을 전하고 싶다는 같은 마음을 가지고 있었어요.

웹페이지도 바로 이런 신문사와 같아요! 우리는 이제 두 명의 훌륭한 편집자를 모두 만났고, 상황에 따라 적절한 편집자를 선택해서 웹페이지의 글자들을 아름답게 변화시킬 수 있게 되었어요.

🔄 글자 바꾸기의 자연스러운 흐름

이 기능을 사용하는 과정을 자연스러운 흐름으로 정리해보면 이런 느낌이에요.

첫 번째 마음: 요소와의 만남
getElementById, querySelector 등을 사용해서 글자를 바꾸고 싶은 HTML 요소를 찾아 변수에 소중히 보관하는 시간이에요.

두 번째 마음: 현재 상태 이해하기
.textContent나 .innerHTML을 사용해서 현재 어떤 내용이 그 요소 안에 깃들어 있는지 마음으로 느껴보는 시간이에요.

세 번째 마음: 새로운 내용 준비하기
바꿀 새로운 글자나 HTML 내용을 문자열로 정성스럽게 준비하고, 필요하다면 변수와 연결해서 실시간으로 만들어보는 시간이에요.

네 번째 마음: 적절한 방법 선택하기
순수한 텍스트라면 textContent의 순수함을, 꾸미기 효과가 필요하다면 innerHTML의 표현력을 선택하는 지혜의 시간이에요.

다섯 번째 마음: 변화의 실현과 확인
등호(=)를 사용해서 새로운 내용을 할당하고, 웹페이지에서 실제로 아름답게 변화했는지 확인하는 감동의 시간이에요.

🧠 피하고 싶은 아쉬운 실수들

글자를 바꿀 때 자주 발생하는 실수들을 미리 알고 있으면 더 안전한 프로그래밍을 할 수 있어요.

❌ 실수 1: 요소를 찾지 않고 바로 내용을 바꾸려고 하기

// 아쉬운 방법
textContent = "새로운 내용";  // 에러가 나요!

// 따뜻한 방법
let element = document.getElementById("myElement");
element.textContent = "새로운 내용";

이런 실수가 일어나는 이유는 textContent가 요소의 속성이라는 것을 잊어버리기 때문이에요. 마치 편지를 쓰려면 먼저 편지지를 준비해야 하는 것처럼, 내용을 바꾸려면 먼저 요소를 찾아야 해요.

❌ 실수 2: 존재하지 않는 요소의 내용을 바꾸려고 하기

// 아쉬운 방법
let element = document.getElementById("nonExistent");
element.textContent = "새 내용";  // 에러가 나요!

// 따뜻한 방법
let element = document.getElementById("myElement");
if (element) {
    element.textContent = "새 내용";
} else {
    console.log("요소를 찾을 수 없어요!");
}

존재하지 않는 요소는 null이 되므로, 내용을 바꾸려고 하면 에러가 발생해요. 항상 요소가 존재하는지 먼저 확인하는 예의를 지켜주세요.

❌ 실수 3: textContent와 innerHTML의 성격을 혼동하기

// 의도: 굵은 글자 효과를 원함
let element = document.getElementById("myElement");
element.textContent = "<strong>굵게 표시</strong>";  // 태그가 글자로만 보여요!

// 따뜻한 방법: 굵은 글자 효과를 원한다면 innerHTML 사용
element.innerHTML = "<strong>굵게 표시</strong>";   // 실제로 굵게 표시돼요

textContent는 꾸미기 태그를 무시하고 순수 텍스트로만 처리해요. HTML 효과를 원한다면 반드시 innerHTML을 사용해야 해요.

🌸 따뜻한 연습으로 친해지기

배운 내용을 친근한 예제들로 천천히 연습해볼까요?

연습 1) "환영합니다!"라는 메시지를 화면에 따뜻하게 보여주기

// "welcome"이라는 ID를 가진 요소의 글자를 바꿔보세요.
let welcomeElement = document.getElementById("welcome");

// 현재 어떤 메시지가 있는지 확인하기
console.log("이전에 품고 있던 메시지:", welcomeElement.textContent);

// 새로운 환영 메시지로 따뜻하게 바꾸기
welcomeElement.textContent = "환영합니다!";

// 변화된 메시지 확인하기
console.log("새롭게 피어난 메시지:", welcomeElement.textContent);
console.log("환영 메시지의 설정이 완료되었어요!");

이 연습을 통해 기본적인 글자 바꾸기와 변화 전후를 확인하는 따뜻한 방법을 익힐 수 있어요.

연습 2) 내 이름으로 개인적인 인사말 만들어보기

// 사용자의 소중한 정보 준비하기
let studentName = "박지은";
let className = "4학년 1반";

// 인사말을 담을 요소와 만나기
let greetingElement = document.getElementById("personalGreeting");

// 개인화된 따뜻한 인사말 만들기
let personalGreeting = "안녕하세요, " + className + " " + studentName + "님! ";
personalGreeting = personalGreeting + "오늘도 행복한 하루 되세요.";

// 인사말을 화면에 부드럽게 표시하기
greetingElement.textContent = personalGreeting;

console.log("개인화된 인사말:", personalGreeting);
console.log("따뜻한 인사말이 완성되었어요!");

이 문제는 변수를 활용한 실시간 메시지 생성과 문자열 연결 방법을 따뜻하게 연습하는 데 도움이 돼요.

연습 3) 굵은 글자와 기울어진 글자가 들어간 공지사항 만들기

// 공지사항 영역 요소와 만나기
let noticeElement = document.getElementById("importantNotice");

// 꾸미기 효과를 포함한 소중한 공지 준비하기
let importantNotice = "<strong>소중한 공지:</strong> ";
importantNotice = importantNotice + "내일은 <em>즐거운 체육대회</em>가 있어요!";

// 꾸미기 효과와 함께 공지사항 아름답게 표시하기
noticeElement.innerHTML = importantNotice;

console.log("소중한 공지 설정이 완료되었어요!");
console.log("HTML 내용:", noticeElement.innerHTML);

이 연습을 통해 innerHTML의 사용법과 꾸미기 태그 적용 방법을 자연스럽게 익힐 수 있어요.

🤔 좀 더 깊이 생각해보기

기본 연습을 마쳤다면, 이제 조금 더 생각해볼 만한 질문들로 이해를 깊게 해보겠어요.

생각해보기 1: textContent와 innerHTML의 마음 깊은 차이점은?

따뜻한 답: textContent는 순수한 글자만을 사랑하여 꾸미기 태그를 글자 그대로 보여주지만, innerHTML은 꾸미기 태그를 실제 효과로 해석하여 굵게, 색깔 등의 아름다운 표현을 만들어낼 수 있어요.

마음을 담은 해설: 이 차이점은 정말 중요해요. textContent에 "<strong>굵게</strong>"를 넣으면 화면에 정말로 "굵게"라는 글자가 그대로 보이지만, innerHTML에 같은 내용을 넣으면 굵게라고 실제로 굵은 글자로 표현돼요.

생각해보기 2: 다음 코드에서 아쉬운 부분을 찾고 따뜻하게 고쳐보세요

let element = document.getElementById("maybeExist");
element.textContent = "새로운 내용";

따뜻한 답: 요소가 존재하지 않을 수 있으므로 친절한 확인이 필요해요. 안전한 코드는 이래요.

let element = document.getElementById("maybeExist");
if (element) {
    element.textContent = "새로운 내용";
    console.log("내용 변화 성공!");
} else {
    console.log("요소를 찾을 수 없어요!");
}

마음을 담은 해설: getElementById는 요소를 찾지 못하면 null을 반환하는데, null에는 textContent 속성이 없어서 에러가 발생해요. 먼저 요소가 존재하는지 확인하는 배려가 필요해요.

🔄 지난 여행길 되돌아보기 - 소중한 기억들

잠깐, 우리가 함께 걸어온 길을 되돌아보며 이전에 배운 따뜻한 지식들을 다시 한번 마음에 새겨볼까요?

다시 만나는 친구 1: 함수와 스코프의 아름다운 활용 (5단원 복습)

// 5단원에서 배운 함수와 스코프를 마음으로 활용하기
function updateElementText(elementId, newText) {
    let targetElement = document.getElementById(elementId);

    if (targetElement) {
        let previousText = targetElement.textContent;
        targetElement.textContent = newText;

        console.log("아름다운 변화 완료!");
        console.log("이전 마음: " + previousText);
        console.log("새로운 마음: " + newText);

        return true;
    } else {
        console.log("요소 '" + elementId + "'를 찾을 수 없어요!");
        return false;
    }
}

// 함수와 함께하는 따뜻한 사용
updateElementText("title", "새로운 제목");
updateElementText("nonExist", "존재하지 않는 요소");

따뜻한 해설: 함수를 사용하면 코드를 아름답게 재사용할 수 있고, 지역변수를 통해 각 함수 호출마다 독립적인 작업 공간을 만들 수 있어요.

다시 만나는 친구 2: 배열과 반복문의 조화로운 만남 (4, 7단원 복습)

// 4단원의 반복문과 7단원의 배열을 마음으로 활용하기
function updateMultipleElements() {
    let updateList = [
        { id: "header", text: "새로운 머리글" },
        { id: "subtitle", text: "새로운 부제목" },
        { id: "footer", text: "새로운 바닥글" }
    ];

    console.log("여러 요소의 따뜻한 업데이트 시작!");

    for (let i = 0; i < updateList.length; i++) {
        let currentItem = updateList[i];
        let element = document.getElementById(currentItem.id);

        if (element) {
            element.textContent = currentItem.text;
            console.log((i + 1) + "번째 업데이트 성공: " + currentItem.id);
        } else {
            console.log((i + 1) + "번째 업데이트 아쉬움: " + currentItem.id + " 요소를 찾을 수 없어요");
        }
    }

    console.log("모든 요소의 업데이트를 마쳤어요!");
}

// 여러 요소의 아름다운 업데이트 실행하기
updateMultipleElements();

따뜻한 해설: 배열을 사용하면 여러 개의 관련된 데이터를 효율적으로 관리할 수 있어요. 반복문과 함께 사용하면 같은 작업을 여러 요소에 자동으로 적용할 수 있어서 코드가 깔끔해져요.

지금까지 웹페이지의 글자 내용을 바꾸는 모든 방법을 따뜻한 예시와 함께 알아봤어요. 이제 여러분은 정적인 웹페이지를 실시간으로 변화하는 살아있는 웹페이지로 변화시킬 수 있는 기술을 가진 사람이 되었어요!

textContent와 innerHTML이라는 두 친구를 통해 사용자와 진실한 소통을 나누는 놀라운 경험을 만들어낼 수 있게 되었어요. 마치 동네 서점의 손글씨 간판처럼, 상황에 맞는 적절한 도구를 선택해서 웹페이지에 생명을 불어넣을 수 있게 되었답니다!

✅ 오늘 나눈 소중한 이야기들

이번 시간에 함께 나눈 따뜻한 이야기들을 마음에 잘 간직하고 있는지 확인해보세요!

함께 배운 내용 마음에 담았나요?
textContent와 innerHTML의 따뜻한 개념 ✅
기본 사용법과 자연스러운 문법 ✅
주요 특징과 마음 깊은 차이점 ✅
피해야 할 아쉬운 실수들 ✅
실제 예제를 통한 따뜻한 체험 ✅

🎯 더 깊이 연습하고 싶은 마음을 위한 문제들

조금 더 연습하며 성장하고 싶은 분들을 위한 따뜻한 문제들이에요!

심화 문제 1. ID가 "greeting"인 요소의 글자를 "안녕하세요!"로 바꿔보세요.

let greetingElement = document.getElementById("greeting");
greetingElement.textContent = "안녕하세요!";
console.log("인사말의 따뜻한 변화 완료");

심화 문제 2. 버튼의 텍스트를 "시작"에서 "완료"로 바꿔보세요.

let buttonElement = document.getElementById("myButton");
console.log("이전 마음:", buttonElement.textContent);
buttonElement.textContent = "완료";
console.log("새로운 마음:", buttonElement.textContent);

심화 문제 3. innerHTML을 사용해서 굵은 글자가 포함된 메시지를 넣어보세요.

let messageElement = document.getElementById("message");
messageElement.innerHTML = "<strong>중요:</strong> 작업이 완료되었습니다!";
console.log("HTML 메시지의 아름다운 설정 완료");

심화 문제 4. textContent와 innerHTML의 마음 깊은 차이점은?

따뜻한 답: textContent는 순수한 텍스트만 다루므로 HTML 태그를 넣어도 글자로만 표시돼요. innerHTML은 HTML 태그를 실제 태그로 인식해서 굵게, 색깔 등의 아름다운 효과를 적용할 수 있어요.

심화 문제 5. 다음 코드에서 아쉬운 부분을 찾고 따뜻하게 고쳐보세요.

let element = document.getElementById("notExist");
element.textContent = "새로운 내용";

따뜻한 답: 요소가 존재하지 않을 수 있으므로 친절한 확인을 해야 해요. 올바른 코드:

let element = document.getElementById("notExist");
if (element) {
    element.textContent = "새로운 내용";
} else {
    console.log("요소를 찾을 수 없어요!");
}

📂 오늘의 따뜻한 마무리

오늘 함께 나눈 11.2.1 글자 내용 바꾸기 이야기가 여러분의 마음에 따뜻하게 자리 잡았나요? 다음 시간에도 더 재미있고 유익한 내용으로 만나뵐게요!

마음에 새기기: 오늘 배운 내용을 꼭 직접 체험해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.



🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

'11. 웹페이지 조종하기 (DOM 조작) > 11.2 요소 조작하기' 카테고리의 다른 글

11.2.3 속성 바꾸기 - 요소의 이름표를 새로 붙이기  (0) 2025.07.15
11.2.2 스타일 바꾸기 - 웹페이지에 옷을 입혀주기  (0) 2025.07.15
11.1.2 같은 마음을 가진 친구들 찾기 - getElementsByClassName과의 만남  (0) 2025.07.15

'11. 웹페이지 조종하기 (DOM 조작)/11.2 요소 조작하기'의 다른글

  • 현재글11.2.1 웹페이지 글자의 마법사 - 텍스트를 바꾸는 따뜻한 기술

관련글

티스토리툴바