11.2.3 속성 바꾸기 - 요소의 이름표를 새로 붙이기

📘 11.2.3 속성 바꾸기 - 요소의 이름표를 새로 붙이기

웹페이지 요소들의 옷을 갈아입히는 법을 배웠으니, 이제는 그들의 이름표를 새로 만들어주는 시간입니다. 마치 계절이 바뀔 때마다 옷장에서 다른 옷을 꺼내듯, 상자에 붙인 낡은 스티커를 떼어내고 새롭고 반짝이는 스티커를 붙여주는 것과 같습니다.

HTML 요소들은 저마다 자신만의 작은 이름표들을 가지고 있습니다. 이미지라면 어떤 사진을 보여줄지, 링크라면 어디로 안내할지를 적어둔 조그만 쪽지들이 있는 것이지요. 우리는 그 쪽지들을 언제든 새로운 내용으로 바꿔적을 수 있습니다.

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

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

단어	쉬운 설명
속성 (Attribute)	HTML 요소가 가지고 있는 추가 정보나 특징이에요.
setAttribute	요소의 속성을 새로 만들거나 바꿔주는 특별한 명령어예요.
getAttribute	요소의 속성이 무엇인지 확인해주는 명령어예요.
src	이미지나 파일이 어디에 있는지 알려주는 길 안내 속성이에요.

setAttribute는 "새로 설정하다"는 뜻이고, getAttribute는 "가져오다"는 의미입니다. 마치 책에 붙인 메모를 새로 쓰거나 기존 메모를 읽어보는 것과 같습니다.

✨ 속성 바꾸기의 핵심 개념

HTML 요소들은 각자 고유한 신분증 같은 속성들을 가지고 있습니다. 이미지 요소는 어떤 사진을 보여줄지 알려주는 src 속성을, 링크 요소는 어디로 연결할지 알려주는 href 속성을 품고 있습니다.

자바스크립트의 속성 바꾸기 기능을 사용하면, 이런 신분증들을 언제든지 새로운 것으로 바꿀 수 있습니다. 처음에는 고양이 사진을 보여주던 이미지가 강아지 사진으로 변하고, 네이버로 연결되던 링크가 구글로 향하는 길로 바뀌는 놀라운 변화들이 가능해집니다.

이 기능의 가장 아름다운 점은 웹페이지가 살아 숨쉬는 공간이 된다는 것입니다. 사용자가 버튼을 누르거나 마우스를 움직일 때마다 이미지, 링크, 입력창 등이 실시간으로 반응하며 변해가는 것입니다.

재미있는 비유: 학교 사물함의 이름표 시스템

속성 바꾸기를 더 쉽게 이해하기 위해 학교 사물함의 이름표 시스템을 떠올려보겠습니다.

여러분 교실의 사물함들을 생각해보세요. 각 사물함에는 여러 종류의 스티커와 이름표가 붙어있습니다. 소유자 이름, 반 번호, 사물함 번호, 특별 표시까지 다양한 정보가 작은 라벨들에 적혀있지요.

새 학기가 되어 자리가 바뀌었습니다. 선생님이 "김철수 사물함의 번호를 5번에서 12번으로 바꿔야겠구나"라고 하시며, 기존의 "5번" 스티커를 조심스럽게 떼어내고 새로운 "12번" 스티커를 반듯하게 붙여주십니다.

또 다른 경우에는 "이영희 사물함에 '학급 회장' 라벨도 추가로 붙여주자"라고 하시며, 완전히 새로운 종류의 라벨을 정성스럽게 만들어 붙여주기도 합니다.

웹페이지의 HTML 요소들도 똑같은 사물함 시스템입니다. getAttribute로 현재 어떤 라벨이 붙어있는지 확인하고, setAttribute로 새로운 라벨을 붙이거나 기존 라벨을 바꾸는 것이지요.

🎯 속성 바꾸기를 배우는 이유

