oninput2 [ HTML / CSS ] 늘어나는 textarea 만들기 오늘은 늘어나는 textarea 를 구현해보겠습니다. 즉, 입력한 글자가 늘어남에 따라 textarea 의 높이도 길어지게 하겠습니다. 전체 시연 영상은 다음과 같습니다. 먼저 다음과 같이 textarea 요소를 body 태그 안에 작성합니다. rows="1" 속성으로 인해서 처음 시작 높이는 1줄이 됩니다. 그리고 oninput 이벤트 속성은 사용자가 요소에 정보를 입력하거나 요소의 값이 변경되면 실행됩니다. 즉, textarea 요소에 사용자가 입력을 할 때마다 해당 textarea의 높이는 스크롤높이와 동일하게 되고, 따라서 textarea의 높이는 고정되지 않고 사용자의 줄바꿈에 따라, 혹은 입력값이 늘어나고 줄어들 때마다 달라지게 됩니다. 영상에서 보이는 것처럼 입력 내용의 길이에 따라 text.. 2022. 8. 21. [HTML / CSS] 범위 슬라이더 (range slider) 사용해보기 오늘은 range slider 를 사용해보겠습니다. 먼저 가장 기본적인 형태를 만들어보겠습니다. 태그의 type 속성을 "range" 로 설정하면 아래와 같은 형태의 range slider 가 만들어집니다. 이제 css 를 입혀 보겠습니다. Value: type 이 "range" 이고, id 가 "myRange" 이며 class명이 "slider"인 엘리먼트를 만듭니다. 최댓값과 최솟값을 각각 1, 100으로 지정하고, 초기값은 100으로 설정합니다. 그리고 class명이 "slidecontainer"인 태그로 감싸줍니다. 그리고 다음과 같은 css 코드를 작성합니다. body { margin: 0 auto; width: 50%; } .slidecontainer { width: 100%; margin-t.. 2022. 5. 23. 이전 1 다음
