꿈트(GGUMT)

/ 리액트 입문서 intro 대상 - 리액트 입문자 - 자바스크립트도 리액트도 어려운 프론트앤드 개발 입문자 index 1- 3장 : 리액트 전 알아야 할 자바스크립트 기초 4장- 끝 : 리액트기본, 리액트에서 CSS다루기, 재랜더링,글로벌State관리, 리액트 개발에 타입스크립트 사용하기 등 참고 예제 다운로드 https:github.com/moseskim/book-react-code / 1장. 모던자바스크립트 기초 1-1. 모던자바스크립트 개요 모던자바스크립트의 특징 - 리액트, 뷰 앵귤러 등 가상 DOM을 이용하는 라이브러리/ 프레임워크를 사용 (최근에는 스벨트 처럼 가상 DOM을 이용하지 않는 기술도 등장) - npm, yarn 등 패키지 관리자 사용 - 주로 ES6이후의 표기법 사용 - 웹팩 등..

PHP 를 이용하여 게시판의 검색 페이지 만들기 board.php ✈. 게시판의 검색창 영역 : 검색 될 키워드와 검색 옵션 선택 정보를 input과 select 태그에 넣어줍니다. : name과 id를 달아줍니다 : 검색창이 빈칸이 되지 않도록 require를 넣습니다 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 boardSearch.php ✈. 게시판 검색 게시판에 총 게시글 갯수를 보여주는 코드입니다

웹디자인기능사 실기 레이아웃 만들기 완성화면

