JavaScript

26. tab

작성자:

탭(Tab: 서류철의 색인 표처럼 여러 내용을 한 화면에 겹쳐 두고 선택한 항목만 보여주는 사용자 인터페이스) 컴포넌트(Component)는 한정된 화면 공간에 다수의 콘텐츠를 배치하고 사용자가 선택한 항목만 전환하여 표시하는 웹 UI(사용자 인터페이스, User Interface) 요소다. 버튼을 클릭하면 해당하는 영역의 화면 노출 상태가 변경되며, 이는 여러 페이지를 책갈피로 넘겨보는 동작과 유사하다. HTML로 메뉴와 본문 영역 간의 연결 구조를 … 더 읽기

32. scrollEffect

작성자:

1. 스크롤 효과를 만들어보자 1.1. 1단계-섹션1 1.1.1. 좌우이동 – css 메서드 활용 예제 미리보기 이 코드는 잠재적인 버그가 있다. 작성후 어떤 버그가 발생할수 있을지 예상해보자 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/jq-01.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="js/jq-01.js" defer></script> </head> <body> <section class="section1"> <h2>section1</h2> <div … 더 읽기

34. ajax

작성자:

jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다. 💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행 💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 … 더 읽기

27. tabSlide

작성자:

탭(Tab) 메뉴 UI 내부에서 슬릭(Slick) 라이브러리를 활용한 캐러셀(Carousel, 슬라이드)과 매그니픽 팝업(Magnific Popup) 라이브러리를 활용한 라이트박스(Lightbox, 이미지 확대 모달)를 결합하는 구현 방법을 다룬다. 탭 전환 시 보이지 않는 영역의 슬라이더가 겪는 너비 계산 오류를 해결하고, 각 탭에 독립된 슬라이더와 팝업 기능을 안정적으로 연동하는 과정을 설명한다. HTML, CSS, 자바스크립트(JavaScript)로 나누어 마크업 구조부터 플러그인 재초기화 로직까지 단계별로 살펴본다. … 더 읽기

01. GSAP 기초 애니메이션

작성자: coalacoding

1. gsap gsap공식사이트 gsap코드펜 gsap치트시트 gsap의 모든 기능이 있는 cdn 링크 웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리 기존 CSS나 순수 자바스크립트보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리이며, HTML5와 Flash 두 개의 플랫폼에서 사용할 수 있다. GreenSock Engaging the Internet GASP은 애니메이션을 쉽게 적용할 수 있는 라이브러리로 탁월한 퍼포먼스로 알려져 있다. … 더 읽기

09. 함수

작성자:

1. 함수란? 여러 동작을 묶어놓은 명령어 덩어리 입니다 1.1. 함수의 성분 🔑매개변수,인수,return 함수는 매개변수,인수,리턴의 3요소가 있습니다. 믹서기의 예를 들어 보겠습니다. 아래의 믹서기는 어떤 것이든 재료만 넣으면 무조건 갈아서 섞어 줍니다. 이때 믹서기의 기능을 자바스크립트에서는** 함수라고 부릅니다. 이때 믹서기에 넣을 재료를 자바스크립트에서는 인수라고 부릅니다. 믹서기는 재료를 넣는 곳과 결과물이 나오는 곳이 다른데요. 이때 재료를 넣는곳에 들어가는 … 더 읽기

05. 변수와자료형

작성자:

1. 변수 1.1.변수란? ✅ 변수(상수)란? 데이터(값/자료)를 저장 할 수 있는 메모리 공간 변하는 값은 변수 let, var 변하지 않는 값은 상수 const ✅ 변수 사용 이유 변수를 쓰는 이유는 코드의 재활용성을 높여준다. 1.2.변수의사용 1.2.1. 선언과할당 let currentYear; //올해 연도의 변수 선언 let name; // 이름의 변수 선언 let age; // 나이의 변수 선언 let currentYear, … 더 읽기

21. 이벤트

작성자:

1. 이벤트 자바스크립트에서 이벤트는 웹 페이지에서 발생하는 특정한 동작이나 사건을 의미합니다. 사용자의 마우스 클릭, 키보드 입력, 페이지 로딩 완료, AJAX 요청 완료 등과 같은 다양한 상황에서 이벤트가 발생할 수 있습니다. 웹브라우저나 사용자가 행하는 어떤 동작을 이벤트라 칭하며 웹 브라우저 내에 새로운 페이지를 불러오는것도 이벤트에 해당합니다. 웹문서 영역 내에서 이루어 지는 동작에 한해 이벤트라 하며 웹문서 … 더 읽기

01. 자바스크립트 기초

작성자:

1. 변수 선언: let, const var 대신 let과 const를 사용합니다. React에서는 주로 const를 사용합니다. 예제 1: let과 const의 차이 let age = 20; // let: 재할당 가능한 변수 age = 21; // 값 변경 가능 console.log(age); // 21 출력 const name = '철수'; // const: 재할당 불가능한 상수 // name = '영희'; // 오류 발생! … 더 읽기

22. windowlocation

작성자:

URL 정보 확인을 위한 window.location 속성 사용 window.location 속성을 사용하여 현재 페이지의 URL 정보를 확인할 수 있다. window.location은 Location 객체를 반환하며, 이 객체의 여러 속성을 통해 URL의 다양한 정보를 확인할 수 있다. 예시 URL: https://coalacoding.com/documentation?category=1 window.location.href // "https://coalacoding.com/documentation?category=1" window.location.protocol // "https:" window.location.host // "coalacoding.com" window.location.hostname // "coalacoding.com" window.location.port // "" window.location.pathname // "/documentation" window.location.search // … 더 읽기