개발이야기236

• 

  [HTML&CSS] :not(), :has() 가상 클래스 선택자 사용하기 (예제, 설명) 아래 소스코드는 :not()과 :has() 선택자를 사용하여 HTML 요소를 선택하고 다양한 스타일을 적용하는 예제입니다. 설명 1. :not() 선택자 ㅇ :not() 선택자는 괄호 안에 지정된 조건을 만족하지 않는 요소를 선택합니다. 이 선택자는 특정 요소나 클래스를 제외하고 스타일을 적용하고 싶을 때 유용합니다. 2. :has() 선택자 ㅇ :has() 선택자는 괄호 안에 지정된 조건을 만족하는 자식 요소를 포함하는 부모 요소를 선택합니다. 이것은 부모와 관련된 스타일링이나 자식의 존재 여부에 따라 스타일을 적용하고 싶을 때 유용합니다. p:not(.highlight) { color: red; } ㅇ .highlight 클래스를 가진 요소를 제외한 모든 요소의 글꼴 색상을 빨간색으로 변경합니다. d.. 개발이야기/HTML&CSS 2023. 10. 5.

• 

  [자바스크립트] e.preventDefault(), e.stopPropagation() 이벤트 제어하기 (사용법, 예제, 차이점) 아래 소스코드는 e.preventDefault(), e.stopPropagation() 메서드를 활용해서 이벤트 처리에 대한 동작을 이해하고 확인하는 예제입니다. e.preventDefault() ㅇ 이벤트의 기본 동작을 막을 때 사용됩니다. ㅇ 태그의 링크 이동을 e.preventDefault() 사용해서 이동을 막을 수 있습니다. document.querySelector('a').addEventListener('click', function(e) { e.preventDefault(); // 링크 클릭 시 기본 동작인 페이지 이동을 막음 }); e.stopPropagation() ㅇ 이벤트의 전파를 중단시킵니다. ㅇ 이벤트는 DOM 트리를 따라 상위 요소로 전파되는데, 이 메서드를 사용하면 현재 이벤트.. 개발이야기/자바스크립트 2023. 10. 5.

• 

  [자바스크립트] JSON.stringify(), JSON.parse() 사용해서 JSON 데이터 변환하기 (예제, 사용법) JavaScript에서 JSON은 데이터를 활용하기 위해서는 JSON.stringify(), JSON.parse() 함수는 꼭 알아두어야 합니다. JSON은 다양한 프로그래밍 언어에서 지원되며, 데이터 교환할때 표준적인 형식이며 구조화된 형식이여서 보안에도 안전합니다. JSON.stringify() ㅇ JavaScript 객체나 값을 JSON 문자열로 변환하는 데 사용됩니다. ㅇ JSON 데이터를 생성하고 JavaScript 객체를 문자열로 직렬화합니다. ㅇ 기본적으로는 모든 객체 속성과 값을 문자열로 변환합니다. 선택적으로 두 번째 인수를 사용하여 원하는 속성만 직렬화하거나 변환 시 공백과 들여쓰기를 제어할 수 있습니다. ㅇ JSON.stringify() 함수를 사용하여 person 객체를 JSON 형.. 개발이야기/자바스크립트 2023. 10. 4.

• 

  [자바스크립트] sort()를 활용해서 배열 정렬하기 (사용법, 예제) 아래 소스코드는 sort() 메서드를 활용해서 배열을 오름차순, 내림차순으로 정렬하는 코드입니다. 버튼 클릭 이벤트를 통해서 배열이 정렬되고 정렬된 결과가 페이지에 표시됩니다. 사용법 ㅇ sort() 메서드는 배열을 정렬하는 데 사용됩니다. ㅇ 배열의 요소를 문자열로 변환하고 이를 유니코드 코드 포인트 값에 따라 정렬합니다. ㅇ 숫자 배열을 올바르게 정렬하려면 비교 함수를 사용해야 합니다. 비교 함수는 두 개의 인수를 받고, 비교 결과에 따라 정렬 순서를 결정합니다. var numbers = [10, 5, 8, 1, 7]; numbers.sort(function(a, b) { return a - b; // 오름차순 정렬 }); ㅇ compareFunction(a, b)이 0보다 작으면 a는 b보다 작은 .. 개발이야기/자바스크립트 2023. 10. 4.

• 

  [jQuery] remove(), empty() 메서드 사용방법, 예제 (요소 제거와 내용 비우기) 아래 소스코드는 remove()와 empty() 메서드를 각각의 버튼으로 요소를 제거하고, 요소를 비우는 것을 확인하고 콘텐츠 추가 버튼을 통해 두 영역의 차이점을 확인하고 있습니다. remove(), empty() 1. remove() 메서드 ㅇ remove() 메서드는 선택한 DOM 요소를 완전히 제거합니다. 선택한 요소와 해당 하위 요소가 모두 제거됩니다. $("#myDiv").remove(); 2. empty() 메서드 ㅇ empty() 메서드는 선택한 DOM 요소의 내용(하위 요소 포함)을 제거합니다. 요소 자체는 그대로 남아 있지만 내용이 비워집니다. $("#myDiv").empty(); remove() 메서드는 선택한 요소와 그 하위 요소를 완전히 제거하고, empty() 메서드는 선택한 요.. 개발이야기/jQuery 2023. 9. 25.

• 

  [HTML&CSS] abbr, cite 태그 사용해서 약어와 줄임말, 인용과 출처 표시하기 아래 소스코드는 와 태그의 title 속성을 활용해서 줄임말과 인용된 추가 정보를 제공하고 있습니다. 간단한 소스코드이니 확인하시고 응용하시면 됩니다. 태그 설명 1. 태그 ㅇ 약어 또는 줄임말을 정의하고 해당 약어의 전체 의미를 제공하는 데 사용됩니다. ㅇ 옵션(title) : 약어나 줄임말의 전체 설명을 포함하며, 마우스를 해당 약어 위로 올렸을 때 툴팁으로 표시됩니다. 이것은 주로 약어의 실제 의미를 제공하는 데 사용됩니다. 2. 태그 ㅇ 인용된 작품의 제목을 나타내는 데 사용되는 HTML 태그입니다. 이 태그는 주로 웹 페이지에서 책, 영화, 음악 앨범, 논문 등과 같은 작품의 제목을 강조하고 시맨틱 웹(Semantic Web)에서 작품에 대한 정보를 제공하는 데 활용됩니다. ㅇ 옵션(title).. 개발이야기/HTML&CSS 2023. 9. 25.

• 

  [자바스크립트] Infinity&NaN 해결하기, 체크, 예외처리, 발생원인 Infinity와 NaN은 JavaScript에서 숫자를 다룰 때 발생하는 특수한 값을 나타냅니다. Infinity & NaN 1. Infinity (무한대) ㅇ Infinity는 무한대를 나타냅니다. ㅇ 어떤 숫자를 0으로 나눌 때 또는 어떤 양수를 무한히 더하거나 빼는 경우에 발생합니다. ㅇ 예를 들어, 10 / 0 또는 Number.POSITIVE_INFINITY와 같은 연산은 Infinity를 반환합니다. ㅇ 무한대와 어떤 숫자를 더하면 무한대이며, 무한대에서 어떤 숫자를 빼도 무한대입니다. 2. NaN (숫자가 아님) ㅇ NaN은 "Not-a-Number"의 약어로, 숫자가 아닌 값을 나타냅니다. ㅇ 수학 연산 중 예상치 못한 결과가 발생했을 때 생성됩니다. ㅇ 예를 들어, 문자열을 숫자로 변환.. 개발이야기/자바스크립트 2023. 9. 25.

• 

  [MySQL] 뷰(VIEW) 테이블 생성하기, 예제, 사용법과 목적 뷰(VIEW) 테이블 이란? ㅇ 뷰(View)는 하나 이상의 기존 테이블로부터 생성되는 가상 테이블입니다. 뷰는 데이터베이스 내에서 쿼리를 간소화하거나 복잡한 데이터 검색 및 조작을 쉽게 하기 위해 사용됩니다. 뷰는 실제 데이터를 저장하지 않고, 저장된 데이터의 가상 표현을 제공합니다. 뷰(VIEW) 사용목적 1. 데이터 가시성 제어: 뷰를 사용하여 사용자에게 데이터베이스의 일부만 표시하거나 특정 열을 숨길 수 있습니다. 이렇게 하면 보안을 강화하고 중요한 데이터를 보호할 수 있습니다. 2. 복잡한 쿼리 단순화: 복잡한 SQL 쿼리를 미리 정의된 뷰로 간소화할 수 있습니다. 뷰를 사용하면 사용자가 복잡한 조인 또는 집계 연산을 직접 수행하지 않고도 쉽게 데이터에 액세스할 수 있습니다. 3. 데이터 변환 .. 개발이야기/MySQL 2023. 9. 22.

• 

  [자바스크립트] 우클릭 방지 이벤트 등록, 해제하기 (사용법, 예제) 아래 소스코드는 우클릭 가능한 영역과 우클릭 불가능한 영역에 대해서 이벤트를 처리합니다. handleContextMenu 함수를 통해서 event.target을 확인하여 우클릭이 막힌 영역에서 우클릭 시 이벤트를 중단하고 alert 메시지를 표시하고 있습니다. 우클릭 해제 버튼을 클릭하면 이벤트 핸들러를 제거하고 우클릭을 허용합니다. 간단한 코드이니 응용해서 사용하시면 됩니다. 우클릭 해제 이 영역에서는 우클릭 가능합니다. (우클릭 해보세요) 이 영역에서는 우클릭이 막혔습니다. (우클릭 해보세요) 개발이야기/자바스크립트 2023. 9. 21.

• 

  [자바스크립트] HTML요소 텍스트를 클립보드로 복사하기 (navigator.clipboard) 아래 소스코드는 입력된 텍스트에 대해서 복사하기 버튼을 클릭하여 텍스트를 클립보드에 복사할 수 있으며, 복사 작업의 성공/실패 메시지를 표시하고 있습니다. 간단한 예제이니 응용해서 사용하시면 됩니다. 소스코드 ㅇ navigator.clipboard.writeText(text) - 브라우저에서 제공하는 Clipboard API이며, 클립보드에 텍스트를 쓸 수 있습니다. 복사 및 붙여넣기 작업을 수행할 때 유용하게 사용됩니다. - text : 클립보드에 복사하려는 텍스트를 나타냅니다. - 클립보드에 텍스트를 성공적으로 복사한 경우 then() 메서드를 사용하여 처리할 수 있고, 실패한 경우 catch() 메서드를 사용하여 오류를 처리할 수 있습니다. 1. 복사하기 버튼을 클릭하세요. 2. Ctrl+V 로 붙.. 개발이야기/자바스크립트 2023. 9. 20.

• 

  [jQuery] beforeunload 이벤트로 페이지 이탈 확인하기 아래 소스 코드는 beforeunload 이벤트를 통해서 사용자가 페이지를 벗어날 때 경고 메시지가 표시되며, 이벤트 제거하기 버튼을 클릭하면 beforeunload 이벤트를 제거하고 메시지를 표시하지 않는 코드입니다. beforeunload 이벤트는 페이지를 벗어나기 전에 발생하는 이벤트로, 벗어나기 전에 추가 동작을 수행하거나 경고를 표시할 수 있습니다. beforeunload 이벤트를 사용하려면 일반적으로 이벤트 핸들러를 등록하고, 해당 이벤트 핸들러 내에서 사용자에게 보여줄 메시지를 반환해야 합니다. 이 메시지는 브라우저에 표시되며, 사용자에게 어떤 작업을 할 것인지를 확인하는 기회를 제공합니다. 사용자가 페이지를 떠나려고 할 때, 이 메시지가 표시되면 사용자는 "확인" 또는 "취소"와 같은 선택.. 개발이야기/jQuery 2023. 9. 19.

• 

  [jQuery] load() 메서드 사용법, 예제, 데이터 전달 (페이지 로드) 아래 소스 코드는 load() 메서드를 사용해서 버튼을 클릭하면 외부 페이지(t2.html)를 로드하고, 로드가 완료되면 버튼을 숨기는 화면입니다. 외부 페이지로 변수를 전달하고 노출도 시키고 있습니다. 사용방법 $(선택자).load(URL, [데이터], [콜백 함수]); ㅇ 선택자 : 로드한 컨텐츠를 삽입할 요소를 선택합니다. ㅇ URL : 로드할 리소스(외부 페이지 또는 파일)의 URL을 지정합니다. ㅇ 데이터 (선택 사항) : 서버로 전송할 데이터를 지정합니다. 주로 POST 요청에 사용됩니다. ㅇ 콜백 함수 (선택 사항) : 로드가 완료된 후 실행할 함수를 정의합니다. 이 함수는 로드가 성공하거나 실패했을 때 호출됩니다. 특징 ㅇ 비동기적 로드 : load() 메서드는 비동기 방식으로 동작하며, .. 개발이야기/jQuery 2023. 9. 18.