본문 바로가기
728x90
반응형

HTML22

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