분류 전체보기 113

퀴즈 이펙트3 주관식(여러문제) 확인하기 유형

주관식 (여러문제) 확인하기 유형 Quiz 주관식(여러문제) 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 ghkddn132@naver.com 우선 선택자를 만들어 줍니다. (변수 변수이름 = document.querySelector("지정위치") (변수 변수이름 = 특정변수가 실행 됐을때 같이 실행 하도록 하는 특정변수이름.querySelector("지정위치") //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목 ..

JAVASCRIPT 2023.03.14

MySQL에 대해서 알아봅시다

MySQL이란? ·오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. ·무료로 사용할 수 있으며, 많은 사용자가 사용하는 인기 있는 데이터베이스 관리 시스템 중 하나입니다. ·다양한 운영 체제에서 사용할 수 있으며, 많은 프로그래밍 언어와 함께 사용할 수 있습니다. ·데이터베이스를 구성하고 데이터를 저장, 검색, 수정 및 삭제할 수 있는 다양한 도구와 기능을 제공합니다. ·웹 애플리케이션, 서버, 데스크톱 애플리케이션 및 기타 다양한 유형의 응용 프로그램에서 사용됩니다. ·많은 기업과 조직에서 사용되며, 대규모 데이터베이스 시스템에서도 높은 성능을 제공합니다. ·장점으로는 높은 성능, 확장성, 안정성, 안전성, 유연성, 커뮤니티 지원 등이 있습니다. ·다른 데이터베이스 시스템과 호환성이 높아서..

MySQL 2023.03.13

기본 함수 와 함수 유형 정리

기본 함수 선언적 함수 ·직접 선언 하는 방식입니다. ·함수를 호출하기 이전에 먼저 정의해야 합니다. 함수 정의가 코드의 상단으로 호이스팅(hoisting)되기 때문입니다. 호이스팅이란, 변수나 함수를 코드의 상단으로 끌어올리는 작업을 말합니다. { function add(){ document.write("선언적 함수"); } add();//선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생 시키징 않습니다. 이러한 자바스크립트 성질을 호이스팅(Hoistion) 이라고 합니다. } //결과:선언적 함수 ※선언적 함수 화살표 함수로 만들기 { func = () => { //function을 없애고 =과 =>를 넣어 간략하게하였습니다. document.write("선언적 함수"); } func()..

JAVASCRIPT 2023.03.12

css를 이용해 이미지 유형 사이트 만들어보기

저번에 했었던 카드 유형 사이트 처럼 figma 로 만들고 싶은 이미지 사이트 만들어 본 후에 body부분에 박스를 만들어 사이트에 들어갈 글과 링크를 넣고 class를 이용해 각 목록에 이름을 주고 묶어 줍니다. 그리고 head부분에 자기가 바꾸고 싶은 폰트의 링크를 가져와 올려줍니다. 쿠키 만드는 방법 다양한 종류의 쿠키가 있으며, 재료와 조리 방법에 따라 다양한맛을 느낄 수 있습니다. 쿠키의 종류 초코칩 쿠키, 오트밀 쿠키, 마키롱, 스노우볼 쿠키, 레몬 쿠키, 등이 있습니다. 자세히 보기 쿠키를 만들어봅시다 밀가루, 버터, 설탕 등을 사용하여 만들며, 다양한 재료를 넣어 맛과 향을 냅니다. 자세히 보기 에 위치한 /*img type*/ 위에 부분은 카드 사이트 유형과 같으므로 넘어가고 /*img ..

CSS 2023.03.11

퀴즈 이펙트2 주관식 확인하기 유형

주관식 확인하기 유형 퀴즈 이펙트1 에서 배운 것을 토대로 이번엔 주관식 확인하기 유형을 만들어 봅니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 ghkddn132@naver.com 1.저번 처럼 똑같이 변수를 만들어 문자나 숫자를 출력하거나 지정하고 싶은 태그에 CSS선택자를 'querySelector' 를 이용해 지정해 줍니다. //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__tiile span"); const quizTime = quizWrap.querySelector(".quiz__tiile em"); const quizQuestion..

JAVASCRIPT 2023.03.09

퀴즈 이펙트1 정답 확인하기 유형

정답 확인하기 유형 CSS를 이용해 사이트 하나를 꾸며 줍니다. javascript를 이용해 정답 확인하기 유형을 알아 보겠습니다. Quiz 정답 확인하기 유형 . 정답 확인하기 ghkddn132@naver.com 1.변수를 만들어 문자나 숫자를 출력하거나 지정하고 싶은 태그에 CSS선택자를 'querySelector' 이용해 지정하여 줍니다. ('quizWrap'만 'document'인 이유: 전체를 'document'로 하면 데이터가 많을때 가져와야하는 데이터 외에 또 다른 데이터까지 읽고나서 가져오기 때문에 불러오는 속도에 영향을 끼쳐 느려 지는 것을 방지 하기 위해 'quizWrap'로 바꾸어 이와 관련된 데이터만을 읽고 가져오라고 하고있습니다.) //선택자 const quizWrap = docu..

JAVASCRIPT 2023.03.08

css를 이용해 카드 유형 사이트 만들어보기

Figma로만들고 싶은 카드 사이트 만들어 보기 1. 피그마에 들어가서 Frame 을 크기를 설정합니다. 2. layout grid로 가서 count 12개를 만들어 주시고 color의 투명도를 10%, margin을 380 Gutter를 20으로 해줍니다. 3. 만들고 싶은 사이트의 주제와 내용들 그리고 카드 이미지를 Shift+R을 이용해 간격을 정하고 색도 넣어줍니다. ex) 그리고 HTML,CSS을 이용해 Figma를 통해 만들어본 사이트의 주제와 내용들 그리고 카드 이미지의 간격과 색을 설정해줍니다. 일단 코드를 보겠습니다. 쿠키 만드는 방법 쿠키 만드는 방법은 다양하며, 재료나 조리 방법을 바꿔서 다양한 종류의 쿠키를 만들 수 있습니다. 레시피를 찾아보거나 실험을 해보면서 자신만의 맛있는 쿠키..

CSS 2023.03.07

데이터를 불러오는 21가지 방법

배열 데이터 불러오기 01. 변수 : 데이터 불러오기 변수에 데이터를 불러 올 수 있습니다. { let x = 100, y = 200, z = "javascript"; console.log(x ,y ,z); } //결과 100 200 javascript 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } //결과 100 200 javascript 03. 배열 : 데이터 불러오기 배열 안에 저장된 데이터를 불러 오는 방법입니다. { const arr = [100, 200, "javascript"]; console.log(arr[0], arr[1], arr[2]..

JAVASCRIPT 2023.03.06

배열 데이터를 불러오는 forEach(), for...of, for...in, map()

forEach( ) 배열에 있는 데이터를 반복 시킬때 사용하는 함수 입니다. { const num = [100, 200, 300, 400, 500]; num.forEach(function(el){ //el=element 배열의 값을 순서대로 반복 합니다. document.write(el," "); }); } //결과 100 200 300 400 500 ※화살표 함수로 표현하기 { const num = [100, 200, 300, 400, 500]; //forEach :화살표 함수 num.forEach((el)=>{ document.write(el," "); }); //forEach :화살표 함수 : 괄호 생략 num.forEach(el=>{ document.write(el," "); }); //forEa..

JAVASCRIPT 2023.03.05