jongyung

지난 게시글에서 추가한 내용이 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 라는 프..

설명: 이미 만들어 놓은 사이트 부분들을 종합해서 하나의 사이트로 만들어 보았습니다. html 과 css 를 나눠서 만들어 봤습니다. html 은 body 부분을 설명하고, css 는 이전에 작업했던 내용과 같기 때문에 따로 보여드리지는 않겠습니다. css 는 반응형을 고려한 media query 부분을 더했을 뿐, 이전에 style sheet 에 입력한 내용과 같지만, 공통적으로 들어간 내용들 예를 들어서, 글씨체나 여백 등의 부분들은 모아서 따로 정리했습니다. css 는 이 부분들을 common, font, 그리고 reset 으로 나눠서 설명하겠습니다. html 의 body 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 베너 영역 바로..

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

자바스크립트 테스트05 재시험을 오답 정리해봤다. 01. 다음의 결괏값을 작성하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refercence", 0); str.indexO..

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

See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen.

모든 문제를 적고 틀린 문제만 오답 정리를 했습니다. 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..

figma로 만든 다음의 푸터 유형을 코딩으로 만들어 보겠습니다. 링크: 푸터 영역 01 (daanbi1345.github.io) 간략한 설명: 웹사이트의 하단 부분이라서 간단합니다. 6가지의 카테고리로 나눴습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body 푸터 여행 가방 꾸리기 체계적으로 물건 담는 법 최소한의 물건 담기 가벼운 물건 위주로 챙기기 체크 리스트 작성하기 휴대용 물건 챙기기 휴대용품 챙기기 필수로 챙겨야 하는 물건 현지에서 구하기 힘든 물건 위급한 상황 대비하기 여행 계획 세우기 가고 싶은 여행지 꼽기 관광 장소 알아보기 숙소 알아보기 숙소 근처 식당 알아보기 여행지 탐방하기 계획에서 조금 벗어나보기 현지인에게 추천 받기 숙소 근처에서 산책하기 시장 구경하..

마우스 따라다니는 돋보기 효과에 대해서 알아보겠습니다. 돋보기로 보는 것처럼 보이는 효과를 넣었습니다. 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..

figma로 만든 다음의 텍스 유형을 코딩으로 만들어 보겠습니다. 링크: 텍스트 유형 (daanbi1345.github.io) 간략한 설명: 마우스 오버 효과를 넣어서 만들어 봤습니다. 롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다. 각 카테고리 창 위에 마우스를 올리면 보기와 같이 회색으로 창이 변하고, 더보기 버튼에 마우스를 올리면 + 버튼이 돌아가는 효과입니다. 그 외에는 아이콘을 만들고 이전에 했던 것처럼 텍스트를 넣고 위치를 설정했습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body Notice 해외 여행 여행 가방 꾸리기 여행의 가장 기본은 ..

모든 문제를 적고 틀린 문제만 오답 정리를 했습니다. 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

