본문 바로가기

728x90

Javascript54

슬라이더 이펙트 06 ⭐️ slider Effect 슬라이더 효과 06 ⭐️ 01. HTML 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS /* slider */ * { margin: 0; padding: 0; box-sizing: border-box; } .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보여지는 영역 */ position: relative; width: 800px; height: 500px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직.. 2022. 10. 21.

검색 효과 07. 검색 기능을 활용한 게임 만들기 ⭐️ search Effect 검색 효과 07 : 검색 규칙을 활용한 게임 만들기 ⭐️ 01. HTML BGM: The ventures - hawaii five-0 CSS 속성 검색 이벤트 CSS 속성명 암기 게임 CSS 속성 이름을 입력하면 점수가 올라갑니다. START 버튼을 누르면 게임 시작입니다. 화이팅😃 2:00 검색하기 START 전체 속성 갯수 : 0 맞춘 갯수 : 0 The End RESTART 02. CSS @import url('https://webfontworld.github.io/vitro/VitroPride.css'); @import url('https://webfontworld.github.io/vitro/VitroCore.css'); @import ur.. 2022. 10. 21.

Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️ Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️ 01. jquery 를 사용하여 이미지 드래그 효과 구현하기 🧊 jquery 사이트에서 드래그 효과의 주소를 가져와 script 에 넣어줍니다. 🧊 마우스 커서 모양을 따로 설정해주었다면, 이미지를 드래그할 때도 모양이 유지되도록 script 에 함수를 추가해줍니다. [1] 드래그 효과 - jquery 주소 넣기 [2] 마우스 커서 모양 유지를 위한 함수 추가하기 $( ".삽입한 이미지 클래스명" ).draggable({ drag: function(){ $(".마우스 커서 클래스명").style }, }); $( ".icon" ).draggable({ drag: funct.. 2022. 10. 20.

마우스 이펙트 01 : transform & transition 효과 ⭐️ 마우스 이펙트 01 : transform & transition 효과 ⭐️ 01. 마우스 효과 만들어보기 : 목표 🧊 정해진 글자 위에서 마우스 커서의 형태가 변형되는 효과를 나타내봅니다. 🧊 커서 모양 변형 효과의 속도를 조절해 봅니다. [1] 커서 모양 div 만들고 문장 작성하기 (html) section 태그를 만들고, css 와 script 의 경로 설정을 위해 id 및 class로 이름을 정합니다. 문장에서 정해진 글자 위에 커서를 올렸을 때, 커서의 형태가 변형되도록 하기 위해 span 태그로 글자를 감싸줍니다. span 태그의 css와 script 의 경로 설정을 위해 class = style($num) 로 이름을 지어줍니다. ___ 참고하기 ___ `1 a href 에 class =.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 04 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 & 요소 개별적으로 나타내기 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 04 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 & 요소 개별적으로 나타내기 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 03 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 03 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성.. 2022. 9. 14.

Parallax Scrolling 패럴랙스 스크롤링 02 : 사이드 dot 메뉴 active & 부드럽게 이동되는 효과 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 02 : 사이드 dot 메뉴 active & 부드럽게 이동되는 효과 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해지며 .. 2022. 9. 14.

Parallax Scrolling 패럴랙스 스크롤링 01 : 상단 메뉴 active & 부드럽게 이동되는 효과 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 01 : 상단 메뉴 active & 부드럽게 이동되는 효과 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해지며 많은 리소.. 2022. 9. 14.

mouse 이벤트 _ mouse Over 와 mouseEnter 의 차이점 ⭐️ mouseOver 와 mouseEnter 의 차이점 ⭐️ mouseOver 와 mouseEnter 는 모두 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트 입니다. mouseLeave 와 mouseOut 는 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트 입니다. mouseOver 와 mouseOut 이, mouseEnter 와 mouseLeave 가 서로 짝을 이루어 활용됩니다. 01. mouseOver / mouseOut 이벤트가 발생할 때, 지정된 태그 요소와 (자식 요소가 있다면) 해당 자식요소의 영역까지 포함 됩니다. 02. mouseEnter / mouseLeave 이벤트가 발생할 때, 지정된 태그 요소의 영역에만 해당되고, (자식 요소가 있다면) 해당.. 2022. 9. 6.

jQuery 스타일 관련 메서드 ⭐️ jQuery 메서드 ⭐️ 01. jQuery 스타일 관련 메서드 [1] css( ) 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css( { background-color : "red", padding : "10px" } ); 콜백 함수 $("div").css( "width", function ( index, .w ) { // index 는 각 div 요소의 index 0, 1, 2 // w 는 각 div 요소 width 값 return css 속성 // 각 div 요소의 속성을 변경 }); .... 2022. 9. 5.

jQuery 속성 관련 메서드 ⭐️ jQuery 메서드 ⭐️ 01. jQuery 속성 관련 메서드 [1] attr( ) 메서드 선택한 요소의 attribute(속성)을 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "https://oranssy.tistory.com/").attr("target", "_blank"); $("a").attr( { href: "https://oranssy.tistory.com/", target: "_blank" } ); 콜백 함수 $("a").attr("href", function(index, h) { // index 는 각 a 요소의 index 0, 1, 2 // h 는 각 a 요소의 href 속성 retur.. 2022. 9. 5.

jQuery 클래스 관련 메서드 ⭐️ jQuery 메서드 ⭐️ 01. jQuery 클래스 관련 메서드 [1] addClass( ) 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass ( function ( index, className ) { // index 는 각 div 요소의 index 0, 1, 2 // className 은 각 div 의 class 속성 return class 속성 // 각 div 에 class 속성을 추가 }); .... 내용1 내용2 내용3 # 예제 1) See the Pen jQuery(addClass) by oranssy (@oranssy) on CodePen. [2] removeClass( ) 메서드.. 2022. 9. 5.

슬라이드 이펙트 (3) ⭐️ 슬라이드 이펙트 03 ⭐️ 01. 에 작성하기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 이미지들 let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 let sliderWidth .. 2022. 9. 2.

크기와 위치에 대한 속성 ⭐️ 크기 및 위치 요소 속성 ⭐️ 01. 크기 / 위치를 표현하는 속성 및 메서드 종류 설명 특징 element.clientWidth(); 요소의 너비값을 구합니다. 바깥쪽 여백(margin), 테두리(border) 값은 포함하지 않습니다. element.clientHeight(); 요소의 높이값을 구합니다. 바깥쪽 여백(margin), 테두리(border) 값은 포함하지 않습니다. element.clientTop(); 요소의 Y축 값을 구합니다. 부모를 기준으로 값을 계산합니다. (position 과 같은 개념) element.clientLeft(); 요소의 X축 값을 구합니다. 부모를 기준으로 값을 계산합니다. (position 과 같은 개념) element.offsetWidth(); 요소의 너비값.. 2022. 9. 1.

jQuery 탐색 선택자 ⭐️ jQuery 선택자 ⭐️ 04. jQuery 탐색 선택자 [1] 기본 탐색 선택자 선택자 종류 표현 방법 설명 children( ) $("div").childern( ) div 요소의 자식 요소를 선택 parent( ) $("p").parent( ) p 요소의 부모 요소를 선택 parents( ) $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택 closest( ) $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾음 next( ) $("div.m").next( ) div.m 요소의 다음 요소를 선택 nextAll( ) $("div.m").nextAll( ) div.m 요소의 다음 요소들을 모두 선택 nextUntil( ) .. 2022. 9. 1.

jQuery 필터 선택자 ⭐️ jQuery 선택자 ⭐️ 03. jQuery 필터 선택자 선택자에 ' : ' 가 붙은 선택자를 필터 선택자라고 합니다. [1] 기본 필터 선택자 선택자 종류 표현 방법 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택 :odd $("tr:odd") tr 요소 중 홀수 행만 선택 :first $("tr:first") 첫 번째 td 요소를 선택 :last $("tr:last") 마지막 td 요소를 선택 :header $(":header") 헤딩(h1~h6) 요소를 선택 :eq( ) $("li:eq(0)") index 가 0 인 li 요소를 선택 index 는 0 번이 첫 번째 요소 :gt( ) $("li:gt(0)") index 가 0 보다 큰 li 요소들을 선택 :lt( ) $(".. 2022. 9. 1.

jQuery 속성 선택자 ⭐️ jQuery 속성 선택자 ⭐️ 02. jQuery 속성 선택자 선택자 종류 표현 방법 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택 'abc' 앞으로 연결된 문자가 없어야 함 'bg abc'는 선택되지만 'bg_abc'는 선택되지 않음 요소[속성*='값'] $("span[c.. 2022. 9. 1.

jQuery 기본 선택자 ⭐️ jQuery 기본 선택자 ⭐️ 01. jQuery 기본 선택자의 형식 $("선택자") $("#gnb") 선택자 종류 표현 방법 설명 태그 선택자 $("p") p 요소 선택 id 선택자 $("#gnb") #gnb 요소 선택 class 선택자 $(".logo") .logo인 요소 선택 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소(ul)의 자식 요소 li를 선택 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 li 요소를 선택 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer를 선택 종속 선택자 $("div.u.. 2022. 9. 1.

jQuery 기본 사용 설명 ⭐️ jQuery ⭐️ 01. jQuery란? 제이쿼리(jQuery)는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는, 오픈소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 마이크로소프트의 ASP.NET 프레임워크, 워드프레스 등 다양한 라이브러리와 프레임워크에 포함되면서 웹 프론트엔드 분야에서 점유율이 지속적으로 상승했었으나, 현재 높은 기능성을 갖춘 웹 표준 API가 늘어나면서 제이쿼리의 인기는 낮아지고 있습니다. 02. jQuery 사용 방법 jQuery 라이브러라 파일 형식에는 설명에 대한 주석 차이에 따라 압축 파일과 비압축 파일 형식이 있습니다. 일반적으로 설명이 크게 필요치 않으므로, 압축 파일을 사용합니다. [1] Download 방식 파일을 직접 다운받아 연결하는 방식 입니.. 2022. 8. 29.

이전 1 2 3 다음

728x90

티스토리툴바