꿈트(GGUMT)

자바스크립트를 이용해 슬라이더 효과 만들기 SLIDER EFFECT : 슬라이드 유형 웹페이지 만들기 아래쪽으로 자연스럽게 넘어가는 5페이지 짜리 슬라이드 만들기 완성화면 ✈00.HTML Javascript Slide Effect03 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com 🏴🏳‍🌈 ✈01.CSS 🏴🏳‍🌈 ✈03.선택자 🏴. appendChild() 메서드는 DOM(Document Object Model)에서 사용되며, 주어진 부모 노드에 새로운 자식 노드를 추가하는데 사용됩니다. // 부모 요소 선택 const parent = document.getElementById('parent-element'); // 새로운 자식 요소 생성 const child = document..

SLIDER EFFECT : 슬라이드 유형 웹페이지 만들기 왼쪽으로 자연스럽게 넘어가는 5페이지 짜리 슬라이드 만들기 완성화면 ✈00.HTML Javascript Slide Effect03 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com 🏴🏳‍🌈 ✈01.CSS 🏴🏳‍🌈 ✈03.선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = slider..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 ✈00. html Javascript Slide Effect01 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com ✈00. CSS =>총 슬라이더의 위치를 슬라이드 한장만큼씩 옆으로 이동해 주면서 이미지를 다르게 보여주는 스크립트를 만든다 세가지 방식으로 스크립트를 적용해 보았습니다 🏳‍🌈00. 공통 선택자 부분 //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = s..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 ✈00. html Javascript Slide Effect02 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com ✈00. CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 움직이는 이미지 */ disp..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 세가지 방식으로 스크립트를 적용해 보았습니다 🏳‍🌈00. 공통 선택자 부분 ✈01. JAVASCRIPT ✈02. GSAP 🏴. GSAP CDN소스를 가져와 적용합니다. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js ✈03. jQuery //jQuery CDN 🏴. jQuery CDN소스를 가져와 적용합니다. https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jq..

정보처리기능사 오답노트 2011년 4월 17일 필기 기출문제 오답노트 입니다. 2. 다음 중 RISC(Reduce Instruction Set Compauter)의 설명으로 옳은 것 은 ? 1) 메모리에 대한 액세스는 LOAD와 STORE만으로 한정되어 있다. 2) 명령어마다 다른 수행 사이클을 가지므로 파이프라이닝이 효율적이다. 3) 마이크로 코드에 의해 새석 후 명령어를 수행한다. 4) 주소지정 방식이 다양하게 존재한다. 6. 8비트 짜리 레지스터A와 B에 각각 11010101과 11110000이들어있다. 레지스터 A의 내용이 00100101로 바뀌었다면 두 레지스터 A , B사이에 수행된 논리 연산은? 1) Exclusive-OR 2) AND연산 3)OR연산 4) NOR연산 11. 연관기억장치의 구..

