qqqwe

패럴랙스 이팩트 08/09 저희 포트폴리오에 큰 도움이 될 핵심 작업인 마지막 패럴랙스 이팩트입니다. 가로 효과 HTML Javascript Parallax Effect09 패럴랙스 이펙트 : 가로/세로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px JAVASCRIPT 코드 설명 const section4 = document.querySelector("#section4").offsetTop; #section4 요소의 페이지 위쪽으로부터의 위치(offsetTop)를 section4 변수에 할당합니다. function scroll() { ... } scroll이라는 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발..

패럴랙스 이팩트 05/06 HTML Javascript Parallax Effect04 패럴랙스 이펙트 : 나타나기 1 2 3 4 5 5 5 01 section1 늦었다고 생각할때가 정말 너무 늦었다. 그러니 지금 당장 시작해라. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 피할수 없으면 즐겨라 04 section4 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가? 05 section5 한번의 실패와 영원한 실패를 혼동하지 마라 06 section6 평생 살 것처럼 꿈을 꾸어라.그리고 내일 죽을 것처럼 오늘을 살아라. 07 section7 1퍼센트의 가능성, 그것이 나의 길이다. 08 section8 마음만을..

포트폴리오 애니메이션 포트폴리오 제작을 위해 만들어본 첫번째 애니메이션 효과입니다. gsap를 이용하여 좀 더 쉽게 효과를 만들었습니다. HTML Dohyun's PORTFOLIO work about let's introduce frontend developer's all works of portfolio blog.link 스크립트 코드 설명 먼저, 이 코드는 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js 경로에서 GSAP 라이브러리를 가져와서 사용합니다. 이 코드에서는 querySelectorAll() 메서드를 사용하여 .split 클래스를 가진 모든 요소에 대해 반복적으로 작업을 수행합니다. 이 작업은 텍스트를 각 글자별로 분리하여 스..

const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArtist = musicWrap.querySelector(".music__control .title p"); const musicView = musicWrap.querySelector(".music__view .image img"); const musicAudio = musicWrap.querySelector("#main-audio"); const musicPlay = musicWrap.querySelector("#control-play"); const ..

레이아웃 버튼 효과 HTML & CSS 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 JAVASCRIPT & jquery 코드 설명 먼저, querySelectorAll() 메소드를 사용하여 HTML 문서 내에서 .nav > ul > li 셀렉터에 해당하는 요소들을 선택합니다. 이 요소들은 navigation 메뉴의 각 메뉴 아이템을 나타냅니다. 그리고 forEach() 메소드를 사용하여 선택된 요소들을 반복하며, 각각의 요소에서 querySelector() 메소드를 사용하여 .submenu 셀렉..

슬라이드 레이아웃 만들기 HTML / CSS JAVASCRIPT 1번 유형 2번 유형 3번 유형

자바스크립트 오답노트 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 문제 풀이 위의 코드는 반복문을 사용하여 i가 1부터 10까지 증가하는 동안, i의 값이 4로 나누어떨어지면 sum에서 i를 뺀 결과를, i를 4로 나눈 나머지가 1이면 sum에 i를 더한 결과를, i를 4로 나눈 나머지가 2이면 sum에 i를 곱한 결과를 구하는 코드입니다. 정답 -4 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let..