웹페이지가 똑똑하고 따뜻하게 반응하는 공간이 되려면 속성 바꾸기 기능이 꼭 필요합니다. 사용자가 어떤 행동을 했을 때 웹페이지가 그에 맞춰 자연스럽게 변해야 하기 때문입니다.

예를 들어, 사용자가 "다음 사진 보기" 버튼을 누르면 이미지가 다른 사진으로 부드럽게 바뀌고, "홈으로 가기" 버튼을 누르면 링크 주소가 홈페이지로 자동으로 변경되는 것들이 모두 속성 바꾸기로 만들어집니다.

또한 사용자에게 더 친절한 웹사이트를 만들 수 있습니다. 입력창에 "이름을 입력하세요"라는 따뜻한 안내 문구를 미리 넣어두거나, 이미지에 적절한 설명을 달아서 시각 장애인도 내용을 이해할 수 있게 도와줄 수 있습니다.

무엇보다 살아있는 웹페이지를 만들 수 있다는 점이 가장 큰 매력입니다. 정적인 HTML에서 벗어나 사용자와 상호작용하는 생동감 있는 웹페이지를 만들 수 있게 됩니다.

⚙️ 기본 문법 살펴보기

속성 바꾸기의 기본 문법은 두 가지 방향으로 나뉩니다. 하나는 속성을 읽어보는 것이고, 다른 하나는 속성을 새로 써넣는 것입니다.

// 속성 값 확인하기 (무엇이 써있는지 보기)
let 현재값 = 요소.getAttribute("속성이름");

// 속성 값 설정하기 (새로운 값으로 바꾸기)
요소.setAttribute("속성이름", "새로운값");

자주 사용하는 속성들:

// 이미지 경로 바꾸기
요소.setAttribute("src", "새이미지.jpg");

// 링크 주소 바꾸기  
요소.setAttribute("href", "https://www.google.com");

// 이미지 설명 바꾸기
요소.setAttribute("alt", "새로운 설명");

// 입력창 기본값 설정하기
요소.setAttribute("value", "기본 입력값");

여기서 주의할 점은 속성 이름과 새로운 값을 모두 따옴표로 정성스럽게 감싸야 한다는 것입니다. 그래야 컴퓨터가 이것들을 문자로 정확히 인식할 수 있습니다.

🧪 직접 해보면서 배우기

이제 구체적인 예시를 통해 속성 바꾸기가 어떻게 작동하는지 자세히 살펴보겠습니다.

🔹 첫 번째 예시: 이미지 바꾸기 마술

웹페이지의 이미지를 다른 이미지로 바꿔보는 첫 번째 시도입니다.

// ID가 "myImage"인 이미지 요소를 찾아요
let imageElement = document.getElementById("myImage");

// 현재 어떤 이미지를 보여주고 있는지 확인해요
let currentSrc = imageElement.getAttribute("src");
console.log("현재 이미지:", currentSrc);

// 새로운 이미지로 바꿔요
imageElement.setAttribute("src", "puppy.jpg");

// 이미지 설명도 함께 바꿔줘요
imageElement.setAttribute("alt", "귀여운 강아지 사진");

console.log("이미지가 강아지 사진으로 바뀌었어요! 🐶");

이 과정을 차근차근 살펴보면, 먼저 getElementById로 이미지 요소를 찾아 변수에 소중히 담아둡니다. 그다음 getAttribute로 현재 어떤 이미지를 보여주고 있는지 조심스럽게 확인하지요. 이후 setAttribute로 새로운 이미지 경로와 설명을 설정하여 완전히 다른 모습으로 변신시킵니다.

🔹 두 번째 예시: 링크와 입력창 업데이트하기

이번에는 링크 주소와 입력창의 기본값을 정성스럽게 바꿔보겠습니다.

// ID가 "myLink"인 링크 요소를 찾아요
let linkElement = document.getElementById("myLink");

// 링크가 현재 어디로 연결되어 있는지 확인해요
let currentHref = linkElement.getAttribute("href");
console.log("현재 링크 주소:", currentHref);

// 구글로 연결되도록 바꿔요
linkElement.setAttribute("href", "https://www.google.com");

