일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- NAV
- css
- Sticky
- width
- scroll
- React
- 반복문
- pointermove
- Hover
- 확장성
- addEventListener
- For
- html
- forEach
- localstorage
- getBoundingClientRect
- JavaScript
- insertAdjacentHTML
- 이벤트리스너
- swiper
- 스크롤
- mousemove
- input
- NodeList
- 애니메이션
- classList
- Animation
- swiperjs
- scrollY
- scrollevent
- Today
- Total
목록input (3)
ZeroToHunnit Coding
프로젝트라기엔 거창한 멘트지만 프로젝트 하나에 필요한 아주 기초적인 공부는 끝난 듯하다. 근데 이렇게 공부하고 나니까 생각보다 간단한데 이걸로 프론트앤드를....? 이라는 생각이 들기도 하고 큰 범위안에 완전 발톱만큼 한거같은 느낌도 드니까 막막하다. 그래도 아자자!!!! 1. input 태그 role 종류: text, range, checkbox, date 등등 필요할 때마다 찾으면 될듯, 근데 이거는 그냥 html 내용이긴함.. 2. input태그에 이벤트리스너 걸고 싶으면 onChange / onInput 사용하면 됨. 바닐라 자바스크립트에서도 있었는데 기능은 똑같지만 change 문법이 조금 다르긴했음. 3. 이벤트버블링을 막고싶으면 이벤트버블링이 발생하는 코드에 파라미터 뚫고 e.stopProp..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2StmM/btsDhgqoE3S/tFIukRU67kshwGSk6n4rxk/img.gif)
화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다. HTML 무엇을 사실건가요? 모자 셔츠 free 사이즈를 선택해주세요. 95 100 105 form 태그 안에 select문 3개를 미리 담아두고 result값을 출력할 곳을 따로 만들어 두었다. CSS form{ margin-left: 200px; margin-top: 200px; } #apparel, #hat-size, #shirts-size{ font-size: 40px; padding: 40px; } #hat-size, #shirts-size{ visibility: hidden; opacity: 0; transition: all 0.3s; position: absolute; } .on{ visibility: visible ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GcVfn/btsCxHXURqF/a1NkLAKylEEA19iv5kdvtK/img.gif)
두 input중 위에 것이 input 이벤트리스너, 밑에 것이 change 이벤트리스너를 쓴 것이다. 우선 조건은 6자이상 입력하는 것이다. 보기에 두개의 차이는 input의 경우 값이 입력될 때마다 숫자가 변하는 것을 볼 수 있는데, change는 마우스커서를 다른 곳으로 옮기면 값이 변한다. HTML (input) 아이디를 입력하세요. (change) 아이디를 입력하세요. HTML은 단순하게 form태그 안에 input태그 하나만 넣어주고 밑에 설명만 적어준다. CSS #input, #change{ margin-left: 300px; margin-top: 100px; } .input-box, .change-box{ width: 500px; height: 100px; font-size: 40px; } ..