게임 이펙트 노래 재생하기 HTML responsive gif background KIM GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 LOVE MUSIC 10000hour Dan + Shay, Justin Bieber 0:00 3:55 CSS .music__inner { width: 350px; background: rgba(0,0,0,0.5); backdrop-filter: blur(20px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 22px; border-radius: 20px; box-shadow: 0 60px 100p..

게시판 만들기 두번째 게시판 웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

php로 게시판 만들기 선생님을 따라하며 직접 만든 사이트입니다. board.php 게시판 웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수 처음으로 이전 1 2 3 4 5 6 7 다음 마지막으로 코드 설명 메인 게시판 영역입니다 본문 맨위에 삽입되어있는 사이트의 코드입니다. 이 코드의 php 코드에 대한 설명입니다. SQL 쿼리문을 작성합니다. 이 쿼리문은 board 테이블과 members 테이블을 JOIN하여 게시판 글의 정보와 작성자 정보를 가져옵니다. 가져온 정보는 boardID 기준으로 내림차순으로 정렬하며 최대 1..

게임 이펙트 폴더를 클릭하면 폴더 색깔별로 헤더의 색깔이 바뀌고 현재 시각이 우측 상단에 나오는 게임 이펙트 메인 화면입니다. HTML WEBS GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 맥을 사용하고 있으면, 확인 크기는 1920 X 760 입니다. GSAP window.onload = function(){ window.addEventListener("mousemove", e => { gsap.to(".cursor", { duration: 0, left: e.pageX - 5, top: e.pageY -10 }) }); printTime(); // 오른쪽 상단 시간 printAgent(); // 하단 중앙 } 코드 설명 이 코드는 G..

자바스크립트 문자열 객체 at() at() 메소드는 인덱스값을 받아, 문자열에서 해당되는 인덱스의 요소를 반환합니다. { console.log("javascript reference".at("0")); //j console.log("javascript reference".at("1")); //a console.log("javascript reference".at("2")); //v console.log("javascript reference".at("11")); //r console.log("javascript reference".at("12")); //e console.log("javascript reference".at("20")); //undefined console.log("javascript r..

패럴렉스 효과 HTML Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 5 5 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 늦었다고 생각할때가 정말 너무 늦었다. 그러니 지금 당장 시작해라. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 피할수 없으면 즐겨라 04 section4 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가? 05 section5 한번의 실패와 영원한 실패를 혼동하지 마라 06 section6 평생 살 것처럼 꿈을 꾸어라.그리고 내일 죽을 것처럼 오늘을 살아라. 07 section7 1퍼센트의 가능성..

명언 사이트 HTML CSS CSS 설명 @import 구문을 사용하여 폰트를 가져와서 font-family 속성에서 사용하고 있습니다. 이 폰트는 외부에서 가져온 것으로 추측됩니다. .wrap 클래스는 배경 이미지의 크기를 전체화면으로 늘리는 역할을 하고 있습니다. .main 클래스는 내부의 요소들을 중앙에 위치시키기 위해 display, justify-content, align-items 속성을 사용하고 있습니다. 이 클래스는 또한 글씨체, 크기, 색상 등을 지정하는 역할도 합니다. .author 클래스는 padding-top 속성을 사용하여 .main 클래스와 일정한 간격을 두고 있는 것으로 보입니다. 이 코드는 해당 웹페이지에서 .wrap, .main, .author 클래스가 사용되며, font-..

슬라이드 이펙트 일곱번째 HTML Javascript Slider Effect03 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 8 prev next kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT 설명 images 배열: 이미지 경로가 저장된 배열입니다. imageSlider() 함수: 슬라이더를 만드는 함수입니다. 인자로는 슬라이더를 감싸는 부모 요소와 이미지 경로를 저장한 images 배열을 받습니다. slider 객체: 슬라이더를 구성하는 요소들을 저장한 객체입니다. parent는 슬라이더를 감싸는 부모 요소를, images는 이미지를 출력할 요소를, thumnails는 썸네일을 출력할 요소를, prevBtn과 nextBtn은 이전..

슬라이드 이펙트 여섯번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 6 prev next 이미지1 CSS JAVASCRIPT JAVASCRIPT 설명 // 닷 버튼을 누르면 이미지 넘어가기 이미지 슬라이더에 있는 닷 메뉴를 클릭하면 해당 이미지로 이동하도록 하는 기능입니다. 설명을 자세히 보면, 먼저 init() 함수를 통해 이미지 갯수만큼 닷 메뉴를 생성하고, 첫번째 닷 메뉴에 'active' 클래스를 추가하여 활성화 시킵니다. 그 후, dotActive 변수에 모든 닷 메뉴를 선택하여 forEach() 메소드를 이용하여 클릭 이벤트를 등록합니다. 클릭 이벤트 발생 시, 눌린 닷 메뉴에 'active' 클래스를 추가하고, ..

슬라이드 이펙트 다섯번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT설명 우선 문서 객체 모델(DOM)을 이용하여 HTML에서 슬라이더와 관련된 요소들을 선택하고 변수에 할당합니다. 이미지가 움직이는 영역과 보여지는 영역, 그리고 개별 이미지를 나타내는 요소를 선택합니다. 그리고 현재 보이는 이미지(currentIndex) 변수와 이미지의 갯수(sliderCount)를 설정합니다. 또한 이미지 변경 간격 시간(sliderInterval)과 이미지 가로값(sliderHeight)도 설정합니다. 그리고 첫 번째 이미지를 복사(clone)하여 마지막..

슬라이드 이펙트 네번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT설명 currentIndex 변수를 증가시키면서 현재 보이는 이미지의 인덱스를 업데이트합니다. sliderInner 요소에 대해 transition 속성을 0.6초로 설정하고, translateY() 함수를 사용하여 요소를 수직으로 이동시킵니다. sliderHeight * currentIndex 값은 currentIndex와 sliderHeight 값을 곱한 결과로, 현재 보이는 이미지의 위치를 계산하기 위해 사용됩니다. currentIndex와 sliderCount 값이 같으면..

슬라이드 이펙트 세번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS CSS 설명 기존에 .slider__inner에 들어가 있던 width : 4000px;을 빼서 flex속성의 이미지들을 가로 정렬에서 세로 정렬로 바꿨다. JAVASCRIPT 자바스크립트 설명 sliderInner.style.transition = "all 0.6s"; 이 부분은 슬라이더가 이동할 때 애니메이션 효과를 주기 위해 스타일 속성에 트랜지션을 추가하는 것입니다. 이 경우 "all 0.6s"는 모든 스타일 속성이 0.6초 동안 변화하도록 설정합니다. setInterval(() => {...}, slider..

슬라이드 이펙트 두번째 HTML JAVASCRIPT 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT 자바스크립트 설명 이 코드는 자바스크립트를 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다. 먼저, sliderInner 요소의 transform 속성을 사용하여 이미지를 이동시킵니다. 이미지가 보이는 부분은 sliderInner 요소 내부에서 translateX 함수를 사용하여 -800px 만큼 이동합니다. 이때, currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타냅니다. 이어서, sliderInner 요소의 transition 속성을 사용하여 이미지 전환 효과를 구현합니다. 이 속성은 all 0.6s로..

슬라이드 이펙트 HTML Javascript Slider Effect02 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT 자바스크립트 설명 이 코드는 자바스크립트를 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다. 우선, 코드의 첫 부분에서는 슬라이더 요소들을 DOM으로부터 가져오고, 현재 보이는 이미지의 인덱스, 전체 이미지 갯수, 이미지 간격 시간을 변수로 설정합니다. 이어서 setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하는 함수를 호출합니다. 이 함수에서는 다음 이미지의 인덱스를 계산한 후, 현재 보이는 이미지와 다음 이미지의 투명도를 조절하여 전환 효과를 구현합니다. 이때, 다음 이미지의 인..

퀴즈 사이트 만들기 일곱번째 추가 정리 JAVASCRIPT 버블버튼 이 코드는 JavaScript에서 상수 bubbleBtn을 선언하고, 그 값으로 화살표 함수를 할당하는 것입니다. 할당된 화살표 함수는 clip이라는 내부 함수를 정의하고, 그 함수를 반환합니다. 내부 함수 clip은 3개의 매개변수 v, min, max를 가지며, v가 min과 max 사이의 값으로 제한됩니다. 만약 v가 min보다 작으면 min 값으로 대체되고, v가 max보다 크면 max 값으로 대체됩니다. v가 min과 max 사이에 있으면 그대로 반환됩니다. 예를 들어, clip(3, 5, 10)을 호출하면 3이 5와 10 사이에 없으므로 5가 반환됩니다. clip(7, 5, 10)을 호출하면 7이 5와 10 사이에 있으므로 7..

퀴즈 사이트 만들기 일곱번째 HTML 2020년 1회 정보처리기능사 기출문제 수험자 : 황상연 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 JAVASCRIPT 코드 설명 선택자 부분 cbt는 문제를 선택하는 버튼의 집합을 나타내는 NodeList입니다. document.querySelectorAll() 메소드를 사용하여 클래스 이름이 cbt인 모든 요소를 선택합니다. cbtQuiz는 문제를 출력하는 부분을 나타내는 요소입니다. document.querySelector() 메소드를 사용하여 클래스 이름이 cbt__quiz인 요소를 선택합니다. cbtOmr은 OMR 카드를 출력하는 부분을 나타내는 요소입니다. document.querySelector() 메소드를 사용하여 클래스 ..

01. 다음의 결괏값을 작성하시오. (X) { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 문제 풀이 이 코드는 먼저 변수 num을 0으로 초기화합니다. 그런 다음 while 루프를 시작합니다. 그러나 while 조건은 false이므로 루프 내부의 코드는 한 번도 실행되지 않습니다. 따라서 num은 여전히 0으로 유지됩니다. 마지막으로 console.log(num)은 0을 출력합니다. 정답 0 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log..

마무리 문제 1 이미지 위에 마우스 포인트러를 올려 놓았을때 다른 이미지로 바뀌엇다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 처음 사진으로 바뀌는 코드를 짜보았습니다. HTML 이미지에 마우스를 오버해보세요 JAVASCRIPT 코드 설명 우선 첫째 줄에서 img1 변수에는 HTML 문서에서 class가 "image1"인 요소를 가져와 저장합니다. 둘째 줄에서도 마찬가지로 img2 변수에는 class가 "image2"인 요소를 가져와 저장합니다. 그 다음 줄에서 img2 요소의 display 속성을 "none"으로 설정하여, 초기에는 img2가 보이지 않도록 합니다. 그 후, document.querySelector("img")를 사용하여 문서 내 첫 번째 요소를 가져와, 마우스 이벤트를 등록합니..

문자열 활용하기 원시 유형과 객체 앞에서 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을때는 '객체'라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 자바스크립트에서 number와boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객체(wrapper object'라고 부릅니다. number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사..

퀴즈 사이트 만들기 여섯번째 직접 만들어본 퀴즈 사이트입니다. 답을 선택하면 틀린답인지 정답인지 구별하여 강아지가 알려주고, 답을 선택하면 나오는 다음 문제 버튼을 누르면 다음 문제로 넘어갑니다. HTML Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 kshkmn0929@naver.com JAVASCRIPT 자바스크립트 설명 quizInfo 안에 배열 안에 객체 데이터를 저장하는 방식을 이용하여 정보처리기능사 문제 6개를 저장합니다. 문제출력 이 함수는 매개변수로 인덱스 값을 받아와서 해당 인덱스에 해당하는 퀴즈 정보를 화면에 출력하는 기능을 가지고 있습니다. 함수 내부에서는 문자열 템플릿 리터럴을 사용하여 HTML 요소들을 동적으로 ..

코딩 일기 어려웠던 부분들을 다시 한번 공부하고 배웠던걸 복습하는 시간을 가지고 정리해 봤습니다. innerText DOM 요소의 텍스트 내용을 반환하거나, 텍스트 내용을 설정하는 데 사용됩니다. HTML 태그를 제거하고 텍스트만 반환합니다. classList DOM 요소의 클래스 이름을 관리하기 위한 속성입니다. add, remove, toggle, contains 등의 메소드를 제공하여 클래스를 추가, 제거, 전환 및 검색할 수 있습니다. addEventListener 이벤트를 처리하기 위한 메소드로, 지정된 이벤트에 대한 콜백 함수를 등록합니다. 이벤트 유형과 콜백 함수를 지정할 수 있으며, 이벤트가 발생하면 콜백 함수가 실행됩니다. textContent DOM 요소의 텍스트 내용을 반환하거나, 텍..

퀴즈 사이트 만들기 다섯번째 정보처리기능사 문제 풀이용으로 만들어본 퀴즈 사이트 다섯번째 입니다. 스크립트 코드만 정리하여 보여드리드록 하겠습니다. JAVASCRIPT // 문제 정보 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2007년 04월 01일(2회)", infoNumber: "20070201", infoQuestion: "flip-flop의 종류에 해당하지 않는 것은?", infoChoice: { 1: "R-S", 2: "J-K", 3: "D", 4: "R" }, infoAnswer: "4", infoDesc: "R 플립플롭은 존재 하지 않습니다." },{ infoType: "정보처리 기능사", infoTime: "2007년 04월 01일(2..

01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 문제 풀이 배열을 선언하고 초기화합니다. join() 메소드를 이용하여 배열의 각 요소를 구분자로 결합한 문자열을 생성합니다. join("*") : 구분자로 *을 사용하여 문자열을 생성합니다. join("-") : 구분자로 -을 사용하여 문자열을 생성합니다. join("") : 구분자를 사용하지 않고 각 요소를 연속적으로 이어붙여 문자열을 생성..