자바스크립트를 이용하여 GAME EFFECT 뮤직플레이어 만들기 완성화면 script -음악에 대한 정보 저장하기 const allMusic = [ { name : "1. summer", artist : "Joe Hisaishi", img : "music_img01", audio : "1.mp3" },{ name : "2. spring", artist : "Joe Hisaishi", img : "music_img02", audio : "2.mp3" },{ name : "3. hello", artist : "patric", img : "music_img03", audio : "3.mp3" },{ name : "4. hello", artist : "patric", img : "music_img04", aud..

PHP 웹사이트 게시판 페이지 만들기 게시판 한 페이지에 20개씩 보이기 // $page = 1; if(isset($_GET['page'])){ $page = (int) $_GET['page'];//숫자로 인식해서 오류 없도록 선언해줌 } else { $page = 1; } $viewNum =20; $viewLimit = ($viewNum * $page) - $viewNum; //1페이지부터 페이지당 2-개씩 내림차순으로 보여줌(최근이 먼저나와야하니까) //1~20 DESC LIMIT 0, 20 -->page1 (viewNum * 1) - viewNum //21~40 DESC LIMIT 20, 20 -->page2 (viewNum * 2) - viewNum //41~60 DESC LIMIT 40, 20 ..

게임 이펙트 웹 페이지 만들기 완성화면 script ✈. 운영체제 정보 보여주기(하단) function printAgent(){ // 운영체제 정보 알아내기 let os = navigator.userAgent.toLowerCase(); let sw = screen.width; let sh = screen.height; let info = document.querySelector(".info"); if (os.indexOf("windows") >= 0) { info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다." } else if (os.indexOf("macintosh") >= 0) { info.innerHTML = "현재 맥을 사용하..

✈. 01 다음의 결괏값을 작성하시오. { let data = [10, 6, 7, 9, 3]; let temp; for(let i=0; i d)) ▷ 1이 b와 c가 같지 않거나 c와 d가 같은지 확인합니다. (1 == b ^ c != d) ▷ 위의 두 가지 조건문이 모두 true이면 a를 b+c로 할당합니다. 그렇지 않으면 b를 출력합니다. ▷ 따라서 위의 조건문이 참이면 a는 b+c인 7이 됩니다. 따라서 이 코드의 출력 결과는 7이 됩니다. ✈. 09 다음의 결괏값을 작성하시오. { function func(a){ if( a < 1 ) return 1 return a * func(a - 1); } console.log(func(5)) } 이 코드는 팩토리얼 계산 함수를 구현하는 코드입니다. 함수 '..

자바스크립트에서 문자열 객체에 대해 알아보기 문자열객체란? 자바스크립트에서 문자열(string)객체는 문자열 데이터를 나타내기 위한 객체 입니다. 문자열 데이터를 문자열 객체로 생성하면 , 문자열 객체의 다양한 메서드와 속성을 사용하여 문자열 데이터를 조작하고 분석할 수 있습니다. 문자열객체는 String()생성자를 사용하여 생성할 수 있습니다. 예를 들어, var str=new String("Hello, World!"); 와 같이 String()생성자를 사용하여 문자열 객체를 생성할 수 있습니다. 그러나 일반적으로 문자열데이터를 리터럴(literal)로 작성하여 문자열 객체를 자동으로 생성합니다. 예를 들어 , "Hello, World"와 같은 문자열 데이터를 리터럴로 표현하면 자동으로 문자열 객체가 ..

01. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 02. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 03. { function func(begin, diff, n){ cnt = 1; ret = begin; while(true){ cnt += 1; r..

scrollr.js 라이브러리를 이용하여 패럴랙스 페이지 만들기 -scrollr.js 라이브러리를 이용하여 스크롤값에 따라 화면이 다양하게 보여지는 패럴랙스 페이지 만들기 scrollr.js "scrollr.js"는 스크롤 이벤트를 사용하여 패럴랙스 효과를 만드는 자바스크립트 라이브러리입니다. 스크롤 이벤트에 따라 요소의 위치, 크기, 회전 등의 CSS 속성을 변경하여 패럴랙스 효과를 구현합니다. 또한, 요소의 위치나 속성을 스크롤 위치에 따라 동적으로 계산하고 조작할 수 있어서 매우 다양한 효과를 구현할 수 있습니다. scrollr.js는 jQuery를 기반으로 작성되었으며, 사용하기 쉬운 API와 다양한 설정 옵션을 제공 🏳‍🌈. 패럴랙스 란? 패럴랙스 효과(Parallax Effect)는 웹사이트에..

PHP를 이용하여 웹페이지 만들기 01. PHP란 02. 회원가입 페이지, 로그인 페이지, 로그아웃 페이지 🚨. PHP 뭔가요? PHP는 서버 측 웹 개발 언어로, 동적 웹 페이지를 생성하는 데 사용됩니다. 유사 프로그램으로는 Java, Python, Ruby 등이 있습니다. 각각의 언어는 고유한 특징을 가지고 있으며, 비교적 장단점이 있습니다. PHP는 문법이 쉽고 배우기 쉬우며, 다른 언어와 호환성이 높아 웹 개발에 유용합니다. 또한 PHP는 웹 개발을 위한 다양한 라이브러리와 프레임워크가 많이 존재하며, 대부분 무료로 사용할 수 있습니다. Java는 PHP와 비슷한 웹 개발 언어입니다. Java는 PHP보다 엄격한 문법 규칙과 더 많은 기능을 제공합니다. 그러나 Java의 배우기 어렵고 복잡한 구조..

패럴랙스를 이용하여 이미지 스크롤 페이지 만들기 이미지와 함께 명언이 나오고, 보고있는 화면의 위치도 알려주는 페이지를 만들어 보았습니다. 완성화면 .✈ . HTML Javascript parallax Effect01 패럴랙스 이펙트 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 시간은 금이다 02 section2 배우고 때때로 익히면 또한 기쁘지 않겠는가 03 section3 아는 사람은 좋아하는 사람만 못하고, 좋아하는 사람은 즐기는 사람만 못하다. 04 section4 지혜로운 사람은 물을 좋아하고 어진사람은 산을 좋아한다. 05 section5 지혜로운 사람은 미혹되지 않고, 어진사람은 근심하지 않고 용감한 사람은 두려워하지 않는다 06..

자바스크립트를 이용하여 배경이 바뀌는 명언슬라이드를 만들어 보았습니다. 완성화면 .✈ . HTML .✈ . CSS .✈ . JAVASCRIPT const Result = document.querySelector("#result"); const Quote = result.querySelector(".quote"); const Author = result.querySelector(".author"); const dataresult = () => { fetch('json/dummy01.json') .then(res => res.json()) .then(items => { const randomIndex = Math.floor(Math.random() * items.length); Quote.textConten..

자바스크립트를 이용하여 로또 번호 추출하기 자바스크립트를 이용하여 1부터 45까지의 숫자를 무작위로 추출해주는 스크립트를 만들어 보았습니다. 완성화면 ✈. HTML LOTTO LUCKY NUMBERS COMING CLICK ✈. CSS *{ margin: 0; padding: 0; } #wrap { width: 100%; height: 100vh; background-color: #d6d7d3; padding-top: 100px; } .container { margin: 0 auto; border : dotted 10px #c4a43f; width: 1000px; height: 280px; text-align: center; } h1 { font-size: 50px; font-weight: bold; c..

명언 나오는 화면 만들기 자바스크립트를 이용하여 json파일에 저장된 명언 10개가 무작위로 추출되어 보여지는 화면을 만들어 보았습니다. 완성화면 .✈ . HTML .✈ . CSS @font-face { font-family: 'Cafe24Shiningstar'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; color: #34190e; background-color: #9fb6be; } .wrap { width:100%; m..

자바스크립트를 이용해 슬라이더를 만들어 보기 완성화면

자바스크립트를 이용해 슬라이더 효과 만들기 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. 연관기억장치의 구..

정보처리기능사 시험을 대비해서 기출문제를 풀고 오답노트를 만들어 보자 전자계산기 일반 / 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()'메서드를 사용하여 배열의 끝에 요소를 추..