한번 해보자 코딩

슬라이더 이펙트 : 이미지 슬라이드 (버튼, 닷메뉴) 💜 슬라이더 이펙트 06 코드 보기 / 완성 화면 버튼을 눌러 이미지를 바꿀 수 있게 작업해줬습니다. style 가로와 세로 크기를 정해두고 overflow 속성으로 이미지를 감춥니다. sliderInner 이미지가 움직이는 영역을 감사는 부모 요소에 대한 스타일을 정의 해당 요소는 가로 4800px, 세로 450px 크기로 설정 display속성으로 flexbox 레이아웃을 사용 개별적인 이미지의 크기를 정해주고 position 속성으로 상대적인 위치를 지정 버튼에 대한 스타일을 지정 hover시에는 배경색과 테두리 모양이 변경되게 해줬습니다. 개별적인 페이지 닷에 대한 설정도 해주고 애니메이션효과도 추가해줬습니다. HTML Javascript Sl..

슬라이드 이펙트 - 위로 움직이기 💜 슬라이더 이펙트 05 코드 보기 / 완성 화면 style 위로 움직이게 하기 위해선 display:flex와 flex-wrap:wrap을 없애줘야합니다. script // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지 let curre..

슬라이드 이펙트 - 좌로 움직이기(연속적) 💜 슬라이더 이펙트 04 코드 보기 / 완성 화면 style 이미지가 보이는 영역, 이미지가 움직이는 영역 = 전체 이미지를 감싸고 있는 부모, 총 이미지, 개별적인 이미지에 대한 css입니다. body Javascript Slider Effect04 04. 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 hunmi961119@gmail.com body 안에 사진을 넣어주고 작업합니다. script 슬라이드 이미지의 width값을 구하는 offsetWidth sliderClone을 이용해 첫번째 이미지 복사 sliderClone 요소를 sliderInner 변수의 마지막 자식 요소로 추가 이를 통해 마지막 이미지에서 다시 첫 번째 이미지로 이..

오늘은 코딩이 아닌 일러스트로 하루를 보낸날 먼저 연습해본 토끼 쌤이 주신 사진으로 펜툴로 선따고 이미지화 시켜서 색입혀줬다 펜툴만 써보고 이렇게 색입히는건 처음이라 신기 연습끝났으니 마음에 드는 사진 골라서 다시 선따기! 거의 완성..! 다음엔 색도 입히고 이걸 이제 코딩으로 작업해준다고했던거같은데..

