일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- data structure
- 자료구조
- 이종호
- javascript
- 자바스크립트
- TDD
- 자바스크립트 자료구조
- 비동기
- IOS
- hokidoki
- 힛잇
- queue
- Svelte
- 개발자
- 스위프트
- Hitit
- HTML
- 리액트 예제
- 자스민
- 호키도키
- 스벨트
- 개발
- 계명대 이종호
- react
- 계명대
- 리액트
- 호키스
- jest
- hokeys
- SWIFT
- Today
- Total
목록DOM (2)
Dog foot print
제이쿼리를 사용하면 toggleclass 나 addClass , removeClass 등 스타일링을 간단하게 변환할 수 있지만 바닐라 js에서는 document객체 를 이용해 className을 스트링으로 제어해야 한다. 해당 헤드에 대한 html 과 css 정보는 https://hokeydokey.tistory.com/33 이 링크에서 받을 수 있다. span 추가하기 jasmin 이 div안에 있는데 우리가 기대하는건 logo를 클릭했을때 컬러의 색상이 변경해야 함으로 logo를 span으로 감싸준다. 로직 구상 하기 span 태그를 건들면 해당 로고의 색상이 변경되어야 한다. 그럼 우리가 필요한 것들은 document.getElementById()로 해당 요소를 가져온다음 onclick 이벤트로 해..
자바스크립트를 조금 씩 더 공부하다보면 동적으로 html 요소들과 서로 상호작용을 하며 페이지를 만들고 싶어 할 것이다. 예를 들면 버튼을 누르면 달력 api를 통해 새로운 달력을 그리고 싶은데 html에서는 이를 해결할 방법이 없고 새로운 달력을 만들기 위해서는 document 객체라는 것을 사용해서 웹페이지에 새로운 형태의 태그들을 구성해야 한다. Document 객체란 브라우저에서 문서를 읽으면 특변한 객체를 만든다. 바로 window객체 이다. 이 window객체는 최상위 객체로써 6개의 프로퍼티를 가지고 있는데 그 중 html의 코드들이 파싱되어 javascript 정보로 가지고 있는 것이 document 객체입니다. Dom 객체의 사용 dom객체를 사용하는 이유는 html 태그에 이벤트를 설정..