Leeyanggoo

2015년 07월 19일 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? 1. 균형을 가장 많이 고려하여 구성해야 한다. 2. 부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. 3. 조형을 구성하는 모든 단위의 크기를 결정한다. 4. 객관적 질서와 과학적 근거를 명확하게 드러내는 구성 형식이다. 정답 : 1 비례란 부분과 부분, 부분과 전체를 상대적으로 설명하는 것입니다. 분포,면적,길이 등의 대비관계를 말합니다. 7. 먼셀의 색체계에서 색상의 기본색을 10가지로 나누었을 때 포함되지 않는 색은? 1. PR 2. P 3. YR 4. GY 정답 : 1 R: Red(빨강) / Y:Yellow(노랑) / G:Green(초록) / B:Blue (파랑) / P: Purple(보라) / YR : Ye..

2011년 4월 17일 4. 중앙처리장치(CPU)에 해당하는 부분을 하나의 대규모 집적회로의 칩에 내장시켜 기능을 수행하게 하는 것은? 1. 마이크로프로세서 2. 컴파일러 3. 소프트웨어 4. 레지스터 정답 : 1. 마이크로프로세서 마이크로프로세서 : 중앙처리장치에 해당하는 부분을 하나의 대규모 집적회로의 칩에 내장시켜 기능을 수행하게 하는 것입니다. 컴파일러 : 소스 프로그램을 컴퓨터에서 수행가능한 목적프로그램으로 변환하고 수행하는 기능 소프트웨어 : 하드웨어와 반대되는 의미로 프로그램을 말합니다. 레지스터 : CPU 내부의 고속 기억장치 5. 다음에 실행할 명령어의 번지를 기억하는 레지스터는? 1. Program Counter 2. Memory Address Register 3. Instruction..

완성을 향해 달려가는 퀴즈 이펙트 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속성 중 사람의 눈이 가장 예민하고 ..

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 03. 결괏값을 작성하시오. ⭕ { function func(){ let a = []; for(i=1; i

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배 써야 한다면 알아보기도 힘들고 적기도 힘들지 않을까요? 우리는 여러 보기가 있는 객관식 ..

See the Pen Untitled by leeyanggoo (@leeyanggoo) 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 02. 다음의 결괏값을 보고 빈칸을 채우시오. ⭕ { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document...

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

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 푸터 유형 레이아웃이란? 푸터(footer)는 웹 페이지의 하단에 위치한 영역으로, 보통 사이트 내비게이션, 저작권 정보, 연락처 등과 같은 보조적인 정보를 담고 있습니다. 푸터 유형은 페이지마다 다양하게 제작할 수 있으며 일반적으로는 두 가지 유형이 있습니다. 1. Fixed Footer 고정 푸터는 웹 페이지의 하단에 고정되어 스크롤을 내려도 항상 화면에 보이는 유형입니다. 사용자가 어떤 곳을 보고 있든지 항상 접근할 수 있기 때문에 편리합니다. 하지만 ..

이전의 마우스 이펙트는 자바스크립트의 라이브러리 "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..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 텍스트 유형 레이아웃이란? 텍스트 유형은 이전의 카드 유형의 레이아웃에서 조금 더 정보 제공을 위한 텍스트가 위주인 레이아웃입니다. 작은 소주제를 가진 섹션이나 블로그 포스팅 등 정보 세트를 표시하는 데 사용할 수 있습니다. 텍스트 유형 레이아웃을 올바르게 채택하면 인터페이스 정보를 효과적으로 구성하고 사용자 경험을 크게 향상시킬 수 있습니다. UI/UX 디자인의 여러 유형을 소개하는 GE Health Care(Designed with healthcare i..

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

자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 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(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, "자바스크립트", "..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 슬라이드 유형이란? 슬라이드 유형은 주로 웹의 메인 페이지에서 자주 활용합니다. 주로 브랜드의 중요 이벤트나 홍보, 소식 등을 보여주거나 제공하는 메인 서비스를 나열하기도 합니다. 지정한 몇 개의 레이아웃이 넘어가는 형태로 제작됩니다. CJ AI center의 메인 페이지 CJ의 AI center는 메인 페이지에 슬라이드 유형을 사용하고 있습니다. AI center가 제공하는 메인 기술 4가지를 소개하고 있습니다. 이런 슬라이드 유형은 사용자에게 보여주고자 ..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 이미지 + 텍스트 유형이란? 지난번에 살펴본 이미지 유형은 광고의 대표 이미지나 브랜드 철학을 담은 이미지로 웹 페이지를 나타냈습니다. 이미지 + 텍스트는 사용자가 이동하려는 웹 페이지의 예시를 보여주고 검색을 유도하거나, 텍스트에 담은 정보를 보여주는 레이아웃입니다. design by webflow.com 여러 웹 디자인을 볼 수 있도록 소개하는 webflow는 페이지의 검색 결과를 다음과 같이 보여주고 있습니다. 우리도 이렇게 텍스트와 이미지가 잘 어우러..

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

MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. MySQL은 다양한 운영 체제에서 사용할 수 있으며, 대부분의 웹 응용 프로그램에서 데이터베이스 시스템으로 많이 사용됩니다. MySQL은 클라이언트/서버 모델을 기반으로합니다. 이것은 MySQL 서버가 데이터베이스를 호스팅하고, 클라이언트 애플리케이션이 서버에 연결하여 데이터베이스에 액세스할 수 있도록 합니다. MySQL은 다양한 클라이언트 프로그램 및 API를 지원하여, 여러 다른 프로그래밍 언어로 쉽게 데이터베이스를 사용할 수 있습니다. MySQL은 다양한 기능을 제공합니다. 이 중 일부 기능은 다음과 같습니다. 데이터의 저장과 검색: MySQL은 테이블로 구성된 데이터베이스에서 데이터를 저장하고 검색할 수 있습니다. 데이터의..

API란? API는 "Application Programming Interface"의 약자로, 응용 프로그램과 데이터베이스, 소프트웨어 구성 요소 등 간의 상호작용을 가능하게 하는 인터페이스를 의미합니다. 여기서 상호작용이라 함은 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법을 말하는 것입니다. 간단히 말해서 API는 식당에서 주문할 때 보는 메뉴판 같은 것입니다. 메뉴판을 보고 요리사에게 주문을 하듯이, API를 보고 서버에 데이터를 주문하는 것이라 생각하면 되겠습니다! 공공데이터포털(data.go.kr) 이용해보기!! 1. 공공데이터포털(data.go.kr) 접속하고 회원가입 하기 2. 찾고자 하는 데이터 검색!! 3. 검색 후 하단에 "오픈 API"를 찾고 "더 보기"를 눌러서 자신..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 이미지 유형이란? 이미지 유형의 레이아웃은 웹 페이지가 담고 있는 정보의 대표적인 콘셉트를 보여줄 때 사용합니다. 브랜드의 대표 아이덴티티(identity)나 광고, 디자인에서 담고자 하는 철학 등을 나타내기도 합니다. 이미지 혹은 브랜드의 대표 철학 등을 사용자가 볼 수 있는 한 화면에 꽉 채워서 보여주는 경우가 많습니다. 브랜드 아이덴티티, 웹 디자인 및 개발 등의 서비스를 제공하는 디지털 에이전시 "Aino"의 웹 페이지 예시로 디자인 에이전시 "Aino"의 웹 페이지를 가져와봤습니다. 페이지 메인에 ..