// 입력창 요소도 찾아서 설정해요
let inputElement = document.getElementById("userInput");
inputElement.setAttribute("value", "여기에 이름을 써주세요");
inputElement.setAttribute("title", "이름 입력창입니다");

console.log("링크는 구글로, 입력창에는 안내 문구가 들어갔어요! ✨");

이 예시에서는 두 가지 서로 다른 요소를 동시에 다룹니다. 먼저 링크 요소의 주소를 확인하고 구글로 변경하고, 그다음 입력창 요소에 기본값과 도움말 제목을 설정하여 사용자에게 더 친절한 인터페이스를 선사합니다.

🔹 세 번째 예시: 버튼을 친절하게 만들기

마지막으로 버튼에 따뜻한 도움말을 추가해서 더 친절하게 만들어보겠습니다.

// ID가 "actionButton"인 버튼 요소를 찾아요
let buttonElement = document.getElementById("actionButton");

// 현재 버튼의 제목을 확인해봐요
let currentTitle = buttonElement.getAttribute("title");
console.log("현재 버튼 제목:", currentTitle);

// 버튼을 더 친절하게 만들어봐요!
buttonElement.setAttribute("title", "클릭하면 메시지가 나타나요!");
buttonElement.setAttribute("class", "friendly-button");

console.log("버튼이 친절한 도움말을 가진 버튼으로 바뀌었어요! 🔘");

이 예시에서는 버튼에 사용자가 이해하기 쉬운 도움말을 추가하고, 스타일링을 위한 클래스도 설정해서 더 사용자 친화적인 버튼을 만듭니다.

🔄 속성 바꾸기 과정 정리

지금까지 배운 속성 바꾸기 과정을 체계적으로 정리해보겠습니다.

첫 번째 단계는 요소 선택입니다. getElementById 등을 사용해서 속성을 바꾸고 싶은 요소를 찾아 변수에 소중히 저장하는 것이지요. 두 번째 단계는 현재 상태 확인입니다. getAttribute로 현재 어떤 값이 설정되어 있는지 조심스럽게 확인해보는 단계입니다.

세 번째 단계는 새로운 값 준비입니다. 어떤 이미지로 바꿀지, 어떤 주소로 연결할지 미리 계획하고 준비하는 것입니다. 네 번째 단계는 속성 설정입니다. setAttribute를 사용해서 실제로 새로운 값을 정성스럽게 적용하는 단계입니다.

마지막 단계는 결과 확인입니다. 웹페이지에서 정말로 바뀌었는지 눈으로 확인하고, 필요하면 console.log로 완료 메시지도 출력하여 작업이 성공적으로 완료되었음을 확인합니다.

🧚‍♀️ 이야기로 다시 배우기: 학교 도서관의 책 라벨링 시스템

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

여러분이 학교 도서관에서 도서 관리 도우미로 일하고 있다고 상상해보세요.

도서관의 모든 책에는 여러 종류의 아름다운 라벨이 붙어있습니다. 책 제목, 저자, 분류 번호, 위치 정보 등이 적힌 다양한 스티커들이 각각의 책을 특별하게 만들어주고 있습니다.

어느 날 사서 선생님이 부드러운 목소리로 말씀하셨습니다. "이 영어 책의 위치 라벨을 '3층 영어 코너'에서 '2층 어학 섹션'으로 바꿔주세요."

여러분은 먼저 책의 현재 라벨을 조심스럽게 확인해봤습니다. "지금은 '3층 영어 코너'라고 써있네요!" 그다음 기존 라벨을 정성스럽게 떼어내고 새로운 라벨을 반듯하게 붙였습니다. "이제 '2층 어학 섹션'으로 바뀌었습니다!"

또 다른 날에는 새로 들어온 책에 완전히 새로운 라벨을 추가하는 일도 했습니다. "이 책에는 '추천 도서' 라벨도 붙여주세요"라고 하시면, 기존에 없던 새로운 종류의 라벨을 예쁘게 만들어 붙였습니다.

