본문 바로가기
728x90
반응형

코딩/jQuery17

[jQuery] textarea 크기 자동으로 늘리는 방법 서문 텍스트에리어를 사용하다 보면 textarea 공간은 작은데 글을 쓰면 옆에 스크롤이 생기고 내가 손수 크기를 키워주려니 너무 귀찮고, 불편하고 "내가 글을 작성한 만큼 textarea 크기가 자동으로 커지면 안되나?" 라는 생각 한 번쯤 해보셨다면 잘 찾아오셨습니다. 이번 포스팅으로 textarea에 입력된 글만큼 자동으로 크기가 조절되는 방법을 알아보겠습니다.  자동으로 늘어나는 textarea 만들기  먼저 html로 textarea를 간단하게 하나 만들어 줍니다.  현재 textarea박스는 기본으로 제공하는 박스로 글을 작성하면 위의 이미지와 같이 스크롤바가 생성되고 이전 작성 내용들은 보이지 않게 위로 올라가게 됩니다. 이제 자동으로 textarea의 크기를 늘려줄 함수를 작성합니다. fu.. 2024. 6. 15.
[HTML/jQuery] 마우스 드래그로 크기 조절 가능한 텍스트 박스 만들기 + 텍스트 박스 크기에 따라 글자 수 제한 서문 html의 태그 중 input태그의 텍스트 박스는 textarea와 다르게 마우스 드래그로 사용자가 크기 변경을 할 수 없습니다. 이런 텍스트 박스를 사용자 마음대로 크기를 조절할 수 있게 변경하려면 어떻게 해야 될까요? 이번 포스팅은 마우스 드래그로 텍스트 박스의 크기를 조절하는 방법에 대해서 알아보겠습니다. 본문 텍스트 박스 만들기 간단하게 텍스트 박스를 하나 만들어줍니다. input { resize:horizontal; /* 가로 크기만 조절 가능하도록 설정 */ overflow: hidden; /* 크기가 변경될 때 내용을 잘라내지 않도록 설정 */ } css도 간단하게 설정을 해줍니다. 자바스크립트 작성 드래그 이벤트를 처리할 자바스크립트를 작성해 주겠습니다. const resizableI.. 2024. 1. 29.
[jQuery] 공공데이터 포털 api를 사용해서 사업자 등록 정보 확인하는 방법 (api 사용방법, 사업자번호 조회) 서문 공공데이터포털 홈페이지에는 수많은 데이터들이 저장되어 있고, 해당 데이터를 누구나 활용할 수 있도록 공개해 두고 쓸 수 있게 해 두었는데요. 그냥 데이터를 엑셀로 받아서 사용하고 확인해 볼 수도 있지만, api를 통해 좀 더 쉽게 데이터를 활용할 수 있습니다. 이번 포스팅에서는 공공데이터 포털에서 api를 통해 사업자번호를 사용하여 사업자등록정보 진위확인 및 상태조회를 해보도록 하겠습니다. 본문 1. 공공데이터 포털 홈페이지 접속 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 먼저 위의 링크를 통해, 혹은 포털.. 2024. 1. 18.
[jQuery/html] 특정 문자열 포함 요소 선택하기: 실시간 검색 페이지 만들기 예제 (contains()) 특정 문자열을 포함한 요소를 선택 실시간 검색 페이지 만들기 서문 이번 포스팅은 제이쿼리와 정규식을 활용하여 검색을 하면 실시간으로 검색내용과 일치하는 메뉴만 보여주는 페이지를 만들어 보도록 하겠습니다. 이번 코딩에서 핵심은 :contains()를 사용하여 내가 입력한 검색어와 동일한 내용을 가진 요소를 찾아내는 것입니다. 위의 이미지처럼 검색창에 찾고 싶은 내용을 검색하면 검색한 내용과 일치하는 글을 형광색으로 하이라이트 처리하고, 어떤 탭에 몇 개의 일치하는 결과를 가지고 있는지 해당 탭을 통해서 보여주게 합니다. 본문 html 코드 작성 먼저 화면으로 보일 html 코드를 작성해 보겠습니다. CSS는 취향에 맞게 style 태그를 통해 만들어보세요. 🔎 질문 탭 1 질문 탭 2 질문 탭 3 질문 탭 4 Q. 첫번째 질문 test. Q. 두번째 질문 Q. 세번.. 2023. 12. 13.
728x90
반응형