반응형 개발이야기234 [자바스크립트] TypeIt 사용해서 타이핑 애니메이션 효과 내기 (사용법, 예제, 콜백) 아래 소스 코드는 TypeIt 라이브러리를 사용해서 텍스트에 타이핑하는 효과를 나타냈습니다. 지정된 HTML 요소에 타이핑 애니메이션을 생성하고 제어하는 데 사용됩니다. 소스코드 new TypeIt("#typeit-demo1", { // 설정 옵션들 }) ㅇ TypeIt 라이브러리를 초기화하고 #typeit-demo1이라는 HTML 요소에 타이핑 애니메이션을 적용하는 설정을 시작합니다. { speed: 100, // 글자가 타이핑되는 속도 (밀리초) waitUntilVisible: true, // 요소가 화면에 나타날 때까지 대기 여부 afterComplete: function (instance) { // 타이핑 애니메이션이 완료된 후에 실행되는 콜백 함수 document.getElementById("t.. 개발이야기/자바스크립트 2023. 9. 14. [자바스크립트] Leaflet 사용해서 지도 그리기 (사용법, 예제, 이벤트 처리) 아래 소스 코드는 Leaflet 라이브러리를 사용해서 지도를 그리고, 지도 위에 마커 생성 및 팝업 추가, 이벤트 처리의 작업을 수행하였습니다. Leaflet은 가벼운 라이브러리로, 빠른 지도 렌더링을 제공하고, 많은 웹 브라우저에서 지원되고 모바일 에서도 작동합니다. 소스코드 설명 1. 지도 초기화 및 기본 설정 var map = L.map('map').setView([37.5729, 126.9794], 15); ㅇ L.map('map'): Leaflet 지도 객체를 생성하고, map이라는 HTML 요소에 지도를 표시하도록 연결합니다. ㅇ setView([37.5729, 126.9794], 15): 지도의 초기 중심 좌표를 [37.5729, 126.9794]로, 초기 확대 레벨을 15로 설정합니다. 2.. 개발이야기/자바스크립트 2023. 9. 13. [자바스크립트] Flatpickr 사용해서 달력 만들기 (사용법, 예제, 옵션, 한국어) 아래 소스 코드는 Flatpickr 라이브러리를 사용하여 날짜, 시간 선택 등 다양한 옵션과 선택한 날짜를 처리하는 이벤트 까지 설명 드리겠습니다. Flatpickr 라이브러리는 다양한 날짜 및 시간 형식을 지원하고 사용자가 원하는 형식으로 입력을 할 수 있습니다. 또 다양한 언어로 날짜와 시간을 표시하고 옵션으로 이벤트 처리와 기능을 쉽게 추가할 수 있습니다. 소스코드 ㅇ flatpickr 함수를 사용하여 각각의 날짜 입력란에 Flatpickr 위젯을 연결하고 다양한 설정 옵션을 적용합니다. ㅇ handleDateChange 함수는 날짜가 선택될 때 실행되는 콜백 함수로, 선택된 날짜를 콘솔에 출력합니다. Flatpickr 옵션 ㅇ dateFormat : 날짜 표시 형식을 설정합니다. 예를 들어, 'Y.. 개발이야기/자바스크립트 2023. 9. 12. [MySQL] 문자열 대문자, 소문자 변환하기 (UPPER, LOWER 사용법/예제) 아래 예제 쿼리는 UPPER, LOWER 함수에 대한 설명과 사용법을 말씀 드리고, 응용할 수 있는 쿼리문을 작성하였습니다. 사용법 1. UPPER 함수 ㅇ 문자열을 모두 대문자로 변환합니다. ㅇ 사용법 : UPPER(string) SELECT UPPER('Hello, World') AS UpperCase; //출력 결과 : HELLO, WORLD 2. LOWER 함수 ㅇ 문자열을 모두 소문자로 변환합니다. ㅇ 사용법 : LOWER(string) SELECT LOWER('Hello, World') AS LowerCase; //출력 결과 : hello, world 예제 1. 문자열 비교 ㅇ 대소문자를 구분하지 않고 두 문자열을 비교하는 경우 UPPER, LOWER 함수를 사용하여 문자열을 통일시킬 수 있습.. 개발이야기/MySQL 2023. 9. 12. [MySQL] 문자열 합치기/붙이기/연결하기 (CONCAT, CONCAT_WS 사용법&예제) 아래 예제 쿼리는 CONCAT, CONCAT_WS 함수를 활용해서 문자열을 결합하고 두 함수의 차이점에 대해서 말씀 드리겠습니다. 사용법 1. CONCAT 함수 CONCAT(string1, string2, ...) SELECT CONCAT('Hello', ' ', 'World') AS result; //출력 : Hello World ㅇ CONCAT 함수는 구분자를 사용하지 않고 문자열을 단순히 연결합니다. ㅇ string1, string2, ... 결합하려는 문자열의 목록입니다. 여러 개의 인수를 전달하여 필요한 수만큼 문자열을 연결할 수 있습니다. ㅇ 예를 들어, CONCAT('Hello', 'World')는 "HelloWorld"를 반환합니다. 2. CONCAT_WS 함수 CONCAT_WS(separ.. 개발이야기/MySQL 2023. 9. 11. [MySQL] LIMIT, OFFSET 사용해서 데이터 검색하고 제한하기 아래 예제 테이블과 쿼리는 LIMIT와 OFFSET을 사용해서 데이터를 검색하고 원하는 데이터를 선택 하는 코드입니다. 사용법 1. LIMIT SELECT * FROM 테이블명 LIMIT 행의수; SELECT * FROM students LIMIT 5; ㅇ 반환하려는 행(row)의 수를 지정합니다. 2. LIMIT / OFFSET SELECT * FROM 테이블명 LIMIT 행의수 OFFSET 시작위치; SELECT * FROM students LIMIT 5 OFFSET 5; //6번째부터 10번째 학생까지의 정보를 반환합니다. ㅇ LIMIT와 OFFSET을 함께 사용하면 결과 집합에서 특정 범위의 데이터를 추출할 수 있습니다. LIMIT는 반환하려는 행 수를 지정하고 OFFSET은 시작 위치를 나타냅니.. 개발이야기/MySQL 2023. 9. 11. [HTML&CSS] details, summary 태그로 아코디언 메뉴 만들기 (접기/펼치기) 아래 소스코드는 와 태그를 함께 사용하여 아코디언 메뉴(접기/펼치기)를 구현하였습니다. 태그 펼치기/접기 가능한 세부 정보를 나타내는 데 사용됩니다. 펼쳐진 정보(내용)와 그 정보를 요약하는 제목(요약)을 함께 표시하는 데 사용됩니다. open 속성 : open 속성을 추가하면 페이지를 로드할 때 세부 정보가 열린 상태로 표시됩니다. 태그 요소 내에서 세부 정보를 요약하는 제목을 나타냅니다. 사용자가 세부 정보를 열거나 접을 때 클릭할 수 있는 버튼 또는 텍스트로 표시됩니다. 요소는 요소 내에서 하나만 사용됩니다. 사용자가 클릭하면 세부 정보를 제어하는 토글 동작을 활성화합니다. 제목 이 부분은 보통 내용에 대한 간단한 설명입니다. 추가 정보 보기 여기에는 추가 정보가 들어갑니다. 이 부분은 사용자가 클.. 개발이야기/HTML&CSS 2023. 9. 8. [HTML&CSS] datalist 태그 사용해서 자동완성 구현하기 요소는 HTML5의 폼 요소 중 하나로, 사용자가 입력 필드에 값을 입력할 때 자동 완성 제안을 제공하는 데 사용됩니다. 요소와 함께 사용되며, 사용자에게 선택할 수 있는 옵션 목록을 제시하고 선택할 수 있습니다. 요소의 list 속성을 사용하여 요소를 참조하며, 입력 필드와 연결된 옵션 목록이 자동으로 표시됩니다. 키보드를 사용하여 옵션 목록을 탐색하고 선택할 수 있으며, 마우스를 사용하여도 선택할 수 있습니다. 도시를 선택하세요: 개발이야기/HTML&CSS 2023. 9. 8. [HTML&CSS] img 태그 이미지 없을 때 대체 이미지 띄우기, 안 보이게 하기 (onerror) 아래 코드는 img 태그의 onerror 속성을 사용하여 오류 발생 시 대체 이미지를 표시하는 코드입니다. 저는 함수를 통해서 이미지 로딩 오류가 발생했을 때 실행되면서 이미지 경로를 변경하고, alt 속성까지 변경하였습니다. 대체 이미지가 필요 없으시면 오류 발생 시 이미지 요소를 숨기는 코드를 작성하시면 됩니다. 개발이야기/HTML&CSS 2023. 9. 8. [MySQL] WITH ROLLUP 사용해서 데이터 합계, 집계 하기 WITH ROLLUP은 결과 집합에 대한 부분 합계 및 총합계를 생성하는 데 사용되는 기능입니다. GROUP BY 절과 함께 주로 사용되지만 다른 집계 함수와 함께 사용될 수도 있습니다. WITH ROLLUP을 사용하면 원본 데이터에 대한 하위 합계와 최종 합계를 표시할 수 있으며, 이를 통해 데이터 요약 및 분석이 더욱 용이해집니다. 사용법 SELECT column1, column2, ..., 집계함수 AS alias FROM table GROUP BY column1, column2, ..., WITH ROLLUP; 검색할 열을 나열하고 필요한 경우 집계 함수를 사용하여 계산된 결과를 가져옵니다. GROUP BY 구문을 통해 결과를 그룹화할 열을 나열합니다. 이 열을 기준으로 데이터가 그룹화됩니다. 마.. 개발이야기/MySQL 2023. 9. 7. [MySQL] sql_mode=only_full_group_by 에러 간단히 해결하기 (sql_mode 변경하기) 아래 에러는 sql_mode=only_full_group_by 모드에서 쿼리를 실행할 때 발생합니다. only_full_group_by 모드가 설정되어 있을 때 GROUP BY 절에 있는 열 외에도 SELECT 절에 있는 열에 대한 제약을 부과합니다. Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column '' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by 오류 내용 : 이 메시지에서 ' '라는 열이 GROUP BY 절에 포함되지 않았.. 개발이야기/MySQL 2023. 9. 6. [MySQL] JOIN(조인) 설명과 사용법 예제 (INNER, LEFT, RIGHT) MySQL에서 JOIN은 데이터를 추출하기 위해서 두 개 이상의 테이블을 연결하고 데이터를 검색하는 데 사용되는 중요한 SQL 연산입니다. JOIN으로 테이블 간의 관계를 활용해서 복잡한 쿼리문을 작성할 수도 있습니다. JOIN의 유형에 대해 설명드리겠습니다. JOIN 유형 1. INNER JOIN 두 개 이상의 테이블에서 일치하는 행만을 반환합니다. 테이블 사이의 교집합을 찾는 데 사용됩니다. 2. LEFT JOIN 또는 LEFT OUTER JOIN LEFT JOIN은 왼쪽 테이블의 모든 행과 오른쪽 테이블에서 일치하는 행을 반환합니다. 만약 오른쪽 테이블에 일치하는 행이 없으면 NULL 값으로 반환됩니다. 이를 사용하면 주로 왼쪽 테이블의 모든 레코드와 연결된 오른쪽 테이블의 정보를 가져올 때 유용합.. 개발이야기/MySQL 2023. 9. 6. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음 💲 추천 글 반응형