웹페이지의 속성 관리도 똑같은 도서관 관리 시스템입니다. getAttribute로 현재 라벨을 확인하고, setAttribute로 새로운 라벨을 붙이거나 바꾸는 것이지요.

🧠 자주 하는 실수와 주의할 점

속성을 바꿀 때 쉽게 실수할 수 있는 부분들을 미리 알아두면 더욱 안전하게 코딩할 수 있습니다.

❌ 실수 1: 속성 이름을 잘못 쓰기

// 잘못된 방법 - 'src'를 'scr'로 잘못 쓴 경우
element.setAttribute("scr", "image.jpg"); // 작동하지 않아요!

// 올바른 방법 - 정확한 속성 이름 사용
element.setAttribute("src", "image.jpg");

이런 실수가 생기는 이유는 속성 이름에 오타가 있기 때문입니다. src, href, alt 같은 속성 이름은 정확히 써야만 작동합니다. 한 글자라도 틀리면 컴퓨터가 알아듣지 못합니다.

❌ 실수 2: 속성 값에 따옴표 빼먹기

// 잘못된 방법 - 따옴표 없음
element.setAttribute("src", image.jpg); // 에러가 발생해요!

// 올바른 방법 - 따옴표로 감싸기
element.setAttribute("src", "image.jpg");

자바스크립트에서는 텍스트를 나타낼 때 반드시 따옴표를 사용해야 합니다. 속성 이름과 속성 값 모두 문자열이므로 따옴표로 정성스럽게 감싸는 것을 잊지 마세요.

❌ 실수 3: 존재하지 않는 요소의 속성 바꾸려고 하기

// 위험한 방법 - 요소가 없을 수도 있어요
let element = document.getElementById("wrongId");
element.setAttribute("src", "image.jpg"); // 에러!

// 안전한 방법 - 요소 존재 여부 확인
let element = document.getElementById("myImage");
if (element) {
    element.setAttribute("src", "image.jpg");
} else {
    console.log("요소를 찾을 수 없어요! ID를 확인해주세요.");
}

가끔 잘못된 ID를 사용하거나 요소가 아직 만들어지지 않았을 때 이런 오류가 발생합니다. 항상 요소가 존재하는지 먼저 확인하는 습관을 기르는 것이 중요합니다.

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

물이 천천히 스며들어 나무를 키우듯, 우리도 차근차근 연습을 통해 속성 바꾸기를 자연스럽게 익혀보겠습니다.

Ex1) 로고 이미지를 새로운 이미지로 바꿔보자

// ID가 "logo"인 이미지를 찾아요
let logoElement = document.getElementById("logo");

// 현재 이미지가 무엇인지 확인해요
let currentImage = logoElement.getAttribute("src");
console.log("현재 로고 이미지:", currentImage);

// 새로운 로고 이미지로 바꿔요
logoElement.setAttribute("src", "newlogo.png");

// 작업 완료 메시지를 출력해요
console.log("로고가 새로운 이미지로 바뀌었어요! 🖼️");

이 연습을 통해 기본적인 이미지 경로 변경 방법을 자연스럽게 익힐 수 있습니다.

Ex2) 링크의 현재 주소를 확인하고 네이버로 바꿔보자

// ID가 "myLink"인 링크를 찾아요
let linkElement = document.getElementById("myLink");

// 현재 링크 주소가 어디인지 확인해요
let currentHref = linkElement.getAttribute("href");
console.log("현재 링크 주소:", currentHref);

// 네이버로 링크 주소를 바꿔요
linkElement.setAttribute("href", "https://www.naver.com");

// 작업 완료 메시지를 출력해요
console.log("링크 주소가 네이버로 바뀌었어요! 🔗");

이 문제는 getAttribute와 setAttribute를 함께 사용하는 방법을 연습하는 데 도움이 됩니다.

Ex3) 입력창에 친절한 안내 문구와 도움말을 설정해보자

// ID가 "nameInput"인 입력창을 찾아요
let inputElement = document.getElementById("nameInput");

