꿈트(GGUMT)

퀴즈 이펙트 : 객관식 문제 만들기 ✈. 정보처리기능사 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;..

forEach문 이해하기 [데이터불러오기] 파트에서 배운 forEach문을 공부해 보려고 합니다. forEach문은 JavaScript에서 배열(array)에 포함된 각 요소(element)에 대해 반복적으로 작업을 수행하는 메서드입니다. for문 for(let i=0; i { console.log(i); }); forEach문 만드는 법 arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) arr : 작업을 수행할 배열명 callback : 배열의 각 요소에 대해 실행할 함수 currentValue : 현재 배열 요소의 값(내가 정하는 값) index(선택적) : 현재 배열 요소의 인덱스 array(선택적) : 배열자체 thisArg(선..

자바스크립트 테스트 리뷰 입니다. 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 07. 결괏값을 작성하시오 { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } 결과보기 더보기 함수가 실행되었습니다. 11. 결괏값을 작성하시오 { let direct = 1; function gallery(num){ i..

[javascript] 퀴즈 이펙트 : 문제 풀고 정답/오답에 따라 다른 화면이 나오는 효과 퀴즈의 답을 적어 제출했을 때, 정답이면 강아지가 웃고, 오답이면 강아지가 우는 화면을 보여줍니다. 스터디 목적은 자바스크립트에서 컨트롤 하고 싶은 선택자 전달하기(데이터 저장), 문제의 정보 작성하기(데이터 저장), 전달한 선택자에 맞는 정보 전달하기(데이터 불러오기), 만들어 놓은 정답과 해설 숨기기(데이터 제어하기) 사용자가 정답을 입력하고 버튼을 클릭하면 몇가지 이벤트 발생(데이터 제어하기) Quiz 주관식 확인하기 유형 1 2 . 정답확인하기 연변대비 설명 aimee00418@gmail.com 1. 컨트롤 하고 싶은 선택자 전달하기(데이터 저장) const quizWrap = document.queryS..

퀴즈 이펙트 : 퀴즈 내고 맞추는 페이지 만들기 퀴즈를 푸는 사이트를 만들어 보겠습니다. HTML/ CSS/ JAVASCRIPT를 활용하여 만들었습니다. 목적은 자바스크립트로 문제를 저장하고 문제에 맞는 텍스트를 출력할 수 있도록 만들었습니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 연변대비 aimee00418@gmail.com CSS_공통 리셋 /* reset css */ @import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css'); @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld...

텍스트 타입 웹페이지 만들어보기 완성 된 웹사이트를 만들기 전 다양한 유형의 웹페이지 구조를 만들어 보고 있습니다. 하나의 웹사이트에는 용도에 따라 다양한 유형의 페이지들이 조합되어 있습니다. 헤더타입, 배너타입, 이미지타입, 카드타입, 텍스트타입, 푸터타입 등으로 분류하여 작업 중 입니다. 이번에 메모할 유형은 문자가 많이 보여지는 형태인 텍스트타입 페이지 입니다. 완성된이미지 코드보기 NOTICE 나에게 맞는 반려식물 고르기 건강 관심형 스투키는 사막에 살던 다육식물로 물을 자주 줄 필요가 없어 키우기 쉬운 편에 속합니다. 또 밤에 이산화탄소를 배출하는 보통 식물과는 달리, 밤에 이산화탄소를 흡수하고 산소를 배출해 침실에... 더보기 깜빡깜빡형 식물에 물 주는 것을 자꾸 깜빡~깜빡하는 분들은 주목해 ..

자바스크립트 데이터 불러오기 01. 변수 : 데이터 불러오기 02. 상수 : 데이터 불러오기 03. 배열 : 데이터 불러오기 : 기본 04. 배열 : 데이터 불러오기 : 2차 배열 05. 배열 : 데이터 불러오기 : 갯수 구하기 06. 배열 : 데이터 불러오기 : for()문 07. 배열 : 데이터 불러오기 : 중첩 for()문 08. 배열 : 데이터 불러오기 : forEach() 09. 배열 : 데이터 불러오기 : for of 10. 배열 : 데이터 불러오기 : for in 11. 배열 : 데이터 불러오기 : map() 12. 배열 : 데이터 불러오기 : 배열 펼침연산자 13. 배열 : 데이터 불러오기 : 배열 구조분해할당 14. 객체 : 데이터 불러오기 : 기본 15. 객체 : 데이터 불러오기 : O..

예제 - 외부소스 연결 (예: 스타일시트) 정의 다른 웹페이지 소스 등을 현재 웹페이지에 끌어와 적용할 때 사용. (= 외부파일링크) 1. head 태그 내부에 사용해야 하지만, 각 개별 웹페이지 상단에 넣어 사용할 수도 있음. 2. HTML5에서 일부 속성 제거 및 추가. 3. HTML에서는 종료 태그없이 단독 사용하나, XHTML에서는 반드시 끝에 / 붙여 닫아야 함. 4. 구글 웹마스터 Favicon (파비콘) 가이드라인 https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ko 구문 cf. XHTML 경우. 속성 속성 속성값 쓰임새 비고 rel alternate archives author bookmark externa..

자바스크립트 기초 상식 알아보기 자바스크립트 배울 때 기본지식 1) 인터넷과 웹(WWW)에 대한 전반적인 이해 2) HTML(HyperText Mark-up)에 대한 실무 지식 자바스크립트는 무엇인가요? JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 클라이언트 측 스크립팅 언어로서 JavaScript는 월드 와이드 웹의 핵심 기술 중 하나입니다. 예를 들어 인터넷 탐색 시 웹페이지에서 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 또는 객체 색상의 동적 변화를 보게 된다면 이는 JavaScript의 ..

자바스크립트 오늘의 시험 리뷰 // 01. 1-50까지 for문으로 출력 { for(let i=1; i{ const str = "화살표 : 리턴함수 "; return str; } document.write(func()) } document.write(" ") } 정답 화살표 : 선언함수 화살표 : 익명함수 화살표 : 매개변수함수 화살표 : 리턴함수

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

자바스크립트 제어문 01. if문 if문은 가장 간단한 조건문이다. 주어진 조건이 참이면 true, 아니면 false를 출력한다. 1, true, "0","1", 0

font style 문자 스타일 정리집 font-style .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } font-family font-family속성은 하나 이상의 글꼴 모음을 쉼표로 구분하여 나열합니다. 각 글꼴 패밀리는 또는 값 으로 지정됩니다 . 아래 예에는 두 개의 글꼴 모음이 나열되어 있습니다. 첫 번째는 a 이고 두 번째는 a 입니다 . 글꼴 모음의 이름입니다. 예를 들어 "Times"와 "Helvetica"는 글꼴 모음입니다. 공백이 포함된 글꼴 패밀리 이름은 따옴표로 묶어야 합니다. 예: "Comic Sans MS". 일반 글꼴 패밀리는 지정된 글꼴을 사용할 수..

