[JavaScript] 바닐라 자바스크립트(Vanilla JavaScript)

728x90

바닐라 자바스크립트로 웹 페이지를 동적으로 만들기 🌐✨

안녕하세요, 웹 개발에 관심 있는 여러분! 오늘은 프레임워크나 라이브러리에 의존하지 않고, 바닐라 자바스크립트(Vanilla JavaScript)만을 사용하여 웹 페이지를 동적으로 만드는 방법에 대해 알아보겠습니다. 바닐라 자바스크립트는 추가적인 라이브러리 없이 순수한 자바스크립트를 의미합니다. 이를 통해 웹 페이지에 생명을 불어넣고, 사용자의 상호작용에 반응하는 웹 사이트를 만들 수 있습니다.

바닐라 자바스크립트란?

바닐라 자바스크립트는 특정 프레임워크나 라이브러리를 사용하지 않는 순수한 자바스크립트를 말합니다. 이는 웹 개발의 기초를 탄탄히 하고, 웹의 기본 동작 원리를 이해하는 데 큰 도움이 됩니다.

웹 페이지를 동적으로 만드는 첫걸음

1. HTML 구조 설정

웹 페이지의 기본 구조를 HTML로 작성합니다. 예를 들어, 사용자가 상호작용할 수 있는 버튼과 텍스트를 표시하는 영역을 만들어봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Web Page</title>
</head>
<body>
    <button id="changeButton">Click Me</button>
    <p id="textArea">여기에 텍스트가 변경됩니다.</p>
</body>
</html>

2. 자바스크립트로 상호작용 추가

이제 버튼에 클릭 이벤트 리스너를 추가하여, 사용자가 버튼을 클릭할 때마다 텍스트 영역이 변경되도록 합시다.

document.addEventListener('DOMContentLoaded', function() {
    var changeButton = document.getElementById('changeButton');
    var textArea = document.getElementById('textArea');

    changeButton.addEventListener('click', function() {
        textArea.textContent = '텍스트가 변경되었습니다!';
    });
});

3. 스타일링으로 생동감 부여

CSS를 사용하여 웹 페이지에 스타일을 추가하고, 동적으로 변화하는 요소에 애니메이션 효과를 줄 수 있습니다.

#textArea {
    transition: all 0.3s ease;
    color: blue;
}

#textArea.change {
    color: red;
    font-weight: bold;
}

이제 자바스크립트로 클래스를 변경해 동적인 효과를 줍시다.

changeButton.addEventListener('click', function() {
    textArea.textContent = '텍스트가 변경되었습니다!';
    textArea.classList.toggle('change');
});

여기에 텍스트가 변경됩니다.

마무리하며...

바닐라 자바스크립트를 활용하면, 프레임워크나 라이브러리 없이도 충분히 동적이고 상호작용이 풍부한 웹 페이지를 구현할 수 있습니다. 이번 예제를 시작으로 자바스크립트를 활용한 다양한 웹 개발 기술을 탐구해보세요. 코딩의 세계는 무한한 창의성을 허용합니다!

웹 개발 여정에서 여러분의 무한한 가능성을 발견하기를 바랍니다! 💻✨

Reference:

JavaScript | MDN

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache

developer.mozilla.org

W3Schools Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.