// 입력창에 기본값을 설정해요
inputElement.setAttribute("value", "이름을 입력하세요");

// 마우스를 올렸을 때 나타날 도움말을 설정해요
inputElement.setAttribute("title", "여기에 여러분의 이름을 써주세요");

// 빈 상태일 때 보여줄 안내 문구를 설정해요
inputElement.setAttribute("placeholder", "예: 김철수");

// 작업 완료 메시지를 출력해요
console.log("입력창에 친절한 안내가 추가되었어요! 📝");

이 연습문제를 통해 하나의 요소에 여러 속성을 설정하는 방법을 익힐 수 있습니다.

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

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

Q1. getAttribute와 setAttribute의 차이점을 초등학생도 이해할 수 있게 설명해보세요.

정답: getAttribute는 이름표에 뭐라고 써있는지 읽어보는 것이고, setAttribute는 이름표에 새로운 내용을 써넣는 것입니다.

해설: 마치 책에 붙인 스티커를 보는 것(getAttribute)과 새로운 스티커로 바꿔 붙이는 것(setAttribute)의 차이와 같습니다. 하나는 정보를 확인하는 것이고, 다른 하나는 정보를 바꾸는 것입니다. get은 '가져오다', set은 '설정하다'라는 뜻입니다.

Q2. 다음 코드에서 잘못된 부분 2곳을 찾고 올바르게 수정해보세요.

let element = document.getElementById("myImg");
element.setAttribute(src, newimage.jpg);

정답: 속성 이름과 속성 값에 따옴표가 없습니다.

해설: 첫 번째 문제는 src에 따옴표가 없다는 것입니다. 속성 이름도 문자열이므로 "src"로 써야 합니다. 두 번째 문제는 newimage.jpg에 따옴표가 없다는 것입니다. 파일 이름도 문자열이므로 "newimage.jpg"로 써야 합니다.

올바른 코드:

let element = document.getElementById("myImg");
element.setAttribute("src", "newimage.jpg");

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

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

🔁 복습 문제 1: 텍스트 내용 변경과 속성 변경 결합 (11.2.1단원 복습)

11.2.1단원에서 배운 textContent와 이번에 배운 setAttribute를 함께 사용해보겠습니다.

// 11.2.1단원의 텍스트 변경과 11.2.3단원의 속성 변경 결합하기
function updateImageGallery() {
    // 이미지 요소 찾기
    let galleryImage = document.getElementById("galleryImg");
    let imageCaption = document.getElementById("imageCaption");

    // 현재 이미지 정보 확인
    let currentSrc = galleryImage.getAttribute("src");
    console.log("현재 이미지:", currentSrc);

    // 고양이와 강아지 중에서 선택하기
    let isCatImage = currentSrc === "cat.jpg";

    if (isCatImage) {
        // 고양이 → 강아지로 변경
        galleryImage.setAttribute("src", "dog.jpg");
        galleryImage.setAttribute("alt", "귀여운 강아지");
        imageCaption.textContent = "멋진 강아지 사진이에요!";
        console.log("이미지가 강아지로 바뀌었어요");
    } else {
        // 강아지 → 고양이로 변경
        galleryImage.setAttribute("src", "cat.jpg");
        galleryImage.setAttribute("alt", "귀여운 고양이");
        imageCaption.textContent = "사랑스러운 고양이 사진이에요!";
        console.log("이미지가 고양이로 바뀌었어요");
    }
}

// 이미지 갤러리 업데이트 실행하기
updateImageGallery();

해답 설명: 텍스트 내용 변경(textContent)과 속성 변경(setAttribute)을 함께 사용하면 이미지와 설명을 동시에 업데이트할 수 있습니다. 조건문을 사용해서 현재 상태에 따라 다른 이미지와 텍스트로 변경하는 똑똑한 기능을 만들 수 있습니다.

🔁 복습 문제 2: 스타일 변경과 속성 변경 함께 사용하기 (11.2.2단원 복습)

11.2.2단원에서 배운 스타일 변경과 속성 변경을 조합해서 완전한 요소 변신을 만들어보겠습니다.