CSS grid 사용하여 레이아웃 만들기 CSS grid로 레이아웃을 만들게 되면 table태그로 만든 것과 마찬가지로 각 열과 행을 맞추어 요소를 배치할 수 있다. table보다 grid를 사용하면 더 많이 쉽게 만들 수 있는데, 예를들어 grid container의 하위요소는 css위치지정 요소와 유사하게 실제로 겹치고 레이어 되도록 스스로 위치를 지정할 수 있다. / 예제. grid 사용하여 레이아웃 만들어보기 01. 공간에 맞는 html을 구성한다. 02. id="wrap"이 이 레이아웃의 컨테이너다. 컨테이너를 기반으로 테이블(표)처럼 행과 열을 나누어 크기를 계산한다. 분할 된 선택자에 grid-area이름을 지정하여 grid를 쓸 준비를 한다. #wrap { margin: 0 auto; wi..

display : flex 로 만든 레이아웃 이해하기 // display : flex; // flex-wrap: flex; 두 속성을 정렬이 필요한 요소들의 부모 요소에 준다. 요소들이 여러 행에 나열되도록 하려면 flex-wrap 속성의 값을 wrap으로 지정한다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치된다. . flex-wrap속성이 wrap으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 nowrap을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다. nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.

float 으로 만든 레이아웃 이해하기 float는 일반적으로 요소들이 나란히 놓이도록 웹 사이트의 전체 레이아웃을 만드는데 널리 사용되어 왔다. ▶정렬이 필요한 가운데 부분의 요소에 float:left;속성을 쓴다. ▶float: left;속성을 준 요소들의 바로 다음 요소에 clear: both; 속성을 주어야 예시 처럼 float(떠오른)된 공간으로 다음 요소가 밀어올라 가는 것을 방지할 수 있다. .clearfix::before, .clearfix::after { display: block; content: ""; line-height: 0; } .clearfix::after { clear: both; } ▶또는 float: left;를 쓴 요소들을 감싸고 있는 태그에 .clearfix를 주어 f..