오늘 배운 배용들이 많아서 외우기 힘들다. 그래서 정리해보겠다. 우선, 선언적 함수와 익명 함수 그리고 매개변수 함수와 리턴값 함수에 대해서 써보겠다. 선언적 함수 function func(){ document.write("함수가 실행되었습니다.1") } func(); 선언적 화살표 함수 func = () => { document.write("함수가 실행되었습니다.5") } func(); 익명 함수 const func = function(){ document.write("함수가 실행되었습니다.2") } func(); 익명 화살표 함수 const func = () => { document.write("함수가 실행되었습니다.6") } func(); 매개변수 함수 function func(str){ docum..

figma로 만든 다음의 슬라이드 유형을 코딩으로 만들어 보겠습니다. 간략한 설명: 사진이 전체 배경이고, 사진 위에 글자와 버튼을 올렸습니다. 글자와 버튼들이 잘 보일 수 있도록 사진을 조금 어둡게 했습니다. EVENT 버튼과 자세히 보기, 상담 신청 버튼들과 페이지를 넘기는 화살표, 그리고 페이지가 넘어가는 것을 알 수 있도록 밑에 표시를 해줬습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body 메인 슬라이드 영역 event 이탈리아로 떠나는 여행 이탈리아로 떠나는 여행이 궁금하시지 않으세요? 지금부터 이탈리아로 떠나는 여행이 얼마나 즐거울지 소개합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 재생 정지 각 부분들을 나눠..

이번에는 figma로 만든 다음의 이미지/텍스트 유형을 코딩으로 만들어 보겠습니다. 간략한 설명: 보이는 것처럼 이번에는 사이트를 크게 세 부분으로 나눌 수 있습니다. 글이 써있는 부분(article class="desc"), 음식 사진(article class="food"), 기념품 사진(article class="souvenir")으로 나누어서 만들었습니다. 이제 body와 style을 나눠서 세부적인 설명을 하겠습니다. body NOTICE 음식점과 기념품 가게 고르는 Tip 맛있는 음식을 맛보고 싶은 마음은 누구나 있습니다. 그리고 기념품을 사서 보관하거나 선물하는 일도 많죠. 오소 부코 프로슈토 리볼리타 살팀보카 쿠샤리 에이시 하맘 토르시 마비스 치약 낙타 인형 시샤 도구 지난 번에 만들었던 사..

이번에는 세 가지의 주관식 문제를 만들어 보겠습니다. 링크: 퀴즈 이펙트 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..

MySQL이란? MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. 사용자, 다중 스레드 RDBMS로서, 데이터의 안정성과 보안성을 제공합니다. 대부분의 운영 체제에서 작동하며, 웹 애플리케이션 개발, 데이터 분석, 빅 데이터, 클라우드 기반 애플리케이션 등에 많이 사용됩니다. SQL(Structured Query Language)을 사용하여 데이터를 관리합니다. SQL은 데이터베이스에 저장된 데이터를 조작하기 위한 표준적인 언어로서, 데이터를 검색, 삽입, 업데이트, 삭제하는데 사용됩니다. MySQL은 이러한 SQL 문을 이용하여 데이터를 쿼리하고, 데이터의 무결성을 유지하며, 데이터베이스를 관리합니다. MySQL은 사용이 간편하며, 대용량 데이터베이스를 처리할 수 있는 고성능 ..

수업 시간에 했던 테스트를 복습해보겠습니다. //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;..

지난 번에 한 웹사이트 카드 유형 만들기에 이어서 이번에는 이미지 유형을 만들어 봤습니다. 마찬가지로, figma로 미리 사이트의 이미지 예제를 만들어 봤습니다. 설명은 body부분과 head에 입력한 style부분으로 나눠서 하겠습니다. body body부분의 코드입니다. 해외 여행 가고 싶은 여행지를 소개합니다. 이탈리아 해외 여행이 생각나요? 이탈리아를 소개합니다. 자세히 보기 이집트 해외여행 가고 싶지 않나요? 이집트를 소개합니다. 자세히 보기 큰 틀부터 그 안에 들어있는 요소들은 큰 제목 문장 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이런 모양입니다. 가장 큰 틀은 ..

틀린 문제를 위주로 풀이를 해설하겠습니다. 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 답 : false 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 답 : 1 2 4 5 6 while문을 이용한 식입니다. true일 경우에 출력이 되는 식입니다. 문제 2번처럼 num++;의 위치가 중요합니다. 명령어 console의 위에 있으므로, 1의 값을 넣어줄 범위를 유의해서 풀어야 합니다. num의 값이 0으로 주어졌습니다. if 조건식이 걸려있습니다. 우선 num이 3일 경우에 continue 한다는 식은 3..

지난번 게시글에 이어서 다른 부분을 추가적으로 만들었습니다. 링크: 퀴즈 이펙트 02 (daanbi1345.github.io) Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 daanbi1345@gmail.com 형식은 지난 번과 같습니다. 새로 쓴 식은 textContent와 trim()이 있습니다. 먼저 textContent에 대해서 설명하겠습니다. 지난번에 쓴 innerText 와의 차이점은 크지 않지만, 어떤 식으로 쓰이는 지를 알아보기 위해서 비교해보겠습니다. innerText : innerText는 마크업 언어가 적용된 상태로 읽어옵니다. 즉 태그와 마크업 언어와 같은 태그값은 불러들이지 않습니다. 또한 사용자가 보이는 상태 style등 마크업 언어가 적용된 상태입니다. ..

함수로 퀴즈를 풀 수 있는 사이트를 만들어 보겠습니다. 링크: 퀴즈 이펙트 01 body의 main 과 script 부분을 나눠서 설명하겠습니다. . 정답 확인하기 연변대비 main 부분에서는 사이트의 틀을 만들어 준다고 생각하면 됩니다. 우선, quiz__wrap으로 class를 지정해서 묶어주었습니다. script 에서 보면, quizWrap을 document.querySelector()로 선택자를 만들어 줬는데요, 이 querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 그렇기 때문에 그 다음부터는 wrap안에서 값을 찾으면 된다는 의미입니다. 그 다음은, ..

코딩으로 웹사이트를 만드는 설명을 해보겠습니다. figma로 웹사이트의 이미지 예제를 만들고 시작했습니다. 해당 이미지를 실질적인 사이트로 만들어 나가는 과정입니다. 우선, 코드를 보여드리고 설명하겠습니다. 해외 여행 여행지에서 볼 거리들과 머무를 숙소 등을 소개합니다. 여행지에서 가장 중요한 것들을 빼먹을 수는 없죠. 그 나라가 자랑하는 관광지를 소개합니다. 광장 쇼핑과 거리 구경을 할 수 있는 쇼핑몰의 광장을 소개합니다. 장인들의 전통이 녹아 있는 가게들부터 명품을 살 수 있는 거리까지 전부 놓칠 순 없죠. 전통과 문화를 즐겨보세요. 자세히 보기 거리 축제 거리에서 시간마다 마차를 몰고 소공연을 펼치고 있습니다. 작은 축제이지만 그곳이 아니면 볼 수 없는 기회를 놓치지 마세요. 어디에서 사진을 찍든 ..