HTML5 검색 결과

해당 글 4건

Input tag와 label tag

이글에서는 html에서 Input tag와 label tag의 대해서 간단하게 알아보자. 우선 코드를 보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Email Password Repeat Password User Name Cancel Submit Colored by Color Scripter cs input tag는 form에서 사용자에게 입력 받는 역할을 한다. type으로 email, password, text, number 등을 지정할 수 있고 placeholder로 어떤 입력을 받는지에 대한 설명을 써넣을수도 있다. 또한 전체 form이 submit 됐을 때 name 속성의 값으로 서버에게 전달 된다. 따라서 서버쪽에서는 input t..
HTML5/HTML 2020. 12. 7. 18:02

이벤트 위임 그리고 this, e.currentTarget, e.target

이번 글에서는 이벤트 위임에 대해서 알아보자 우선 결과물 모습 부터 보자. 아래와 같은 html 코드가 있을 때, 클릭 되는 대상에게 active 클래스를 붙여주고 기존에 active 클래스를 가지고 있는 대상은 active 클래스를 지워주는 방식으로 구현을 하면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .active{ color : red; } DOM (Document Object Model) apple banana melon Colored by Color Scripter cs 이때 각 li 들은 ul의 하위 태그들 이므로 ul을 가져와서 for문을 이용해서 접근하여 직접 이벤트 처리를 할 수 도있다. 하지만 모든 이벤트를 감지 할 수 있는..
HTML5/JavaScript 2020. 11. 19. 15:36

DOM Elememt를 가져와서 Attribute 값을 조회, 변경 해보자.

JavaScript에서 HTML DOM Element의 속성 값을 조회,변경하는 방법에 대해서 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 DOM (Document Object Model) apple banana melon Colored by Color Scripter cs 위와 같은 HTML 코드가 있을때 fruit 클래스의 포함된 리스트 중 banana를 선택하고 Atrribute를 조회,변경,추가,삭제를 해보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var fruit = document.querySelectorAll('.fruit'); console.log(fruit); var banana = fruit[1] console.log(banana..
HTML5/JavaScript 2020. 11. 8. 19:37

선택자는 QuerySeletor, QuerySeletorAll를 사용하자

JavaScript에 HTML DOM Element를 선택하는 방법이 여러가지 있지만 그 중에서 QuerySeletor, QuerySeletorAll에 대해서 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 DOM (Document Object Model) apple banana melon Colored by Color Scripter cs 위와 같은 HTML 코드가 있을때 querySelectorAll과, querySelector를 사용해서 원소에 접근해보자. 파라미터는 선택하고자 하는 원소의 CSS 선택자를 넣어주면 된다. 1 2 3 4 5 6 var fruit = document.querySelectorAll('.fruit'); console.log(fruit); var ..
HTML5/JavaScript 2020. 11. 8. 18:32