JavaScript로 동적으로 HTML 요소 만들기 💻
JavaScript로 동적으로 HTML 요소 만들기 💻 웹 개발을 배우는 여정에서 JavaScript는 웹 페이지를 생동감 있게 만드는 데 필수적인 도구입니다. 오늘은 JavaScript를 사용하여 HTML 요소를 동적으로 생성하는 방법에 대해 배워보겠습니다. 이 기술은 웹 페이지에 사용자 상호작용에 따라 새로운 정보를 표시하거나, 리스트를 업데이트하고, 심지어 사용자 입력에 따라 새로운 폼 요소를 추가하는 등 다양한 방법으로 활용될 수 있습니다. 기본적인 HTML 요소 생성하기 JavaScript를 사용하여 HTML 요소를 만드는 것은 생각보다 간단합니다. 아래의 예제를 보면서 기본적인 방법을 배워봅시다. 위 코드는 새로운 요소를 생성하고, 그 안에 텍스트를 추가한 다음, 이 를 문서의 에 추가합니다. 이렇게 간단한 몇 단계로 웹 페이지에 새로운 요소를 추가할 수 있습니다. 요소에 스타일 추가하기 동적으로 생성된 요소에 스타일을 추가하는 것도 중요합니다. JavaScript를 사용하여 CSS 스타일을 직접 적용해 보겠습니다. 위 코드는 에 배경색, 패딩, 테두리 둥근 모서리, 상단 여백, 글자 색상, 글꼴을 설정합니다. 이렇게 JavaScript를 사용하여 요소의 스타일을 동적으로 조정할 수 있습니다. 이벤트 리스너 추가하기 웹 페이지에 동적 요소를 추가하는 것뿐만 아니라, 사용자와의 상호작용을 위해 이벤트 리스너도 추가할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 새로운 요소가 생성되도록 해봅시다. 이 코드는 사용자가 버튼을 클릭할 때마다 새로운 를 생성하고, 페이지에 추가합니다. 이벤트 리스너를 사용하여 웹 페이지의 상호작용성을 높일 수 있습니다. JavaScript를 사용하여 동적으로 HTML 요소를 생성하고 조작하는 방법을 배웠습니다. 이 기술을 활용하여 사용자 경험을 향상시키고, 보다 동적이고 상호작용적인 웹 페이지를 만들어 보세요. Happy coding! 🚀
a month ago
