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. [jQuery] 간단한 별점 기능 리뷰 폼 작성 물건을 사고 나서 리뷰를 작성하거나,온라인으로 어떤 일이든 돈을 주고 나면 후기를 작성하는 경우가 많습니다. 이런 경우 후기에는 별점이 빠질 수 없습니다.이런 별점 시스템을 통해서 사용자들은 좀 더 쉽고 편하게 이 서비스의 품질을 알 수 있고,내가 사용한 상품에 대해서도 상세한 후기를 적어 판매자와 이후 구매할 소비자들에게 좋은 영향을 끼칠 수 있습니다. 그럼 간단하게 이런 별점 시스템, 리뷰 폼을 작성하는 법을 알아보겠습니다. html 코드 작성 먼저 html 코드를 작성해 보겠습니다. 리뷰작성 폼 html 코드는 정말 간단하게 적어보았습니다. star_rating 클래스에는 별점을 표시해 줄 별의 이미지와 빈별의 이미지를 나타내줄 span태그를 사용했습니다.이.. 2023. 9. 25. [javascript] "변경사항이 저장되지 않을 수 있습니다" 경고창 안나오게 하기 (onbeforeunload) 사이트에서 무언가 작업을 하거나, 작성을 하다가 페이지를 벗어나려 할 때,"페이지를 벗어나시겠습니까? 변경사항이 저장되지 않을 수 있습니다"라는 경고창을 보신 분들 꽤 많을 것입니다. 이 경고창이 필요할 때 제때 잘 나와주면 실수로 페이지 벗어나는 것도 방지되고 좋지만,메인페이지나, 정보를 수정하고 저장버튼을 눌렀을 때 저런 메시지가 나온다면 헷갈릴 수 있겠죠.내가 수정한 정보들이 저장되지 않는다는 뜻처럼 보이니까요. 이럴 때 onbeforeunload 이벤트를 사용하여 메시지를 나오지 않게 처리한다거나,혹은 해당 메시지를 출력하게 설정할 수 있습니다. onbeforeunload 이벤트? onbeforeunload 이벤트는 보통 페이지를 벗어날 때 발생하는 이벤트입니다.예를 들어 새로고침.. 2023. 4. 21. 이전 1 2 3 4 다음 728x90 반응형
