오늘은 html, css, javascript를 이용해 글자수 세기 웹페이지를 한 번 만들어 보겠습니다.
먼저 HTML의 기본 구조를 짜주겠습니다.
이제 글자를 입력할 입력 영역을 만들겠습니다. 이 부분을 만들기 위해 textarea 태그를 사용해줍니다.(새로 추가된 부분은 진한 텍스트로 표시하겠습니다).
이제 웹 브라우저로 HTML파일을 실행시켜보면 아래와 같이 나옵니다.
보시면 글을 입력하는 부분이 너무 작습니다. 이걸 textarea태그의 rows와 cols 속성을 이용해 더 크게 만들어 주겠습니다.
실행시켜보면 텍스트 입력 영역이 더 커진것을 확인할 수 있습니다.
이제 글자수가 얼마인지 결과값을 출력해 줄 곳을 만들어 봅시다. 결과값은 input태그를 이용해 textarea 아래줄에 input 상자 안에 출력되도록 하겠습니다.
HTML로 필요한 부분들은 모두 만들었으니 javascript를 이용해 textarea 상자에 있는 글자 수를 input 상자에 표시하도록 하겠습니다.
먼저 계산하는 기능인 calc() 함수를 정의해 주겠습니다. javascript 코드는 script태그안에 넣어주도록 하겠습니다.
위 코드는 textarea에 입력된 문자열의 길이를 input의 value에 대입한다는 의미입니다. input value의 초기값은 0이지만 textarea에 문자가 입력되면 문자열의 길이(공백 포함)가 input 상자 안에 value로 출력되는 것입니다.
이제 이 코드가 textarea안에서 키보드를 누를때, 키보드에서 손을 뗄 때, 키보드를 누르고 있을 때 실행되도록 하기 위해 아래와 같이 코드를 짜 줍니다.
그럼 위와 같이 기능이 실제로 구현되는 것을 확인 할 수 있습니다.
이제 마무리로 input 태그의 style 속성에 css를 적용해 border을 지우고 input 상자뒤어 '자'라고 추가해주도록 하겠습니다.
완성되었습니다!
오늘은 html, css, javascript를 이용해 글자 수 세기 웹 페이지를 만들어 보았습니다. 간단하지요?(저도 만들다 보니깐 생각보다 되게 간단해서 놀랐습니다). 너무 밋밋하다고 생각하시는 분들은 css를 이용해 입맛대로 디자인을 하시면 됩니다. 그럼 오늘은 여기까지.
감사합니다.
'개발 공부 > WEB' 카테고리의 다른 글
[React] <></>에 key props 추가하는 방법 (0) | 2022.03.30 |
---|---|
[React] 배열 렌더링 시 key props를 사용하는 이유 (0) | 2022.03.27 |
[React] setState가 바로 적용되지 않는 이유 (1) | 2022.02.12 |
[Next.js] Data Fetching을 하는 4가지 방법 (0) | 2021.12.21 |
[주니어 개발자의 퇴근 후 글쓰기] Spring Framework (0) | 2021.12.07 |