// 11.2.2단원의 스타일 변경과 11.2.3단원의 속성 변경 결합하기
function createDynamicButton() {
    let actionButton = document.getElementById("actionBtn");

    if (actionButton) {
        // 1단계: 버튼의 모양 바꾸기 (스타일)
        actionButton.style.backgroundColor = "green";
        actionButton.style.color = "white";
        actionButton.style.fontSize = "18px";
        actionButton.style.padding = "10px 20px";

        // 2단계: 버튼의 기능 정보 바꾸기 (속성)
        actionButton.setAttribute("title", "클릭하면 파일을 저장합니다");
        actionButton.setAttribute("class", "save-button");

        // 3단계: 버튼의 내용 바꾸기 (텍스트)
        actionButton.textContent = "파일 저장";

        console.log("버튼이 완전히 새로운 저장 버튼으로 변신했어요!");
        console.log("- 모양: 초록색 배경에 흰색 글자");
        console.log("- 기능: 파일 저장 버튼");
        console.log("- 설명: 마우스 올리면 도움말 표시");
    } else {
        console.log("버튼을 찾을 수 없습니다!");
    }
}

// 동적 버튼 생성하기
createDynamicButton();

해답 설명: 스타일 변경(style), 속성 변경(setAttribute), 텍스트 변경(textContent)을 모두 조합하면 완전히 새로운 요소로 변신시킬 수 있습니다. 이렇게 하면 모양, 기능, 내용을 모두 바꿔서 사용자에게 완전히 다른 경험을 선사할 수 있습니다.

HTML 요소들의 신분증을 자유자재로 바꿀 수 있는 속성 바꾸기의 세계를 모두 탐험해보았습니다. 이제 여러분도 웹페이지의 요소들에게 새로운 이름표를 붙여줄 수 있는 웹 개발자가 되었습니다. 다음 시간에는 요소를 추가하고 삭제하는 또 다른 방법을 배워보겠습니다.

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
속성(Attribute)의 기본 개념	✅
getAttribute와 setAttribute 사용법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

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

추가 문제 1. ID가 "logo"인 이미지의 경로를 "newlogo.png"로 바꿔보세요.

// 답:
let logoElement = document.getElementById("logo");
logoElement.setAttribute("src", "newlogo.png");
console.log("로고 이미지 변경 완료");

추가 문제 2. 링크의 주소를 확인하고 새로운 주소로 바꿔보세요.

// 답:
let linkElement = document.getElementById("myLink");
let currentHref = linkElement.getAttribute("href");
console.log("현재 링크:", currentHref);
linkElement.setAttribute("href", "https://www.naver.com");
console.log("링크 주소 변경 완료");

추가 문제 3. 입력창의 기본값과 제목을 설정해보세요.

// 답:
let inputElement = document.getElementById("nameInput");
inputElement.setAttribute("value", "이름을 입력하세요");
inputElement.setAttribute("title", "여기에 이름을 써주세요");
console.log("입력창 속성 설정 완료");

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

답: getAttribute는 요소의 속성 값을 가져오는(읽는) 함수이고, setAttribute는 요소의 속성 값을 새로 설정하거나 바꾸는(쓰는) 함수입니다. 하나는 정보를 얻고, 하나는 정보를 바꾸는 역할입니다.

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

let element = document.getElementById("myImg");
element.setAttribute(src, newimage.jpg);

답: 두 가지 문제가 있습니다. 올바른 코드:

let element = document.getElementById("myImg");
element.setAttribute("src", "newimage.jpg");

(속성 이름과 값 모두 따옴표로 감싸야 함)

🔄 단계별 진행 과정 정리

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

1단계 과정: 이미지 요소 찾기 → 현재 경로 확인 → 새 경로 설정 → 설명 변경

2단계 과정: 링크 찾기 → 주소 변경 → 입력창 찾기 → 기본값 설정

3단계 과정: 버튼 찾기 → 현재 속성 확인 → 기존 속성 변경 → 새 속성 추가

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---