jongyung

설명: 해당 페이지의 탭 메뉴를 만든 script 에 대해서 설명하겠습니다. script const navItems = document.querySelectorAll(".nav > ul > li"); navItems.forEach((item) => { item.addEventListener("mouseover", () => { const subMenu = item.querySelector(".submenu"); const allSubMenus = document.querySelectorAll(".submenu"); // 모든 서브메뉴를 보이게 하기 allSubMenus.forEach((menu) => { menu.style.display = "block"; }); // 현재 아이템의 서브메뉴만 숨기지 않..

설명: 지난 번 게임효과 게시글에서는 화면 구현에 대한 설명을 했습니다. 이번에는 구현한 화면이 정말로 실행이 되어, 음악을 재생할 수 있드록 설정했습니다. html 파일이 아닌, js 파일에 설정했습니다. 설명은 이 js 파일을 토대로 하겠습니다. music.js const allMusic = [ { name : "1. Rain on me", artist : "Lady Gaga(ft Ariana Grande)", img : "music_view01", audio: "music_audio01" }, { name : "2. Juicy", artist : "Doja Cat", img : "music_view02", audio: "music_audio02" }, { name : "3. My hair", art..

설명: 보이는 것처럼 게임 효과를 활용해서 페이지를 만들어 봤습니다. css 는 따로 설명하지 않고, body 의 footer 와 script 를 나누어서 설명하겠습니다. body 의 footer 현재 맥을 사용하고 있으면, 화면 크기는 1920 x 760 입니다. footer 에는 별다른 설정을 하지 않았습니다. script 에서 함수식을 활용해서 화면 크기를 구현하는 설정을 했습니다. script jquery 와 gsap 를 이용했습니다. jQuery는 HTML의 클라이언트 사이드 스크립팅을 간편하게 만드는 인기 있는 JavaScript 라이브러리입니다. 다양한 기능과 유용한 메서드를 제공하여 웹 개발을 더욱 효율적이고 쉽게 할 수 있도록 도와줍니다. GSAP (GreenSock Animation P..

문자열 객체 문자열 객체(String Object)는 문자열 데이터를 나타내는 객체입니다. 문자열은 일련의 문자를 포함하며, 문자열 객체는 이러한 문자열 데이터를 생성, 저장 및 조작하는 데 사용됩니다. 자바스크립트에서는 문자열 객체가 내장된 String 클래스의 인스턴스입니다. 이러한 객체를 만들려면 따옴표나 쌍따옴표로 둘러싸인 문자열 리터럴을 사용하거나, String 클래스의 생성자를 사용하여 새로운 문자열 객체를 만들 수 있습니다. 문자열 객체는 문자열 데이터를 다루는 다양한 기능을 제공합니다. 예를 들어, 문자열 객체의 메서드를 사용하여 문자열을 자르거나 붙이거나 대문자로 바꾸는 등의 작업을 수행할 수 있습니다. 🐇at() const str = '👨‍👩‍👦'; console.log(str.at(0..

설명: 패럴랙스 효과를 이용해서 사이트를 간단하게 만들어 봤습니다. 스크롤을 내리면 효과가 적용이 되는 것을 알 수 있습니다. 왼쪽 상단에는 스크롤의 값이 숫자로 나오게 설정했습니다. 설명은 style, body 그리고 script 로 나눠서 하겠습니다. style @font-face { font-family: 'ReciaSerifDisplay'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/recia/ReciaSerifDisplay.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/recia/ReciaSerifDisplay.eot?..

설명: Parallax effect(피럴랙스 효과)는 물체의 움직임에 따라 시차가 발생하여, 같은 물체를 보는 관찰자들이 서로 다른 시각적인 경험을 하는 현상을 말합니다. 쉽게 말해, 우리 눈 앞에 있는 두 개의 물체가 서로 다른 거리에 위치해 있을 때, 더 가까이 있는 물체는 더 빨리 움직이는 것처럼 보이고, 더 멀리 있는 물체는 더 느리게 움직이는 것처럼 보입니다. 이 효과를 적용해보겠습니다. body 의 main 과 좌측 하단에 있는 aside 그리고 script 로 나눠서 설명하겠습니다. body 의 main 01 Section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 Section2 산을 움직이려 하는 이는 작은 돌을 들어내는 일로 시작한다. 03 Section3 높은 목표를 세..

설명: 이미지 위에 썸네일을 띄웠습니다. 왼쪽과 오른쪽에는 preview 버튼과 next 버튼을 만들어서 각자 클릭했을 때 해당하는 이미지가 순서대로 나오도록 설정했습니다. body 의 main 와 script 로 나눠서 설명하겠습니다. body 의 main prev next body 의 구조는 간단합니다. 이미지 전체가 나오는 영역을 slider__img 로 정하고, 썸네일과 버튼의 영역도 각각 slider__thumb, slider__btn 로 정했습니다. 이미지의 왼쪽과 오른쪽에 위치한 preview 와 next 버튼도 각각의 class를 정했습니다. script //선택자 let images = [ "./img/sliderEffect06-min.jpg", "./img/sliderEffect07-m..

설명: 버튼은 페이지의 왼쪽과 오른쪽에 있는 preview 와 next 버튼을 말하고, 닷메뉴는 페이지의 하단에 위치한 다섯 개의 동그란 메뉴를 말합니다. 각각의 버튼과 닷메뉴를 누르면, 이미지가 이동하면서 누른 순서와 방향대로 보여집니다. body 의 main 과 script 로 나눠서 보여드리겠습니다. body 의 main prev next 각 이미지에 class 를 부여해서 해당하는 순서의 닷메뉴를 누르면, 그 이미지가 보일 수 있도록 했습니다. script //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 ..

설명: 이번에는 연속으로 위로 움직이는 슬라이드 효과를 만들어 봤습니다. 왼쪽으로 움직이는 슬라이드 효과와 다른 점이 몇 가지 없습니다. 간략하게 설명하면, 움직이는 축을 가로 즉, x 축에서 세로인 y 축으로 바꾸면 됩니다. 그렇게 바꾼 축을 실행하려면, 스타일 시트에서 한 display : flex; 설정을 해제하고, 선택자 중에서 이미의 가로 값을 세로 값으로 바꿔서 쓰면 됩니다. 스타일 시트, 선택자, javascript, gsap 그리고 jquery 를 순서대로 설명하겠습니다. style /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: c..

javascript sliderInner.appendChild(sliderClone); function sliderEffect(){ currentIndex++; sliderInner.style.transition = "all 0.6s"; sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"; //마지막 이미지에 위치했을 때 if(currentIndex == sliderCount){ setTimeout(() => { sliderInner.style.transition = "0s"; sliderInner.style.transform = "translateX(0px)"; }, 700); currentIndex = 0; }..

이번에는 위로 움직이는 슬라이드를 만들어 봤습니다. 왼쪽으로 움직이는 슬라이드는 X축을 중심으로 움직였습니다. 따라서 이번 슬라이드 효과는 Y축을 중심으로 움직인다는 것을 우츄할 수 있습니다. 그렇기 때문에 지난 번과 별로 다른 것이 없습니다. 공통된 style 부분과 선택자 부분은 생략하겠습니다. script - javascript sliderInner.style.transition = "all 0.6s"; setInterval(() => { currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0 ... sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)"..

이미지가 옆으로 움직이는 슬라이드 효과를 만들어 봤습니다. style 부분과 body 의 main 부분이 동일하니, 이번에는 생략하겠습니다. javascript 와 gsap 그리고 jquery 의 세 가지 방식으로 써봤습니다. 선택자는 동일하게 적용되었기 때문에 따로 쓰자면, //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySe..

기본적인 슬라이드 트랜지션 효과에 대해서 알아보겠습니다. body 의 main main 은 보이는 것처럼 간단합니다. 슬라이드에 들어갈 이미지를 slider__wrap 과 slider__img 라는 div 박스에 넣어서 묶었습니다. style 이미지를 가운데로 옮겨주고, 크기를 800 * 450 으로 정했습니다. 이미지가 바뀔 때 0.3 초가 걸리도록 했습니다. ::before 가상 요소를 설정해서 이미지마다 '이미지+번호'를 적었습니다. script - javascript //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); cons..

지난 번에 이어서 추가한 내용들을 위주로 보여드리겠습니다. 점수 결과 표시 //정답 확인 const answerQuiz = () => { const cbtSelects = document.querySelectorAll(".cbt__selects"); let correctCount = 0; // 맞힌 문제 수를 저장할 변수 questionAll.forEach((question, number) => { const quizSelectsWrap = cbtSelects[number]; const userSelector = `input[name=select${number}]:checked`; const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}..

지난 게시글에서 추가한 내용이 script에 있으므로 이번에는 script 만 보여드리면서 설명하겠습니다. script 전체 문제 수와 전체 문제 수에서 푼 문제 수를 뺀 남은 문제 수를 표현하기 위해서 추가한 부분들이 있습니다. const cbtLength = document.querySelector(".cbt__length); const cbtRest = document.querySelector(".cbt__rest); 전체 문제 수는 변수 cbtLength 에, 남은 문제 수는 변수 cbtRest 에 저장한 선택자를 만들었습니다. questionLength = questionAll.length; cbtLength.innerHTML = questionLength; cbtRest.innerHTML = ..

body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main 2020년 1회 정보처리기능사 기출문제 59분 10초 제출하기 수험자 : ooo 시험지 옆에 omr 카드를 배치한 모양으로 만들기 위해서 보이는 것처럼 각 부분들을 나눠서 만들었습니다. script 지난 번처럼 script에서 ``안에 내용을 입력하는 방식을 썼습니다. 이렇게 하면, 반복적인 입력을 하지 않고, ${}안에 입력하고 싶은 부분을 불러오면 됩니다. fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 re..

틀린 문제 위주로 오답 정리를 하겠습니다. 01. 다음의 결괏값을 작성하시오. let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); 답: 0 02. 다음의 결괏값을 작성하시오. let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); 답: 20 21 전치, 후치 문제입니다. console.log(result) 값은 1 + a 와 b 그리고 1+ c 의 값을 더해야 하고, console.log(a+b+c) 에서 a 와 b 그리고 c 모두 1씩 증가한 ..

설명: 마우스를 오버하면 이미지가 바뀌는 효과를 넣은 자바스크립트와 버튼을 누르면 사이드에서 메뉴가 나오는 자바스크립트를 만들어 봤습니다. 설명하기 쉽게 body 부분의 코드를 각각 나눠서 보여드리겠습니다. 마우스 오버하면 화면 바꾸기 우선, 이미지를 자바스크립트 파일 안에 저장해놓아야 합니다. 이미지의 이름을 각각 sunrise 와 summer 로 정했습니다. 이미지를 저장해놓은 경로를 코드에서 볼 수 있듯이(img src="assets/ico/sunrise/jpg"), 경로가 단순할 수록 덜 헷갈립니다. 화면에 나올 이미지를 sunrise 로 정해서 div 안에 넣었습니다. 이미지를 불러오면서, 효과를 넣으려면 class 가 필요하기 때문입니다. sunrise 라는 이름으로 변수를 저장했습니다. 해당..

10 - 1 문자열에 접근하기 자바스크립트에서는 간단한 텍스트를 처리하려고 문자열 유형을 사용하곤 합니다. 원시 유형과 객체 단순히 값만 가지고 있는 경우 '원시 유형'이라고 하고, 프로퍼티와 메서드를 가진 경우 '객체'라고 합니다. 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형입니다. 메서드(method) 또는 멤버 함수(member function)는 객체 지향 프로그래밍에서 객체과 관련된 서브 루틴 (또는 함수)이며 데이터와 멤버 변수에 대한 접근 권한을 갖습니다. 예를 들어보면, 간단히 변수에 문자열을 할당한 후 length 라는 프..

링크: 퀴즈 이펙트 06 (daanbi1345.github.io) 객관식 문제 유형인데, 한 문제를 풀면 다음 문제로 넘어가는 슬라이드 형식으로 만들어 보았습니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main 몇 문제 째인지 정답입니다! 오답입니다! 다음 문제 구조는 지난 번과 같습니다. quiz choice 부분을 script 에서 choiceTag 를 만들어서 ``안에 입력했습니다. 보다 간결한 방식이므로 이 방법을 적용했습니다. script 문제 정보 quizInfo 는 배열 안에 넣은 객체로 만들었습니다. 그 중에서도 infoChoice 즉, 객관식 선택지는 배열로 만들었습니다. 이전에 썼던 방식과 같이 선택자를 만들어서 반복적인 입력을 피했습니다. 이번에는..

이번에는 객관식을 여러 개로 늘려서 만들어 보겠습니다. 링크: 퀴즈 이펙트 05 (daanbi1345.github.io) 60문제가 담겨있기 때문에 문제 예시는 1번과 2번 문제만 쓰겠습니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main body에 이전에 했던 방식대로 div 태그에 class 명을 정해서 만들어도 됩니다. 하지만 이번에는 다른 방식을 적용해서 만들어 봤습니다. script에서 문제 출력 부분을 보면 알 수 있습니다. script 선택자를 querySelector와 querySelectorAll로 만들었습니다. querySelector()는 Element 인터페이스의 메소드 입니다. CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항..

모든 문제를 적고 틀린 문제만 오답 정리를 했습니다. 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); } 답: 1 3 true indexOf() 는 자릿수를 반환하고, 왼쪽에서 가장 첫 번 째부터 0번 째로 순서를 셉니다. 그러므로 javascript 의 알파벳의 왼쪽에서부터 세면, a 는 두 번 째 즉, 1 이 반환됩니다. lastIndexOf() 는 자릿수를 반환하고, 오른쪽에서 순서를 세지..

검색을 할 수 있는 효과를 적용해서 만들어 보았습니다. 간략한 설명: 함수식을 이용해서 검색어에 해당되는 단어만 보이도록 설정했습니다. body의 main부분과 script부분을 나눠서 설명하겠습니다. body의 main JAVASCRIPT CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animatio..

마우스 따라다니는 돋보기 효과에 대해서 알아보겠습니다. 돋보기로 보는 것처럼 보이는 효과를 넣었습니다. body 의 main 부분과 style 그리고 script 부분으로 나눠서 설명하겠습니다. body 의 main It is hard to fight an enemy who has outposts in your head. 당신의 머릿속에 초소를 가지고 있는 적과 싸우기란 어려운 일이다. 설정이 매우 간단합니다. style에서 설정해줄 부분들을 class로 설정하고, 텍스트를 입력했습니다. style 지난 번과 비슷한 구조입니다. z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. po..

GSAP를 이용해서 마우스를 따라다니는 효과에 대해서 알아보겠습니다. The GreenSock Animation Platform(gsap) 를 사용했는데요, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. 자바스크립트 라이브러리란? 쉽게 말해, 자주 사용되지만 일일히 구현하기엔 까다롭거나 불편한 자바스크립트의 코드의 특정 기능을 기성품으로 만들어 묶어놓은 패키지 같은 것을 말합니다. 예를 들자면 가구를 만들때 경첩이나 슬라이드 같은 하드웨어는 만들어진 것을 사서 조립하는 것과 비슷한 개념입니다. body 의 main 부분과 style 그리고 script 부분으로 나눠서 설명하겠습니다. body 의 main One needs to be slow..

화면에서 보이는 것처럼 마우스에 효과를 줄 수 있습니다. 이번에는 마우스 따라다니기 효과에 대해서 알아보도록 하겠습니다. body의 main부분과 style부분 그리고 script부분을 나눠서 설명하겠습니다. body의 main Life isn't about finding yourself. Life is about creating yourself. 삶은 자신을 찾아가는 것이 아니라 만들어 가는 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px body부분은 보이는 것처럼 간단합니다. 이번에는 class를 style과 함수를 적용하기 위해서 지정했습니다. ..

객관식 확인하기 유형을 만들어 보겠습니다. 링크: 퀴즈 이펙트 04 (daanbi1345.github.io) 객관식 문제를 풀면, 정답인지 오답인지를 확인하고, 정답을 확인하는 버튼이 사라지고 해설이 나오게 했습니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main 정답입니다! 오답입니다! 정답 확인하기 지난 번과 같은 틀 안에 주관식 답을 적는 칸은 없애고, 객관식 선택 버튼을 추가했습니다. div class="quiz__choice"로 묶어서 label for 태그에 input typs="radio" 태그를 넣었습니다. label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. la..

모든 문제를 적고 틀린 문제만 오답 정리를 했습니다. 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 답: 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 답: 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 답: 73

이번에는 세 가지의 주관식 문제를 만들어 보겠습니다. 링크: 퀴즈 이펙트 03 (daanbi1345.github.io) 정답 칸에 답을 적어서 맞으면, 정답입니다!가 뜨면서 웃는 강아지가 나오고, 틀리면, 오답입니다!가 뜨면서 우는 강아지가 나오고, 그 밑에 칸이 생기면서 tip이 나옵니다. body의 main부분과 script를 나눠서 보여드리겠습니다. body의 main . 정답입니다! 오답입니다! 정답 확인하기 의 부분이 문제부분입니다. 한 문제의 body만 보여드리는 것이기 때문에 main안에 해당 div class="quiz"부분은 세 개가 있습니다. quiz question에 em태그와 span태그를 넣어줬습니다. .quiz__question em { color: #ff3737; } .quiz..

수업 시간에 했던 테스트를 복습해보겠습니다. //0~100 for문 for(let i=0; i { document.write("안녕"); } a(); const b = () => { document.write("하이"); } b(); c = (str) => { document.write(str); } c("hello"); func = () => { const d = "hi"; return d; } document.write(func()); 답: 안녕 하이 hello hi 위의 식들을 화살표 함수로 바꾼 식들입니다. function을 생략하고 괄호를 = () => 의 형태로 바꿔썼다고 생각하면 외우기 쉽습니다. //1~25까지의 숫자 중 짝수는 빨강, 홀수는 파랑색의 숫자를 가진 테이블 let a = 1;..