정보처리기능사 - 시험준비 : 오답노트 2009년 9월 27일 필기 기출문제 전자계산기 일반 채중입 채널은 중앙처리장치와 입출력장치 사이에서 데이터 처리 속도 차이를 보완해 줍니다. 주소지정방식 PC값을 더하는 경우만 상대주소라고 합니다. 상대주소(relative) = 주소부분 + 프로그램카운터(PC) 나머지는 더해지는 레지스터 이름을 그대로 사용합니다. 인덱스 주소방식 = 주소부분 + 인덱스 레지스터(index) 베이스 주소방식 = 주소부분 + 베이스 레지스터(Base) 인터럽트(interrupt) 정상적인 일을 처리하는 도중에 예기치 못한 상황이 발생하여 예기치 못한 일부터 먼저 처리한 후 다시 원래 일을 다시 하는 것 단항연산자 Rotate, Shift, Move, Not, Complement(외 ..

정보처리기능사 시험을 대비해서 기출문제를 풀고 오답노트를 만들어 보자 전자계산기 일반 / pc운영체제 채널장치 입출력 장치와 중앙처리장치 장치 사이 속도 불균형보완(주기억 장치사이에서 입출력 전담기) opcode 명령어 형식-첫번째 바이트에 기억되는 것OP-code + Operand(코드부+주소부) AND 반가산기 자리올림 절대번지 기억장치 고유-16진수로 순서대로 정한 번지 0100 2진수 1011의 1의 보수 1+A =1, 1˙A=A, 0+A =A, 0’A=0 불대수정리 immediate address 주소지정방법 : 처리속도 가장 빠른 것 ASCII코드 -7비트구성 통신제코드/ 128가지문자표현/ -16비트코드는 유니코드 멀티플렉서 -출력이 오직 1개 : 입력은 여러개 -입력이 오직 1개 (출력선 ..

자바스크립트 객관식 퀴즈 만들기 자밥스크립트를 이용하여 JSON파일로 저장한 문제 데이터를 불러와 객관식문제를 만들어 보겠습니다. 정답을 체크하면 omr카드에 체크가 되고, 남은 문제가 표시되며, 다풀고 제출하면 정답과 오답, 채점표시가 나타나는 효과를 적용합니다. 문제를 풀어볼까요? HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 권현정 전체 문제수 : 0문항 남은 문제수 : 0 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 ..

자바스크립트와 json을 사용한 객관식 문제 만들기 문제를 풀어볼까요? html Quiz 객관식 확인 OMRcard 형식 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 59분 10초 제출하기 수험자 : 전체 문제수 : 60문항 남은 문제수 : 59문항 ✈. 01. 객관식 문제를 먼저 html으로 작성 02. json파일에 문제에 대한 데이터를 담기 03. 문제에 대한 html을 자바스크립트로 json데이터를 불러오는 식으로 바꿈 css .cbt__selects{ margin-bottom: 15px; } .cbt__selects label{ display: flex; } .cbt__selects label span{ font-size: 1rem; line-height: 1.5; curso..

✈ . 자바스크립트 MOUSEOVER, MOUSEOUT 이벤트를 활용해서 이미지를 바꿔주는 효과를 만들어 보았습니다. 🏴. 완성화면 🏁. HTML/ CSS 마우스 오버하면 이미지 바꾸기 🏁. JAVASCRIPT 이벤트를 활용하여 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 🏴. 완성화면 🏁. HTML/ CSS ✈ click JAVASCRIPT TYPESCRIPT NODE.JS 🏁. JAVASCRIPT const btn1 = document.querySelector(".btn"); const nav1 = document.querySelector(".nav"); btn1.addEventListener("click", () => { btn1.classList.toggle("active"); nav..

자바스크립트에서 사용하는 문자열과 배열을 공부하겠습니다. ✈. 문자열 문자열은 자바스크립트에서 텍스트를 처리하기 위해 사용하는 자료형입니다. 그중 배열은 자주 사용하는 자료형인데 배열 객체에는 메서드가 많아 코드를 더 효율적이고 간단하게 만들어 줍니다. 먼저, 문자열부터 알아보겠습니다. 원시유형과 객체 -원시유형 : 단순히 값만 가진 경우 -객체 : 프로퍼티와 메서드를 가진 경우 - 확인 할 기능 메서드 예시코드 비고 문자열의 길이 문자열.length let str = "good morning!"; let gretting = "안녕하세요"; ser.length // 14 greeting.length // 6 공백도 문자열에 포함 문자의 위치 문자열.charAt(위치) let str = "Good morn..

웹사이트 만들기 유형별로 나누어 만들었던 웹페이지의 HTML, CSS를 합쳐 하나의 웹사이트로 만들어 보려고 합니다. 그동안 공통css와 reset.css는 같은 걸로 작업해 왔기에 잘 조합만 하면 쉽게 만들 수 있겠죠?. 아직 좀 더 다듬어야 하지만 @media 태그를 적용하여 반응형으로도 만들 예정 입니다. 🏁. 완성화면 ✈. HTML 헤더영역바로가기 슬라이드영역바로가기 이미지영역바로가기 이미지/텍스트영역바로가기 카드영역바로가기 배너영역바로가기 텍스트영역바로가기 푸터영역바로가기 슬라이드영역 event 식물 건강하게 키우기 이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요. 처음 보는 식물도 잘 키울 수 있어요! 자세히보기 상담신청 이전이미지 다음이미지 첫번째이미지 두번째이미지 세번째이..

자바스크립트를 이용한 퀴즈 만들기 : 객관식 퀴즈 자바스크립트를 이용하여 슬라이드형 객관식 문제를 만들어 보았습니다. HTML과 CSS, SCRIPT를 각각 살펴보면서 어떻게 만들었는지 살펴보겠습니다. ✈. 퀴즈 완성화면 정보처리기능사 문제입니다. 같이 풀어볼까요? ✈. HTML Quiz 객관식 확인(슬라이드)하기(여러문제) 유형 : 슬라이드 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 설명 aimee00418@gmail.com 🏁. POINT ✈. JAVASCRIPT :문제정보 //문제정보 // 이렇게 이미지 넣기 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2009년 7월 12일 5회", infoNumber: "20090501", info..

Array배열 개념 이해하기 배열은 자바스크립트에서 데이터를 순서대로 담는 자료구조 입니다. 배열 안에는 여러 개의 값들이 순서대로 나열 되어 있으며, 각 값들은 인덱스(Index)를 이용해 접근 할 수 있습니다. 인덱스는 첫 번째 요소가 0부터 시작하여 1씩 증가하는 정수 입니다. 배열은 '[ ]' 대괄호로 생성하며, 생성 시 배열의 초기값을 지정할 수 있습니다. const arr1 = [1, 2, 3]; // 초기값을 지정한 배열 const arr2 = []; // 빈 배열 배열에는 다양한 메서드(method)가 존재합니다. 이 메서드들을 사용하여 배열에 요소를 추가, 삭제, 검색하는 등 다양한 작업을 할 수 있습니다. 예를 들어, 다음은 배열의 'push()'메서드를 사용하여 배열의 끝에 요소를 추..

퀴즈 이펙트 : 객관식 문제 만들기 ✈. 정보처리기능사 60문제 시험으로 만들어 보았습니다. 같이 풀어볼까요? ✈. HTML Quiz 주관식 확인하기 유형 1 2 3 4 5 aimee00418@gmail.com 🏁.POINT - 문제정보는 자바스크립트로 작성할 예정 입니다. ✈. CSS /* header */ #header { background-color: #d3d3d3; color: #fff; padding: 10px; position: fixed; left: 0; top: 0; width: 100%; display: flex; justify-content: space-between; } #header::before { content: ''; border: 4px ridge #ccc; position..

자바스크립트 시험 리뷰 / 오답 노트 ✈. 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() 문자열을 검색하여 주어진 값과 일치하는 첫번째 위치값(index)을 반환 일치하는 것이 없으면 -1을 반환 / 대,소문자를 구별 lastIndexOf() 문자열을 역순으로 검색하여 주어진 값과 일치하는 첫번째 위치값(index)을 반환 일치하는 것이 없으면 -1을 반환 / 대,소문자..

Search_Effect : 검색 효과 웹페이지 만들기 검색하면 연관데이터가 나오는 웹페이지를 만들어 보았습니다. ✈. 완성화면 : 검색해 보세요! ✈. HTML 1 2 3 4 5 6 CSS 검색하기 자바스크립트 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 ..

WebGL을 이용한 애니메이션 만들기 WebGL은 웹기반의 그래픽 라이브러리 입니다. 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공됩니다. ✈. CDN 🏁. 코드보기

마우스이펙트 2 마우스를 움직이면 따라다니고, 지정 위치에 놓으면 커서가 커지는 효과를 넣은 화면을 만들어 보겠습니다. ✈. 완성화면 ✈ . HTML Javascript Mouse Effect01 마우스이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Tyey must often change who would be constant in happiness of wisdom. - Confucius 늘 행복하고 지혜로운 사람이 되려면 자주 변해야 한다. -공자 aimee00418@gmail.com ✈. CSS POINT 01. mouse__cursor.active --> mouse__cursor2.active에 transform요소로 scale 크기 변화를 주어 커서가 올라갔을 때와 빠져나왔을 때를 다르게 표..

마우스이펙트 : 마우스 따라 다니는 효과 마우스의 위치에 따라 다양한 transition을 적용한 화면을 만들어 보겠습니다. 자바스크립트를 활용하여 마우스의 위치를 수치로 보여주는 효과도 적용하였습니다. ✈완성화면 ✈완성코드 https://github.com/aimeekwon/web2023/blob/main/javascript/mouse/mouseEffect01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com 🏴. HTML Javascript Mouse Effect01 마우스이펙트 - 마우스 따라다니기 1 ..

텍스트 타입 웹페이지 만들기 여섯개의 텍스트컨텐츠가 들어있는 웹페이지를 만들어 보려고 합니다. ✈. 완성화면 ✈. FIGMA 디자인화면 ✈. 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/textTypeType/textType01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com `✈. 작업순서 작업할 내용 수집하고 정리하기 -> 피그마로 정확하게 디자인 -> VS코드에서 코딩 🏁. HTML body> NOTICE 나에게 맞는 반려식물 고르기 건강 관심형..

QUIZ : 객관식 문제 만들기 객관식 퀴즈를 만들어 보려고 합니다.(웹디자인 기능사 문제 입니다) 순서. ✈. 객관식 퀴즈 화면을 만들고 ✈. 답을 체크하면, ✈. 정답과 해설이 나오고, ✈. 정답이면 강아지가 웃고, ✈. 오답이면 강아지가 우는 퀴즈를 만들어 보겠습니다! ✈객관식 퀴즈 화면 만들기 1. 먼저 보여져야 할 화면을 디자인 합니다. 2. HTML으로 구조를 작성해 줍니다. 3. CSS로 디자인을 적용해 주고(컬러와 글씨체 등) 4. JAVASCRIPT로 퀴즈의 정보를 담은 스크립트를 넣어줍니다. 🏁. HTML : 구조를 작성해 줍니다. 정답입니다! 틀렸습니다! 정답확인하기 설명 🏁. CSS : 디자인을 적용해 줍니다. /* header */ #header { background-color:..

자바스크립트 시험 입니다. 같이 풀어볼까요? ✈01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 🏴. 정답 더보기 정답 : 함수가 실행되었습니다 🏁. 즉시실행함수 즉시실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의한 후 바로 실행하는 JavaScript 함수입니다. 함수를 익명 함수로 선언하고, 소괄호로 감싸서 함수를 실행합니다. 이를 통해 함수를 정의한 후 바로 실행할 수 있습니다. IIFE를 사용하는 가장 일반적인 이유는 전역 스코프 오염을 방지하기 위해서입니다. IIFE를 사용하면 함수 내에서 선언된 변수는 해당 함수의 스코프 내에서만 유효하기 때문에, 전역 스코프에서..

혼란합니다. 점점 어려워지고 있는 자바스크립트...함수공부 이번엔 보충이 필요한 함수유형에 대해 공부해 보려고 합니다. / 01. 함수와 매개변수를 이용한 함수유형 ✈함수는 프로그래밍에서 매우 중요한 개념 중 하나이며, 일반적으로 어떤 입력값을 받아 처리를 수행한 후 결과를 반환하는 기능을 수행합니다. 이때 함수를 사용할 때 매개변수(parameter)를 이용하여 함수에 필요한 입력값을 전달합니다. 함수와 매개변수를 이용하여 다양한 함수 유형을 만들 수 있습니다. 인자 없는 함수 (Function without arguments) : 입력값이 없는 함수로, 함수 내부에서 정의된 코드를 실행하고 결과를 반환합니다. 인자 있는 함수 (Function with arguments) : 함수 호출 시에 매개변수로..

슬라이더 타입 웹페이지 만들기 슬라이더타입 웹페이지는 주로 웹사이트이 메인 화면에 쓰입니다. 이벤트를 연동하거나 웹페이지의 중요한 이슈를 다루는 슬라이더 타입 웹페이지를 만들어 보겠습니다. 완성화면 Figma작업 화면 코딩은 하나만 작업했지만 실제로 슬라이더는 여러 장 일 때 쓰이므로 디자인 작업은 3페이지를 했습니다. 🏳 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/sliderType/sliderType01.html HTML 메인 슬라이드 영역 event 식물 건강하게 키우기 이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요. 처음 보는 식물도 잘 키울 수 있어요! 자세히보기 상담신청 이전이미지 다음이미지 첫번째이미지 두번째이미지..

이미지텍스트 타입 웹페이지 만들기 이미지와 텍스트가 함께 들어간 웹페이지를 만들어 보았습니다. 완성화면 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/imgtextType/imgtextType01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com 작업순서 1. FIGMA로 레이아웃 만들기(컨텐츠 미리 준비해놓기) 2. VSCODE에서 코딩하기 1) FIGMA로 레이아웃 만들기 레이아웃 디자인을 할 때는 여백, 줄간격, 폰트크기, 이미지크기 등을 명확하고 ..

퀴즈 이벤트 : 문제 풀고 정답/ 오답 이벤트 2 퀴즈 이벤트를 만들어 보려고 합니다. 정보처리기능사 퀴즈입니다. 정답이면 강아지가 웃으면서 정답 애니메이션이 작동하고 오답이면 강아지가 울면서 오답 애니메이션이 작동하도록 만들어 봅니다. ▼링크를 따라가서 퀴즈를 풀어보세요!

MySQL 이해하기 MySQL은 오픈소스 관계형 데이터베이스 관리 시스템(RDBMS) 중 하나입니다. MySQL은 데이터를 구조화하고 저장하기 위한 강력한 도구를 제공합니다. 그리고 데이터를 쉽게 추가, 수정, 삭제하고 검색할 수 있습니다. MySQL은 다양한 운영 체제에서 실행될 수 있으며, 다양한 프로그래밍 언어와 함께 사용할 수 있습니다. MySQL을 사용하면 대규모 데이터베이스를 효율적으로 관리할 수 있으며, 빠른 처리와 안정성을 제공할 수 있습니다. MySQL은 PHP스크립트 언어와 상호 연동이 잘 되면서 오픈소스로 개발된 무료프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, Cafe2, 그누보드, 제로보드)등 가장 일반적으로 웹 개발에 널리 사용하고 있습니다. // 서버로 사용될 PC에 설..

html/ css로 이미지 타입 웹페이지 만들기 FIGMA로 레이아웃 만들기 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/imageType/imageType01.html 코드보기 html PLANT 반려 식물 건강하게 키우기 품종에 맞는 흙과 비료 다양한 식물이 가지는 특성에 맞춰 잘 자랄 수 있도록 조건에 맞는 흙과 비료를 알아두세요. 자세히보기 적당한 빛과 바람, 물 적당한 햇볕과 통풍이 잘되는 환경이 필요합니다. 때에 따라 일정한 주기로 물을 주시는 것도 중요합니다 자세히보기 css : reset 소스 홈페이지를 만들 때 기본적으로 쓰이는 요소에 대해 작성해놓고 시작합니다. /* reset */ * { margin: 0; padding: 0;..