728x90 반응형 HTML22 [jQuery] textarea 크기 자동으로 늘리는 방법 서문 텍스트에리어를 사용하다 보면 textarea 공간은 작은데 글을 쓰면 옆에 스크롤이 생기고 내가 손수 크기를 키워주려니 너무 귀찮고, 불편하고 "내가 글을 작성한 만큼 textarea 크기가 자동으로 커지면 안되나?" 라는 생각 한 번쯤 해보셨다면 잘 찾아오셨습니다. 이번 포스팅으로 textarea에 입력된 글만큼 자동으로 크기가 조절되는 방법을 알아보겠습니다. 자동으로 늘어나는 textarea 만들기 먼저 html로 textarea를 간단하게 하나 만들어 줍니다. 현재 textarea박스는 기본으로 제공하는 박스로 글을 작성하면 위의 이미지와 같이 스크롤바가 생성되고 이전 작성 내용들은 보이지 않게 위로 올라가게 됩니다. 이제 자동으로 textarea의 크기를 늘려줄 함수를 작성합니다. fu.. 2024. 6. 15. [HTML/PHP] php를 활용하여 데이터를 엑셀 파일로 저장하는 방법 직접 db를 조작할 수 있는 개발자는 mysql이나 여러 방법을 이용해서 db데이터를 엑셀로 다운로드할 수 있지만, 페이지를 사용하는 사용자 입장에서는 엑셀로 다운받을 방법이 없습니다. 쇼핑몰 방문통계나, 회원관리 등등 해당 리스트를 엑셀로 다운로드하여서 쉽게 사용자들은 관리하고 싶어 하는데요. 이럴 때 사용자들을 위해 엑셀 다운로드 기능을 넣어주면 좋습니다. 엑셀 다운로드 페이지 생성하기 excel_down.php 파일을 생성합니다. 지금 생성하는 페이지에 접속하면 바로 엑셀 파일이 다운로드되는 페이지를 생성해 보도록 하겠습니다. header( "Content-type: application/vnd.ms-excel; charset=ks_c_5601-1987" ); header( "Content-Disp.. 2024. 2. 27. [HTML/jQuery] 마우스 드래그로 크기 조절 가능한 텍스트 박스 만들기 + 텍스트 박스 크기에 따라 글자 수 제한 서문 html의 태그 중 input태그의 텍스트 박스는 textarea와 다르게 마우스 드래그로 사용자가 크기 변경을 할 수 없습니다. 이런 텍스트 박스를 사용자 마음대로 크기를 조절할 수 있게 변경하려면 어떻게 해야 될까요? 이번 포스팅은 마우스 드래그로 텍스트 박스의 크기를 조절하는 방법에 대해서 알아보겠습니다. 본문 텍스트 박스 만들기 간단하게 텍스트 박스를 하나 만들어줍니다. input { resize:horizontal; /* 가로 크기만 조절 가능하도록 설정 */ overflow: hidden; /* 크기가 변경될 때 내용을 잘라내지 않도록 설정 */ } css도 간단하게 설정을 해줍니다. 자바스크립트 작성 드래그 이벤트를 처리할 자바스크립트를 작성해 주겠습니다. const resizableI.. 2024. 1. 29. [jQuery/html] 특정 문자열 포함 요소 선택하기: 실시간 검색 페이지 만들기 예제 (contains()) 특정 문자열을 포함한 요소를 선택 실시간 검색 페이지 만들기 서문 이번 포스팅은 제이쿼리와 정규식을 활용하여 검색을 하면 실시간으로 검색내용과 일치하는 메뉴만 보여주는 페이지를 만들어 보도록 하겠습니다. 이번 코딩에서 핵심은 :contains()를 사용하여 내가 입력한 검색어와 동일한 내용을 가진 요소를 찾아내는 것입니다. 위의 이미지처럼 검색창에 찾고 싶은 내용을 검색하면 검색한 내용과 일치하는 글을 형광색으로 하이라이트 처리하고, 어떤 탭에 몇 개의 일치하는 결과를 가지고 있는지 해당 탭을 통해서 보여주게 합니다. 본문 html 코드 작성 먼저 화면으로 보일 html 코드를 작성해 보겠습니다. CSS는 취향에 맞게 style 태그를 통해 만들어보세요. 🔎 질문 탭 1 질문 탭 2 질문 탭 3 질문 탭 4 Q. 첫번째 질문 test. Q. 두번째 질문 Q. 세번.. 2023. 12. 13. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
