반응형 javascript36 JS document.createElement() 메서드 간단 정리 JS document.createElement() 메서드 간단 정리 지난 포스팅에서 document.createElement() 메서드를 사용하여 동적으로 HTML 요소를 생성하는 기능과 방법을 살펴보았습니다. createElement() 메서드 괄호 안에 태그 이름만 넣어주면 끝입니다! 참 쉽죠? JS로 HTML 엘리먼트 생성하기 JS로 HTML 엘리먼트 생성하기 JS로 HTML 엘리먼트 생성하기 앞선 포스팅에서 getElementById 나 querySelector를 이용해서, 기존의 DOM 객체들을 조작하는 기능과 방법들에 대해서 알아보았습니다. 이 경우에는 이미 존재하고 있던 엘리 kincoding.com createElement() 메서드로 기본 사용문법 createElement() 메서드의 기.. 2023. 2. 20. JS로 HTML 엘리먼트 생성하기 JS로 HTML 엘리먼트 생성하기 앞선 포스팅에서 getElementById 나 querySelector를 이용해서, 기존의 DOM 객체들을 조작하는 기능과 방법들에 대해서 알아보았습니다. 이 경우에는 이미 존재하고 있던 엘리먼트들이었다면, 존재하지 않는 엘리먼트를 자바스크립트를 이용해서 생성해낼 수 있을까요? 있습니다! 그런 게 있다니 참 신기하죠? 잘 몰랐던, DOM 조작의 세계로 조금 더 한 발짝 들어가보도록 합시다. 오랜 전통의 createElement 메서드 백문이 불여일견. 예제 코드를 통해 살펴봅시다. HTML 문서에는 태그를 작성한 일이 없는데, p 태그가 생겨났습니다. 바로 이 녀석 덕분입니다. document.createElement("p"); 생성하고 싶은 엘리먼트(element)를 .. 2023. 2. 19. selectbox를 JS로 컨트롤 해보기 - input, change 이벤트 selectbox를 JS로 컨트롤 해보기 - input, change 이벤트 이전 포스팅에서는 Javascript로 DOM을 조작하는데 있어, input 사용을 주로 예제로 들었습니다. 이번 포스팅에서는 input의 사촌(?) 격인 selectbox 컨트롤을 추가로 정리해보면서, 다양한 form 요소들을 사용하는 방법을 확장해 나가보기로 합니다. selectbox의 장점 input은 사용자가 직접 타이핑을 해서 입력을 하기 때문에, 입력되는 데이터를 '한정'하거나 제한을 해야하는 장치들이 필요합니다. 예를 들어 대학교 이름을 입력받아야 하는 경우 사용자에 따라서 '한국대학교', '국립한국대학교', '한국대', '한대' 등으로 각양각색으로 입력을 할 수 있기 때문입니다. 그래서 마치 4지선답 객관식 문제처.. 2023. 2. 16. float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 이전 포스팅에서 HTML/CSS를 이용해서 탭메뉴 버튼의 UI를 만들어보았습니다. float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사 kincoding.com 그러면 이제 이 메뉴를 동적으로 작동하도록 만들어야겠죠? 그런 역할을 해주는 언어가 바로 Javascript입니다. 프로그래밍 언어를 이용하는 코딩은 흥미진진합니다. 생명력을 불어 넣.. 2023. 2. 13. 이전 1 2 3 4 5 ··· 9 다음 반응형
