이전다음 Front-end Developer 더보기 Front-end Developer 더보기 Front-end Developer 더보기 MENU HTML CSS JAVASCRIPT SCRIPT LATEST POST JQuery jQuery) 기타 유용한 함수 기타 다양한 상황에서 유용하게 쓰이는 jQuery 함수들입니다..siblings()선택한 요소의 형제 요소를 선택합니다.$('#example').siblings().css('color', 'blue'); // 형제 요소 모두 색상 변경 .parent() / .children()부모 요소나 자식 요소를 선택할 때 사용합니다.$('#example').parent().css('background-color', 'yellow'); // 부모 요소 선택$('#example').children().css('border', '1px solid red'); // 자식 요소 선택 JQuery jQuery) 문서 준비 및 로딩 함수 문서가 준비되었을 때 코드를 실행할 수 있는 함수들입니다.$(document).ready()페이지의 DOM이 완전히 로드된 후 실행할 코드를 지정합니다.$(document).ready(function() { console.log("문서가 준비되었습니다.");}); JQuery jQuery) 요소 추가 및 제거 함수 HTML 콘텐츠를 동적으로 추가하거나 제거하는 함수들입니다..append() / .prepend()요소의 자식으로 HTML 내용을 추가합니다. .append()는 요소의 끝에, .prepend()는 시작에 추가됩니다.$('#example').append('새로운 내용 추가'); // 마지막에 추가$('#example').prepend('처음에 내용 추가'); // 처음에 추가 .remove() / .empty()요소를 제거하거나 내부 콘텐츠를 비웁니다.$('#example').remove(); // 요소 제거$('#example').empty(); // 요소 내부 콘텐츠만 제거 JQuery jQuery) DOM 요소 반복 처리 함수 jQuery로 여러 요소를 반복해서 처리하는 방법입니다..each()jQuery의 each() 함수는 배열이나 DOM 요소와 같은 컬렉션을 반복(iterate)하면서, 각 요소에 대해 특정 작업을 수행할 수 있는 함수입니다. each() 함수는 배열이나 객체, DOM 요소에 대해 반복 작업을 수행할 때 유용하게 사용됩니다.$(선택자).each(function(index, element) { // 반복할 때 실행할 코드}); 파라미터 설명function(index, element): 반복문에서 실행될 함수로, 각 반복마다 index와 element 값이 전달됩니다.index: 현재 반복 중인 요소의 인덱스입니다. 0부터 시작하는 정수 값으로, 현재 요소가 컬렉션에서 몇 번째 요소인지를 나타냅니다.el.. JQuery jQuery) 애니메이션 및 효과 함수 웹 페이지에서 애니메이션 효과를 주거나 속성 값을 변경하는 함수들입니다..fadeIn() / .fadeOut()요소의 페이드 인/아웃 효과를 적용합니다.$('#example').fadeIn(); // 서서히 보이게 함$('#example').fadeOut(); // 서서히 숨기기 .animate()CSS 스타일 속성을 변경하며 애니메이션 효과를 구현합니다.$('#example').animate({ left: '200px', opacity: 0.5}, 1000); // 1초 동안 애니메이션 실행 JQuery jQuery) DOM 요소 숨기기 및 표시하기 함수 웹 페이지에서 요소를 숨기거나 표시하는 데 유용한 함수들입니다..hide() / .show()요소를 숨기거나 표시합니다.$('#example').hide(); // 숨기기$('#example').show(); // 보이기 .toggle()요소의 표시 상태를 토글합니다. 보이는 요소는 숨기고, 숨겨진 요소는 보이게 합니다.$('#example').toggle(); // 보이면 숨기고, 숨겨지면 보이게 함 JQuery jQuery) 이벤트 처리 함수 jQuery를 이용해 다양한 이벤트를 처리할 수 있는 함수들입니다..on()이벤트 리스너를 바인딩하여 사용자가 특정 동작을 할 때 실행할 코드를 지정합니다.$('#button').on('click', function() { alert('버튼이 클릭되었습니다!');}); .click() / .hover() / .keydown() 등특정 이벤트가 발생했을 때 실행할 함수를 정의하는 메서드들입니다.$('#example').click(function() { console.log('클릭됨');}); JQuery jQuery) DOM 선택 및 조작 jQuery를 이용해 DOM 요소를 선택하고 조작하는 주요 함수들입니다.$() (선택자 함수)DOM 요소를 선택하여 조작합니다. CSS 선택자를 사용하여 다양한 요소를 선택할 수 있습니다.// id가 'example'인 요소를 선택$('#example').css('color', 'blue');// 클래스가 'item'인 모든 요소를 선택$('.item').hide(); .css()선택한 요소의 CSS 스타일을 변경할 때 사용합니다.$('#example').css('color', 'red'); // 색상 변경 .html() / .text()요소의 HTML 내용 또는 텍스트 내용을 가져오거나 설정할 수 있습니다.$('#example').html('강조된 텍스트'); // HTML 변경$('#example.. PHP PHP) 외부파일 포함하기 1. includeinclude는 지정된 파일을 현재 스크립트에 포함시킵니다. 파일을 포함시키는 데 문제가 발생하면 경고 메시지가 출력되고, 나머지 코드는 계속 실행됩니다. include '파일명.php'; 장점: 파일이 없으면 경고가 표시되지만, 스크립트 실행은 계속됩니다.용도: 선택적으로 파일을 포함시킬 때 사용합니다.2. requirerequire는 지정된 파일을 현재 스크립트에 포함시킵니다. 만약 파일을 찾을 수 없거나 읽을 수 없으면, 치명적인 오류가 발생하고 스크립트 실행이 중단됩니다. require '파일명.php'; 장점: 필수적인 파일을 포함시킬 때 사용합니다. 파일이 없으면 스크립트 실행을 중지하고 오류를 발생시켜 문제를 명확히 알 수 있습니다.용도: 필수 파일을 포함시킬 때 사용합니다.. SQL Could not connect. server may not be running 오류 https://m.blog.naver.com/sinjoker/222103856995 POPULAR ARTICLES WebSquare [WebSquare] 웹스퀘어 가이드 (퍼블리싱) 1. 작업시 열어놓는 창 Package Explorer Palette Style Property Outline Servers : 서버 사용시 Console : 서버 사용시 2. 퍼블리싱 1. 작업할 파일을 생성 - 웹스퀘어 폴더 안에 있는 WebSquare CSS, WebSquare JS, WebSquare Page 로 생성함. 2. CSS는 기존 작성법과 동일 3. WebSquare Page - html 파일이라고 생각하면됨 (웹스퀘어는 XML) - 하단의 Design 에서 작업 -- Palette에서 원하는 컴포넌트를 클릭하여 화면에 그리는 방식으로 작업 -- 웹스퀘어에서 제공하는 컴포넌트는 고유의 class명이 있음 (별도로 class 추가 가능) -- 컴포넌트의 속성은 Property에서 설정 -.. HTML 반응형 이미지맵 만들기 a~z 1. 이미지맵이란? HTML과 XHTML에서, 이미지 맵은 특정 이미지의 좌표 목록을 말하며, 이미지를 영역에 따라 다른 문서나 URL 등으로 연결하는 하이퍼링크를 생성하기 위해 만들어졌다. 2. 이미지맵 설정방법 1. HTML에 이미지넣기 **usemap 앞에는 #을 붙여 작성해야합니다. 2. css로 의 width값 설정하기 반응형 이미지맵을 만들거라 width값을 100%로 설정했습니다. 3. 이미지 좌표값 구하기 이미지의 좌표값을 구하기 위한 여러 방법이 있지만 가장 간단하게 구할 수 있는 사이트를 가져왔습니다. 아래의 사이트에 접속하면 이미지 좌표값은 물론 코드까지 친절하게 만들어주기때문에 복붙하기만 하면 된답니다. http://maschek.hu/imagemap/imgmap/ maschek.h.. gsap [Hweb] GSAP ScrollTrigger 기본 사용법 1. 설치 위의 링크를 에 삽입하여 스크롤트리거를 설치한다. 2. 기본 문법 gsap.registerPlugin(ScrollTrigger); gsap.to("대상", { 구현하고싶은 이벤트, scrollTrigger: { trigger: "대상", start: "시작 지점", end: "끝나는 지점", scrub: true 또는 fales 또는 number, markers: true 또는 fales } }); 상단에 gsap.registerPlugin(ScrollTrigger); 를 선언하고 시작한다. gsap.registerPlugin(ScrollTrigger); gsap.to(".s", { y: -800,//y축으로 -800px 만큼 이동 duration: 1,//1초동안 ease: Sine.ease.. SQL 활용 04. 데이터 사전 검색 데이터 사전 검색 생성된 테이블의 목록, 테이블의 구조와 제약 조건을 파악하기 위해 데이터 사전을 조회하는 명령문을 작성할 수 있다. 데이터 사전 1. 데이터 사전 개념 데이터 사전(Data Dictionary)에는 데이터베이스의 데이터를 제외한 모든 정보가 있다. 데 이터 사전의 내용을 변경하는 권한은 시스템이 가지며, 사용자에게는 읽기 전용 테이블 형태로 제공되므로 단순 조회만 가능하다. 데이터를 제외한(데이터를 구성하는) 모든 정보라는 것은 데이터의 데이터를 의미한다. 따 라서 데이터 사전은 메타데이터(Meta data)로 구성되어 있다고 할 수 있다. 2. 데이터 사전 내용 데이터 사전 안에 존재하는 메타데이터의 유형은 다음과 같다. • 사용자 정보(아이디, 패스워드 및 권한 등) • 데이터베이스.. 요구사항 확인 02. 개발 기술 환경 정의 개발 기술 환경 정의 개발하고자 하는 응용소프트웨어와 관련된 운영체제, 데이터베이스관리시스템, 미들웨어 등의 요구사항을 식별할 수 있다 현행 시스템을 분석하여, 개발하고자 하는 응용소프트웨어가 이후 적용될 목표시스템을 명확하고 구체적으로 기술할 수 있다. 개발 기술 환경 개발 기술 환경을 정의할 때 고려할 사항을 [그림 1-6]과 같이 운영체제, DBMS, 미들웨어, 오픈소스 순으로 살펴본다. 본 학습에서는 모든 미들웨어에 대하여 기술하지는 않으며 자주 사용되는 웹 애플리케이션 서버(WAS: Web Application Server)를 선정할 경우 고려해야 할 사항에 대해서 기술하고, 오픈 소스 사용 시 주의해야 할 내용과 저작권 관련 정보를 제시한다. 1. 운영체제 주요 특징 및 고려 사항 (1) 운영..