GAS/[Js_손코딩]8 [js] 입력문자수를 100자로 제한하기 See the Pen Untitled by ektjtthsrk (@minos79) on CodePen. 이번에 해볼코드는 웹상에서 입력값을 받을 때 100자 미만까지로 정해서 100자가 넘어가면 alert로 경고를 한 후 100자 이상의 글자는 더이상 입력 안되게 하는 코드를 만들어 보려고 한다. 코드 작성은 코드펜으로 작성하였다. textarea로 이벤트리스터의 keydown 이벤트를 발생시켜서 입력된 textarea 영역의 글자수를 센 후 alert 창을 발생시켜 100자 이상이 넘었음을 알리게 되는데, textarea.value = inputText.slice(0,100) 이코드를 삽입하지 않으면 100자가 넘은 후 alert창을 닫아도 한 두 글자가 계속 쓰여지게 된다. 쓰여짐에 신경 쓰임을 없애.. 2024. 4. 21. [js] pull-down 메뉴 사용하기 See the Pen Untitled by ektjtthsrk (@minos79) on CodePen. 2023. 9. 7. [js] dataset을 이용하여 필터링하기 https://blogpack.tistory.com/680 HTML 데이터셋(Dataset, data-*) 속성의 이해 HTML5 에서 새로 확장된 속성입니다.HTML에 추가의 커스텀 속성을 표시하는데 표준화된 방법을 제공하기 위해 제안되었습니다."data-*" 어트리뷰트로 표기하며, HTML5 표준 속성처럼 접근할 수 있습니 blogpack.tistory.com dataset을 이용하여 데이터를 관리하고 추가할 수 있는 코드를 보며 흥미로워서 관련된 코드를 이용하여 실제적으로 필터링을 하는 코드를 작성해 보려고 한다. See the Pen Untitled by ektjtthsrk (@minos79) on CodePen. 코드 진행은 이러하다. 총 3개의 버튼을 html로 작성하고 버튼과 관련된 요소를 .. 2023. 8. 6. Mini Time & Date Widget https://www.youtube.com/watch?v=USoocGbbl4s See the Pen Mini Time & Date Widget by ektjtthsrk (@minos79) on CodePen. 코드 리뷰를 시작하겠다. Html은 시계와 날짜 영역을 Div태그로 나누었다. 더보기 Css 영역 역시 grid로 시간 영역과 날짜 영역으로 나눈 뒤 세부적으로 마무리하였다. * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #1a1a1a; } .container { width: 21.78em; display: grid; position: abso.. 2023. 6. 19. 이전 1 2 다음