자바스크립트 퀴즈 사이트 만들기 OMR 유형 (3) OMR유형 추가된 부분을 정리해보려고 합니다. 타이머 넣기(+10초 미만부터 앞에 0 붙여주기) 이름 입력해주면 해당이름 뜨게 하기 점수 결과 표시하기 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 타이머 넣기 let questionTime = ""; let questionTimeRemain = "3600"; -변수 선언 변수들의 초기값세팅 const startQuiz = () => { //시간 설정 questionTime = setInterval(reduceTime, 1000); } -함수 선언 reduseTime 함수를 1초마다 반복해서 실행하는 setlnterval() 메서드를 사용해 questionTime 변수에 할당 setlnterval() ..

자바스크립트 퀴즈 이펙트 7 OMR(2) 오늘은 바로 어제 올렸던 자바스크립트 퀴즈 이펙트의 7번째 OMR유형에 더 추가된 내용을 정리해보겠습니다! 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 시험 시작 전 창 띄우기 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사..

자바스크립트 퀴즈 이펙트 7 OMR카드 형식 만들어보기 오늘은 수업시간에 한 자바스크립트 퀴즈 사이트 만들기 OMR형식에 대해 정리해보겠습니다. 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 head 우선 header부분에 css를 연결해주고 파비콘도 만들어 넣어줬습니다. body Quiz 객관식 확인 OMR카드 형식 1 2 3 4 5 6 7 web 2020년 1회 정보처리 기능사 기출문제 59분 10초 제출하기 수험자 : 땡떙땡 전체 문제수 : 60문항 남은 문제수 : 59문항 그 다음 body안에 header, main, footer로 영역을 나누어 레이아웃작업을 해줬습니다. 원래작업했던 것들은 여기 안에서 문제정보와, OMR카드 작업을 해주었는데 이번에는 밑에 script부분에서 작업해줄거기때문에..

자바스크립트 시험 4(재시험) 오답 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

자바스크립트 연습문제 마우스 포인터를 올려놨을때 이미지가 바뀌는 효과 💜마우스 포인터 효과 코드 보기 / 완성 화면 우선 body 안에 mouse 태그를 만들어 class를 지정해줍니다. 그리고 아래 script안에 이미지 선택자를 만들어주고 mouseover와 mouseout으로 마우스를오버했을때 나오는 사진과 마우스를 뺐을때 나오는 사진을 넣어줘 효과를 줍니다. 클릭하면 메뉴나오는 효과 💜마우스 클릭 효과 코드 보기 / 완성 화면 메뉴 Javascript Typerscript Node.js body안에 button태그와 nav 태그 안에 각각의 메뉴를 지정해줍니다. 그리고 style안에 css를 설정해줍니다. script 안에 버튼을 클릭했을때의 효과를 설정해줍니다. 선택자를 먼저 만들어주고 버튼을 ..

자바스크립트 문자열 접근하기 문자열을 다루는 방법에 대해 살펴보겠습니다. 💜 원시 유형과 객체 단순히 값만 가지고 있을 경우 원시 유형이고 프로퍼티와 메서드를 가지고 있을 때는 객체 라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열을 만들때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용해보세요 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉 숫자는 Number객체, 문자열은 St..

사이트 만들기1 오늘은 사이트 만들기를 했던 각각의 영역들을 합쳐서 하나의 사이트로 만들어보는 작업에 대해 정리해보겠습니다. 💜커피 사이트 만들기 코드 보기 / 완성 화면 커피에 대한 사이트를 만들었습니다. 이미지타입, 이미지 텍스트타입, 카드타입, 베너타입, 텍스트타입, 푸터타입 이렇게 나눠서 작업을 해줬었는데요 이제 이걸 한 페이지에 다 나오게 합쳐보는 작업을 했습니다. 우선 사이트 폴더를 따로 만들어준다음, assets, css, ico, img, js파일을 각각 만들어줍니다. css폴더에 각각의 css폴더도 만들어줍니다. index파일을 만들어 여기로 하나로 합쳐주는 작업을 할겁니다. 우선 head에 파비콘과 css파일을 만들어 연결시켜줍니다. style.css @import url("header..

자바스크립트 퀴즈 이펙트 6 슬라이드 형식 오늘은 퀴즈 이펙트 6번째 유형을 정리해보겠습니다! 💜 퀴즈 6번째 코드 보기 / 완성 화면 완성화면입니다. 이번엔 슬라이드 형식으로 한문제를 풀면 다음 문제로 넘어가는 형식입니다. 우선 head 에 css링크를 넣어줍니다. head reset.css @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after..

자바스크립트 시험 4(재시험) 오답 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.indexOf("refercence", 11); str..

자바스크립트 콜백함수, 리턴, 연산자 정리 자바스크립트 관련 문제들을 풀어봤었는데요. 자바스크립트 시험 4 오답 자바스크립트 시험 4 오답 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 mi-1119.tistory.com 틀린문제들이 많아서 문제풀이를 하면서 아직 잘 모른다고 생각하는 부분들을 정리하면서 다시 공부해보려고 합니다! callback() retrun 함수 변수에 새로..

자바스크립트 퀴즈 이펙트 5 💜 퀴즈 5번째 코드 보기 / 완성 화면 자바스크립트를 이용해 만든 퀴즈 이펙트 5번을 정리해보겠습니다. 문제는 정보처리 기능사 문제를 따왔습니다. header 부분에 link 태그를 이용해 css를 연결해줍니다. 폰트정보와 그리드 배경에 대한 css와 사이트 디자인 css를 따로 설정해뒀습니다. 폰트, 기본 디자인 CSS @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); * { margin: 0; padding: 0; box-sizing: bor..

자바스크립트 시험 4 오답 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.write("함수1가 실행되었습니다."); _______(); } callback(func); //함수1가 실행되었습니다. //함수2가 실행되었습..

search Effect 서치 이펙트 💜 서치 이펙트 코드 보기 / 완성 화면 완성된 화면입니다. 검색하기 화면에 검색하는거에 따라 밑에 설명이 나옵니다! 한번 검색해보세요! 그럼 작업을 해보겠습니다! CSS연결 link 태그를 이용해 reset.css와 search.css를 올려줍니다. 클릭해서 파일을 만들어주고 따로 들어가서 css작업을 해줍니다. reset.css @font-face { font-family: 'CookieRun'; font-weight: 400; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot'); src: url('https://cdn.jsdeli..

사이트 만들기 푸터 유형 코드 보기 완성 화면 사이트 만들기의 푸터 영역을 정리해보겠습니다. 피그마를 이용해 디자인 작업을 먼저 해주고 코딩으로 들어가겠습니다. 푸터 모아보기 전체글 주간 best 커피 업체 정보 원두납품 정보 커피교육 정보 커피 아카데미 업체 이벤트 & 행사 스페셜티 카페 스페셜티 로스터 커피관련 브랜드 매거진 커피뉴스 카페 투어 컨텐츠 제보 푸드&음료 커피 라이브러리 중고마켓 전체 장비 매장 커피용품 기타 SNS facebook instagram 공지사항 이용문의 쇼핑몰 사이버몰 이용약관 광고 상품 안내 2023 JINHYUNMI 커피 관련 사이트 Portfolio is Power All Rights Reserved body영역 안에 text 를 넣어줍니다. footer menu와 f..

자바스크립트 마우스 효과 GSAP 사용 💜 마우스 효과 코드 보기 완성 화면 오늘은 마우스 효과 GSAP를 이용한 마우스 애니메이션 효과를 써보겠습니다. Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 The best way to predict the future is to invent it. 미래를 예측하는 가장 좋은 방법은 미래를 창조 하는 것이다. hunmi961119@gmail.com body안에 header와 main, footer 영역을 나누어 텍스트를 넣어줍니다. 폰트 CSS @import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css'); @import url('https:/..

3D 애니메이션 만들어보기 💜 3D 애니메이션 코드 보기 완성 화면

자바스크립트 마우스 효과 (조명효과) 💜 이미지 유형 코드 보기 완성 화면 마우스 이펙트 조명효과를 배워봤는데요 한번 정리해보겠습니다! 그 다음 head안에 style 태그로 css작업을 해줍니다. mouse cursor에 마우스 디자인을 작업해줍니다. background를 사용해 커서 디자인 안에 사진이 보이게 작업해줍니다. cursor: none; 으로 마우스 커서가 안보이게 해주고, cursor디자인 위로 글자가 오게하려면 z-index를 넣어 주면 됩니다. 마우스 효과 1번은 아래 링크에 들어가시면 보실 수 있습니다. https://mi-1119.tistory.com/43 자바스크립트 마우스 이펙트(마우스 효과) 자바스크립트 마우스 이펙트(마우스 효과) 💜 이미지 유형 코드 보기 완성 화면 Suc..

자바스크립트 마우스 이펙트(마우스 효과) 💜 이미지 유형 코드 보기 완성 화면 Success comes after repeated failures. 성공은 실패를 거듭한 후에 온다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px main태그 안에 마우스 효과를 넣어줄 글씨와 이벤트 속성인 clientX와 clientY, offsetX, offsetY, pageX, pageY, screenX, screenY를 사용해 마우스의 X, Y좌표값을 넣어줍니다. window.addEventListener("mousemove", function(event){ documen..

사이트 만들기 텍스트 유형 오늘은 사이트 만들기의 텍스트 유형을 정리해보겠습니다. 💜 텍스트 유형 코드 보기 완성 화면 피그마를 사용해 디자인 작업을 해주고 코딩으로 넘어갑니다. notice 커피 맛집 찾기 요즘 유행하는 커피 콜드 브루 커피, 네이트로 커피, 핸드 드립 커피, 라떼 아트, 샷 브루 커피, 캡슐 커피 등 여러가지 커피가 있습니다. 요즘은 달달한 크림이 올라간 커피도 유행이고 쓴 에스프레소도 유행입니다. 더보기 커피 맛있는 카페 네이버 블로그나 인스타그램, 근처 카페 찾기 등과같은 검색 기능으로 카페를 찾을 수 있습니다. 전문적인 로스팅카페를 원한다면 로스팅하는카페를 검색해보면됩니다. 더보기 1일 2카페 맛있고 예쁜 카페를 하나 가면 근처에 또 좋은 카페 없나 둘러보게 됩니다. 그렇게 1일..

자바스크립트 퀴즈 사이트 만들기 4 💜 퀴즈 4번째 코드 보기 / 완성 화면 오늘은 자바스크립트 퀴즈 만들기 4번째를 정리해 보겠습니다! Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 hunmi961119@gmail.com body 안에 header, main, footer 로 구역을 나눠 작업해줍니다. main 안에 퀴즈로 들어갈 각각의 이름들을 지정해 입력해줍니다. 객관식 문제들이기 때문에 quiz choice 태그를 만들어 안에 4개의 자식요소 태그를 또 만들어 줍니다. //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelect..

자바스크립트 시험 3 오답 01. { (function(){ console.log("함수가 실행되었습니다."); })(); } ✨ 정답보기 함수가 실행되었습니다. 02. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } ✨ 정답보기 함수가 실행되었습니다. 03.(X) { let sum = 0; for(var i=1; i5의 결과는 false가 되고, j 변수는 4로 초기화 j != 0 의 결과는 true가 된다. m변수는 논리 연산자 &&를 사용해 j num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } ✨ 정답보기 73 📑 풀이 함수를 ..

한달째 매일매일 코딩중 학원 다니기 전엔 집에서 진짜 가만~~히 만 있었는데 갑자기 공부하려니까 너무 힘들고~ 힘들어도 해야지 모르니까 해야지 하면서 하다보니 어느새 하루라도 쉬면 안될 것 같고 해서 매일 책상에 앉아서 보긴 하는데도 잘 모르겠고.. 저만..그런거 아니죠..?😂 공부하는 법을 몰라.. 일단 암기해야되는데 암기머리도 없워... 악!🤯 다들 어떻게들 그렇게 잘하시는건가요 하다보면 나도 나중엔 지금 하던것들이 쉬워질까 정말 일단 오늘 배운것들 정리!✨ 객체 생성자 함수 객체를 생성하기 위한 함수. 이 함수를 사용해 객체를 생성할 때, 일반적으로 템플릿과 같은 역할을 수행한다. { function func(num, name, com){ this.num = num; this.name = name;..

사이트 만들기 슬라이드 유형 오늘은 사이트 만들기 했던 유형 중 슬라이드 유형을 정리해보겠습니다 💜 슬라이드 유형 코드 보기 완성 화면 전과 동일하게 피그마로 먼저 작업해주고 코딩을 해줍니다. /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !important;} .mt20 {margin-top: 20px !important;} .mt30 {margin-top: 30px !important;} .mt40 ..

오늘은 사이트 만들기에서 텍스트 이미지 유형 만들기를 해본걸 정리해보려고 합니다. 💜 텍스트 이미지 유형 코드 보기 완성 화면 피그마로 먼저 디자인 작업 후 코딩으로 작업해줍니다. Document /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !important;} .mt20 {margin-top: 20px !important;} .mt30 {margin-top: 30px !important;} .mt4..

퀴즈 사이트 만들기 3번째 오늘은 퀴즈 사이트 만들기 3번째로 했던 걸 정리해보겠습니다. 💜 퀴즈 3번째 코드 보기 / 완성 화면 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 body태그 안에 들어간 main태그 입니다. 사이트 안에 들어갈 속성값들을 지정해줬습니다. 선택자 //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목/시간 const quizQuestion = quizWrap.querySelectorAll(".quiz__question..

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