- 문서객체모델(DOM) - HTML 페이지를 요소 다루기
- textarea의 scrollHeight
Javascript 글자 입력할 때 textarea 자동 높이 조절
textarea에 텍스트를 입력할 때, textarea의 높이가 텍스트의 크기에 맞춰서 자동 조절되는 예제를 만들어 봅니다. 기본 구동 원리는 textarea의 height를 scrollHeight로 설정하는 것에 있습니다.
textarea에 텍스트를 입력할 때, textarea의 높이가 텍스트의 크기에 맞춰서 자동 조절되는 예제를 만들어 봅니다. 기본 구동 원리는 textarea의 height를 scrollHeight로 설정하는 것에 있습니다.
Javascript를 통해서 textarea의 높이를 내용물 텍스트의 높이에 맞게 자동 조절하도록 만듭니다. 인터넷 브라우저 창 크기가 변동할지라도, 동적으로 텍스트 높이를 계산하여 textarea의 높이를 조절합니다.
문서 객체 모델 DOM이란, HTML 문서를 객체화 시킨 것이다. HTML 문서는 DOM에서 노드로 표현되고, 자바스크립트는 노드관련 객체들을 통해서 이러한 노드들을 불러와서 수정하거나 지우고, 또는 추가하면서 HTML 문서를 조작한다.
자바스크립트로 HTML 페이지를 직접 수정하지 못하기 때문에, 문서객체모델(DOM)이 필요합니다. 문서객체모델은 무엇이고, 왜 객체 형태를 가져야 하며, 자바스크립트는 어떻게 DOM과 상호작용하는지 이야기합니다.
새로운 HTML 요소를 생성하여 기존 웹페이지에 동적으로 추가하는 방법에 대해서 이야기 합니다. 이 방법은 3 단계로 나눠지는데, 새로운 요소 생성하는 파트, 더미 요소를 지우는 파트, 그리고 생성한 요소를 넣는 파트로 구현됩니다. 각각의 파트에서 사용되는 메소드들을 알아봅니다.