Leeyanggoo

HTML MUSIC PLAYER 노래 제목 가수 이름 music__wrap은 만들고자 하는 플레이어의 영역이며, 자식 요소로 기능 및 디자인 요소를 하나씩 추가해나갑니다. music__header부터 control의 title까지는 플레이어 정보 및 노래 정보를 나타내는 부분입니다. 하단의 progress부터 control까지가 주로 자바스크립트로 제어할 부분입니다. 곡의 현재 진행, 전체 길이, 버튼의 동작을 담당합니다. Javascript 선택자 const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArt..

HTML HMM GAME WORLD Play Music Play Music Play Music Play Music Play Music Play Music ".cursor"는 마우스 커서를 의미합니다. "#header"는 상단에 고정되며, ".time"은 '현재 시간'을 입력받습니다. ".icon__box"는 화면에 출력할 아이콘 모음입니다. "#footer"는 하단에 고정되며, ".info"에 현재 사용자에게 운영체제(OS) 정보 및 브라우저 크기를 입력받습니다. CSS https://github.com/leeyanggoo/web2023/tree/main/Javascript/game/css new Date() 함수와 userAgent 속성을 알고 계신가요? Javascript window.onload =..

문자열 객체? 문자열 객체는 자바스크립트 자료형 중 원시 유형의 하나로 문자열을 다루기 위한 기본 자료형입니다. 문자열 객체는 연속된 유니코드 문자들의 시퀀스를 표현하며, 다양한 문자열 조작 메서드를 제공합니다. 이 메서드들을 사용하여 문자열의 길이를 구하거나, 부분 문자열을 추출하고, 문자열을 검색, 대체, 병합 및 분할하는 등의 작업을 수행할 수 있습니다. 문자열 객체는 원시 문자열과 관련하여 불변성을 가지며, 메서드를 사용하여 새로운 문자열을 생성하더라도 원본 문자열은 변하지 않습니다. 01. at() "문자열".at(인덱스) 인덱스(index)를 받아, 문자열에서 해당 인덱스의 문자를 반환합니다. 음수 인덱스를 사용하면 문자열의 뒤에서부터 위치를 계산합니다. 인덱스가 범위를 벗어날 경우 'unde..

패럴랙스(Parallax)는 무엇인고? 패럴랙스(Parallax)는 물체의 위치나 각도에 따라 관찰하는 시각적인 변화를 말합니다. 이는 눈이 물체를 볼 때, 눈의 위치나 시선이 바뀌면 물체의 위치나 모양이 바뀌어 보이는 것을 의미합니다. 이 패럴랙스 효과를 웹 디자인에서 스크롤과 함께 사용하는 걸 '패럴랙스 스크롤링'이라고 합니다. 패럴랙스 스크롤링은 사용자가 스크롤링할 때 레이어들이 다른 속도로 움직이는 효과를 주어 페이지가 동적이고 입체감 있는 느낌을 줍니다. 일반적으로 CSS와 Javascript를 이용하여 구현하며, Javascript에서는 스크롤의 위치에 따라 레이어를 이동시키는 코드를 작성합니다. 코드를 작성해봅시다 HTML Are You Crazy? We must go to Mars CSS ..

패럴랙스(Parallax)는 무엇인고? 패럴랙스(Parallax)는 물체의 위치나 각도에 따라 관찰하는 시각적인 변화를 말합니다. 이는 눈이 물체를 볼 때, 눈의 위치나 시선이 바뀌면 물체의 위치나 모양이 바뀌어 보이는 것을 의미합니다. 이 패럴랙스 효과를 웹 디자인에서 스크롤과 함께 사용하는 걸 '패럴랙스 스크롤링'이라고 합니다. 패럴랙스 스크롤링은 사용자가 스크롤링할 때 레이어들이 다른 속도로 움직이는 효과를 주어 페이지가 동적이고 입체감 있는 느낌을 줍니다. 일반적으로 CSS와 Javascript를 이용하여 구현하며, Javascript에서는 스크롤의 위치에 따라 레이어를 이동시키는 코드를 작성합니다. 코드를 작성해봅시다 HTML Javascript Parallax Effect07 패럴럭스 이펙트 ..

* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; align-items: center; justify-content: center; display: flex; } .opacity { animation: opacity 2s ease-in-out; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #result { width: 50%; } .quote { color: #fff; font-size: 2rem; margin: 1rem 0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;..

* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; align-items: center; justify-content: center; display: flex; } .opacity { animation: opacity 2s ease-in-out; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #result { width: 50%; } .quote { color: #fff; font-size: 2rem; margin: 1rem 0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;..

#header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px rgba(0,0,0,0.5); } .slider__img { position: relative; width: 100%; height: 100%; overflow: hidden; ..

#header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 ..

cloneNode()와 appendChild() 알고 가자! #header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } ...

cloneNode()와 appendChild() 알고 가자! #header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } ...

다양한 스크립트를 활용해보자!! /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */ /* display: flex; flex-wrap: wrap; */ width: 100%; height: 520px; } .slider { /* 개별적인 이미지 */ position..

다양한 스크립트를 활용해보자!! /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */ display: flex; flex-wrap: wrap; width: 4000px; height: 520px; } .slider { /* 개별적인 이미지 */ position: re..

opacity와 transition을 알아보자!! opacity 속성은 요소의 투명도를 지정하는 데 사용됩니다. 이 속성은 0~1 사이의 값을 가질 수 있으며, 0에 가까울수록 요소가 투명해지고, 1에 가까울수록 불투명해집니다. opacity 속성은 다양한 요소에 적용될 수 있으며, 텍스트, 이미지, 배경 등에도 적용할 수 있습니다. transition 속성은 요소의 애니메이션 효과의 지속 시간을 정하는 데 사용됩니다. 이 속성을 사용하면 요소의 상태가 변할 때 부드러운 애니메이션 효과를 적용할 수 있습니다. transition 속성은 다양한 속성에 적용될 수 있으며, 이동, 회전, 크기 변경 등 다양한 애니메이션을 구현할 수 있습니다. 즉, opacity와 transition 속성을 이용하면 마치 레이..

완성을 향해 달려가는 퀴즈 이펙트 CBT 유형입니다!! 지난 포스팅에서 사용자의 정답과 OMR의 선택을 동기화하는 기능까지 추가해 보았는데요. 오늘은 다양한 유형의 CBT를 가져올 수 있게 하였고, 이를 모달창에서 사용자가 선택할 수 있도록 했습니다. 또한 모달창을 이용해서 사용자가 입력한 이름을 시험지에 표시했습니다. 여러 데이터를 가져오고 넘기는 게 중요합니다! 이번 예제는 코드가 길고 CSS와 JS, JSON 파일이 나뉘어 있으므로 함께 보시면서 읽기를 추천합니다! 😮‍💨 이번 예제 코드 보러 가기 이제 선택자와 변수 파악은 필수!! const cbtQuiz = document.querySelector(".cbt__quiz") const cbtOmr = document.querySelector("...

매일 발전하는 퀴즈 이펙트!! 이번엔 사용자가 선택한 문제 보기와 우측의 OMR 선택이 함께 되도록 하고, 두 선택 모두 다 남은 문제수에 반영되도록 하는 기능을 추가했습니다. 그리고 문제에 그림이 필요하거나 추가적인 설명이 필요한 경우 나타내고 없는 경우는 감추는 것까지 포함했습니다! 가져올 데이터를 잘 살피자! //정답 확인 const newQuestion = () => { const exam = []; const omr = []; questionAll.forEach((question, number) => { exam.push(` ${question.number}. ${question.question} ${question.question_img} ${question.question_desc} ${qu..

CBT란 컴퓨터를 이용해 시험을 보는 'Computer Based Test'의 약자입니다. 위의 예제처럼 컴퓨터를 통해 시험을 보고 답을 체크한 뒤 평가를 받을 수 있는 형식의 문제 유형을 만들어 봤습니다. 아직 모든 기능 구현이 끝난 건 아니지만 현 상태까지 쓰인 기능에 대해 소개하겠습니다! 문제 정보를 json 파일에 담고 불러오자!! json은 "JavaScript Object Notation"의 약자로 자바스크립트 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷을 말합니다. 우리는 불러올 문제 데이터를 자바스크립트 객체 문법으로 구조화 시켜서 가져올 수 있습니다. [ { "subject": "웹디자인기능사", "question": "색의 3속성 중 사람의 눈이 가장 예민하고 ..

1번 문제 이 문서에는 1번 이미지가 삽입되어 있습니다. 이미지 위에 마우스 포인터를 올려 놓았을 때 2번 이미지로 바뀌었다가, 이미지에서 마우스 포인터를 다른 곳으로 이동하면 1번 이미지로 바뀌는 소스를 작성해 보세요. 길라잡이 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결 후 이미지를 가져와서 변수에 저장합니다. 마우스 포인터를 이미지 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. 이벤트가 발생했을 때 이미지의 src 속성 값을 바꿉니다. 마우스를 대시오 당장!! let img = document.querySelector("img"); img.addEventListener("mo..

문자열이란? 자바스크립트에서 문자열(string)은 텍스트 데이터를 뜻합니다. 보통 문자열은 따옴표(", ')로 감싸서 표현하며, 불변의 속성을 가진 원시 유형입니다. 하지만 문자열은 여러 속성과 메서드를 사용해서 변경할 수 있습니다. 자바스크립트는 기본 데이터 타입인 문자열(String), 숫자(Number), 불리언(Boolean), 심볼(Symbol), null, undefined 등을 객체처럼 다룰 수 있는 래퍼 객체(wrapper object)를 제공합니다. 즉 원시 유형을 객체로 변환했다가 다시 원시 유형으로 되돌리는 것인데요, 이것을 오토박싱(autoboxing)이라고 합니다. 문자열의 길이 - length 속성 문자열의 길이를 찾을 때는 배열에서 사용하듯 length 속성을 사용합니다. l..

▼귀여운 모달창 보기!! 나날이 발전하는 퀴즈 이펙트 여섯 번째 순서입니다!! 오늘은 사용자가 객관식 문제를 풀고 다음 문제로 넘어가는 형식의 페이지를 만들었습니다. 모든 문제를 풀면 맞춘 정답 개수와 점수까지 알려주는 창도 띄워보았습니다! 내가 필요한 부분만 정해서 입력해보자!! 정답입니다! 땡! 다음 문제 × 먼저 다시 돌아온 HTML 코드입니다! 큰 변화는 없지만 하단에 보기 부분을 주석 처리한 게 보이시나요? 이번엔 많은 문제 정보를 효율적으로 입력하고 직관적으로 알아보기 위해 필요한 부분만 "innerHTML"을 이용하여 정보를 입력하겠습니다. // 문제 정보 const quizInfo = [ { infoType: "웹디자인기능사", infoTime: "2015년 4회", infoNumber: ..

지난 레이아웃 만들기에서 슬라이드 유형을 만들었습니다. 근데 디자인만 하고 기능을 못 넣었던 게 아쉬워서 어떻게 슬라이드 기능을 구현하는지 알아보고 예제를 만들어봤습니다! 원래 예제는 CSS와 HTML이 적용된 박스들이 커서 바로 적용하지 못했습니다ㅠㅠ.. 그래도 원리를 알아보는 시간이라 생각하면 되겠습니다! CSS를 이용해서 div 쌓기! 1 2 3 먼저 만들 슬라이드 개수만큼 div를 만들고 이미지를 추가했습니다. 그리고 몇 번째 슬라이드인지 확인하는 버튼도 그에 맞게 만들었습니다. 그리고 inner의 width를 100vw를 줘서 한 화면에 하나의 슬라이드만 보이게 하고 float: left로 가로로 나열된 모양을 만들었습니다. section에는 overflow: hidden을 줘서 넘치는 슬라이드..

문제 개수가 많을 때 어떻게 해야 할까? 이전 포스팅에서 객관식 문제를 만들기 위한 코드를 알아봤습니다. 4개의 보기가 있을 때 객체 속의 배열을 불러오기 위해 "querySelectAll()"과 for문을 사용했습니다. 그렇다면 마치 정보처리 기출 문제집처럼 여러 문제가 한 회에 있는 경우라면 어떻게 해야 할까요? . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 이전에 이펙트 세 번째에서 주관식이 세 문제가 있는 HTML 코드를 가져왔습니다. 문제 3개에 이렇게 많은 코드가 나열된다면, 문제가 60개 있으면 어떻게 될까요? 이 코드를 20배 써야 한다면 알아보기도 힘들고 적기도 힘들지 않을까요? 우리는 여러 보기가 있는 객관식 ..

오늘은 사용자가 input 창에 입력하는 값에 따라 결과를 보여주는 검색 이펙트를 만들어 보았습니다. 이번 예제는 if문에 대한 이해와 forEach(), 선택자 모두 모두 중요한 예제기 때문에 이전에 배웠던 개념을 까먹었거나 헷갈린다면 다시 복습하고 오는 것도 좋습니다! if문의 false 조건 기억나십니까? HTML 코드 : class명을 잘 확인하자!! 🤪자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 개수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. JS 코드 : 선택자와 if, forEach()를 잘 이해해보자!! //선택자 co..

이전의 마우스 이펙트는 자바스크립트의 라이브러리 "GSAP"를 이용해서 좀 더 커서가 부드러운 효과를 만들었습니다. 이제는 쭉 "GSAP"를 적용하는 방향으로 이펙트를 만드려 합니다! 이번에 만들 마우스 이펙트는 조명 효과를 낼 수 있는 기능입니다. //CSS에 저장된 img03 body.img03 { background-image: url(../img/mouseEffect03-min.jpg); } body.bg03::after { background-color: rgba(245, 177, 121, 0.7); } I've never loved myself 단 한번도 스스로를 사랑하지 않았노라 CSS를 적용해서 조명효과를 만들어보자!! #header { z-index: 100; } #footer { z-i..

이전의 첫 번째 마우스 이펙트 포스팅에서는 mouseover를 이용한 마우스 효과를 알아봤습니다! 또한 clientX와 같은 이벤트 객체로 위치 정보를 불러오고, getAtrtibute()를 이용해 코드도 축약해봤습니다. 이번엔 자바스크립트 라이브러리인 "GSAP"를 이용해서 이펙트를 만들어보겠습니다! Have you ever been fiery passion to anyone? 너는 누구에게 한번이라도 뜨거운 사람이었느냐 이번 예제의 HTML 코드입니다. 안도현 시인의 유명한 시 "너에게 묻는다"를 가져와봤습니다. 저번과는 다르게 "mouse__cursor" div가 2개가 있는 걸 보실 수 있습니다. 우리는 커서를 2개 만들어서 하나는 포인터를 다른 하나는 포인터를 따라오는 원을 만들 예정입니다! G..

자바스크립트에서는 마우스의 좌표에 따라 여러 가지 기능을 부여할 수 있습니다. 먼저 마우스 이펙트를 만들기 위해선 어떻게 마우스의 좌표값을 불러오는지 알아야 합니다. 이벤트 객체로 위치 정보를 불러오자! clientX 브라우저 기준 X 좌표 값 clientY 브라우저 기준 Y 좌표 값 offsetX 요소 기준 X 좌표 값 offsetY 요소 기준 Y 좌표 값 pageX 페이지 기준 X 좌표 값 pageY 페이지 기준 Y 좌표 값 screenX 디바이스 기준 X 좌표 값 screenY 디바이스 기준 Y 좌표 값 이벤트 객체는 이벤트가 발생했을 때 생성되며, 이벤트와 관련된 정보를 담고 있습니다. 위의 8가지 속성은 이벤트 객체의 속성이자, 이벤트가 발생한 위치에 대한 정보를 담고 있습니다. Laugh, a..

이젠 주관식 퀴즈를 넘어 퀴즈의 정석이라 할 수 있는 객관식 퀴즈를 만들어 볼 차례입니다! 객관식은 정답이 될 수 있는 여러 개의 보기를 보여줘야 하고 또 선택함에 따라 바뀌는 코드를 짜야 하기 때문에, 주관식보다 더 복잡한 코드를 짜야 한다고 볼 수 있습니다. 객체와 배열 그리고 for문 //문제 const quizInfo = [ { infoType: "웹디자인기능사", infoTime: "2016년 4회", infoNumber: "1", infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?", infoChoice: ["선, 색체, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 공간 수량"], infoAnswer: "2", infoDesc: ..

요번에 공부하면서 정말이지 헷갈리고 이해하기 어려웠던 세 가지 함수 유형에 대해 알아보려고 합니다! 이해를 돕기 위해 모두 같은 결과를 도출하는 예제로 작성해보겠습니다! 객체생성자 함수 function Func(num, name, word){ this.num = num; this.name = name; this.word = word; this.result = function(){ document.write(this.num + ". " + this.name + "가 " + this.word + "되었읍디다. "); }//객체의 메서드라고 함. } //인스턴스 생성 new const info1 = new Func(1, "함수", "실행"); const info2 = new Func(2, "자바스크립트", "..

더 많아진 댕댕이 ㄷㄷ; 지난번에는 주관식 문제가 1개 있는 퀴즈 유형을 알아봤습니다! 선택자와 메서드, 속성을 이용하면 다양한 이펙트를 만들 수 있다고 말씀드렸습니다. 그렇다면 이번엔 주관식이 여러 개 있는 퀴즈는 어떻게 만들어야 할까요? 🧐 선택자 querySelectorAll()을 잘 이용하자! . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 이 길게 늘어진 HTML 코드가 보이십니까..? 문제가 3개로 늘었으니 그에 따라 박스도 3배 늘었습니다. 이렇게 HTML 요소가 여러 개 있고 이를 선택해야 할 때는 "querySelectorAll()"을 이용해야 합니다! //선택자 const quizWrap = document.qu..

이전 포스팅에서 "정답 확인하기"를 누르면 정답을 반환하는 스크립트를 살펴봤습니다. 다양한 선택자와 메서드를 이용하면 그만큼 더 다양한 효과를 만들 수 있습니다. 지난번에 이어서 이번엔 주관식 정답을 처리하는 과정을 알아보겠습니다! 메서드뿐만 아니라 속성도 잘 알아야 한다!! //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQuestionNum = quizWrap.querySelector(".quiz__que..