한번 해보자 코딩

자바스크립트 시험 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 문을 이용하여 데이터를 쿼리하고, 데이터의 무결성을..

자바스크립트 데이터 제어하기 정리 오늘은 데이터 제어하기인 while문(반복문), do while문, break문, continue문들의 *document.write() 위치에 따른 값 변화가 헷갈려서 다시 한 번 정리하면서 공부해보려고 합니다. while문 while문은 조건식이 참인 동안 반복해서 코드를 실행하는 반복문입니다. 조건식이 참일 경우 while문 안의 코드가 실행, 실행되고 나면 조건식이 다시 검사, 조건식이 여전히 참이면 코드를 다시 실행. 조건식이 거짓이 될때까지 반복. { let num = 0; while(num

사이트 만들기 이미지 유형 오늘은 사이트 만들기 중에 이미지 유형에 대해 정리해보려고 합니다! 💜 이미지 유형 코드 보기 / 완성 화면 완성 화면입니다. 디자인은 피그마에서 작업해주었습니다. 맛있는 커피를 찾아서 여러 카페들을 가본 후 보기에도 예쁘고 맛있는 찐 커피맛집들을 찾아서 커피란 무엇인가 일반적으로 커피 열매의 씨앗인 커피 콩, 혹은 그 씨앗을 로스팅해 갈아서 물에 우려내서 만드는 음료 자세히보기 커피의 종류 커피의 품종은 크게 3가지로 구별 아바리카, 로부스타, 리베리카 자세히보기 body 안에 section태그를 만들어 제목들을 지정해준다. article 태그안에 이미지를 포함하고, figure 태그는 이미지를 감싸고 있는 header역할을 하고, div태그는 이미지에 대한 정보를 담고 있는..

자바스크립트 시험 2 오답 1. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 false 2.(X) { let num = 0; while( num 6 ){ break; } console.log(num); } } 정답 1,2,4,5,6 ✔ 'num'은 무한루프 루프 내에서 'num' 변수를 1씩 증가 if 조건문을 사용하여 'num'값이 3인 경우 'continue'를 실행하여 해당 루프를 건너뜀 그리고 'num'값이 6보다 큰 경우 'brake' 를 실행하여 무한 루프를 탈출. 따라서 값이 1부터 시작 3은 건너뛰고 6까지 출력 7.(X) { for(let i=1; i { const str = "함수가 실행되었습니다.";..

오늘은 저번에 했던 퀴즈 사이트를 이어서 좀 더 업그레이드 된 버전을 살펴보겠습니다. 💜 퀴즈 2번째 코드 보기 / 완성 화면 정답을 적으면 웃는 강아지가 틀리면 우는 강아지가! 우선 는 전과 동일하게 태그로 css와 연결시켜 작업해주고 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 hunmi961119@gmail.com 도 동일하지만 태그 안에 링크를 걸어 다음퀴즈로 넘어가게 설정해줍니다. 일단 2개의 퀴즈를 만들었으니 2개만 만들어줬습니다. 하나씩 동일한 방법으로 추가해주면 되겠습니다. . 정답 확인하기 연변대비 설명 hunmi961119@gmail.com 태그도 전과 동일합니다. 이제 를 이용해 가장 복잡한 부분을 작성해줍니다. const로 선택자 데이터와 문제 정보의 데이터..

오늘은 수업시간에 배웠던 퀴즈 사이트를 정리해보려고 합니다. 💜 퀴즈 코드 보기 / 완성 화면 html 에서 타이틀을 지정해주고 link로 reset.css, quiz.css파일을 지정해줍니다. css파일을 따로 만들어 html과 css를 구분해 작업하기 더 쉽게 합니다. Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 hunmi961119@gmail.com body안에 로 각각의 문서 구조를 정의해줍니다. 안에 들어간 내용은 강아지를 만들기 위한 구조들입니다. 가져온 코드는 좋아요! 싫어요!가 분명한 강아지 애니메이션 See the Pen Cute Dog by David López (@davidlpz) on CodePen. 좋아요! 싫어요!가 분명한 강아지 애니메이션 wsss.tistory.co..

사이트 만들기 카드타입(cardType) 정리 오늘은 수업시간에 해본 사이트 만들기 중 카트타입 정리를 해보려고 합니다. 우선 만들어본 사이트의 완성본입니다. 💜 카드 유형 코드 보기 / 완성 화면 피그마를 이용해 디자인 작업을 먼저 하고 그 틀을 가지고 코드를 작성합니다. 사용한 코드들 커피에 대해 알아보자 커피는 카페인이 포함된 차류 음료입니다. 커피는 주로 커피 콩에서 추출되며, 세계 각국에서 재배되고 있습니다. 일반적으로 커피는 커피빈, 원두, 분쇄된 커피 등 다양한 형태로 판매됩니다. 커피의 좋은점 커피는 일부 연구에서 많은 건강상의 이점이 있다는 것으로 나타났습니다. 커피는 당뇨병, 간암, 알츠하이머병 등의 발병 위험을 줄이는 데 도움이 될 수 있다는 것으로 알려져 있습니다. 자세히 보기 커피..

자바스크립트 데이터 불러오기(배열, 객체) 오늘은 자바스크립트 데이터 불러오기 배열과 객체에 대해 정리해 보겠습니다! 배열 펼침연산자(Spread Operator) 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자 { let arr1 = [100,200,300,400,500]; let arr2 = [600,700]; console.log(arr1, " ");//100,200,300,400,500 //배열 console.log(...arr1,);//100 200 300 400 500 //...으로 불러오면 데이터 console.log(...arr1, ...arr2);//100 200 300 400 500 600 700 } { const arr = [1,2,3,4,5]; ..

자바스크립트 화살표 함수 오늘은 화살표 함수를 정리해보려고 합니다. 기본적인 함수들은 이제 외워서 눈에 들어오긴 하는데 기본함수를 쓰고 화살표 함수로 바꿀 순 있는데 딱 화살표 함수로만 나와있으면 알아보기 쉽지 않더라구요 그래서 정리해보면서 익히려고 합니다! 일단 함수의 종류를 다시 한번 정리해볼게요! 선언적 함수 함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능 function func(){ document.write("실행되었습니다.") } func(); 익명 함수 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 준다 변수 선언 이후에 호출 cosnt func = funtion(){ document.write("실행되었습니다.") } func(); 매개변수 함수 함수를..

지금까지 배운 것들 중에 부족한 부분들 정리 사실 다 부족하지만 그 중에 아직도 바로바로 안나오고 익숙하지 않은 용어들을 정리해보면서 공부해보려고 한다. 이제는 익숙한 용어들도 한 번 더 정리하면서 머리에 익히기! JAVASCRIPT 기본 명령어 prompt(명령, 메세지) : 사용자의 정보를 얻기위해 띄우는 입력창 prompt('당신의 나이는 몇살입니까?'); alert(알림, 경보) : 사용자에게 띄우는 안내창 (경고창으로 많이 쓰임) alert('자바스크립트'); confirm(확정) : 사용자에게 띄우는 확인창 confirm('정말 삭제 하시겠습니까?'); 변수(var, let) //변수 변수명 = 데이터(값); var num = 10; var str = 'javascript'; var temp ..

시험 오답 학원에서 본 시험 오답노트! 확실히 시험을 봐야 내가 모르는게 뭔지 정확하게 알 수 있는 것 같다. 혼자 공부하다 보면 다 알았다고 생각하는데도 문제를 풀어보면 그게 아닌.. 이번에 틀린 문제로 확실히 알았으니 다음 시험은 100점 가보자고-! 출력값 보고 빈칸 채우기 1. (x) { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답 x y x+y 😥 3번째 출력값이 javascript인줄 알았는데.. 300이었다. 당연하다고 생각하지 말고 문제는 하나하나 자세히 뜯어볼것! 변수 var에 각각의 a,b,c데이터값을 저장해줬으니 ..

자바스크립트 함수 마무리 문제 1,2 모던 자바스크립트 함수 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. 힌트! 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언 parseInt( )함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환 반환값이 숫자일 경우에만 함수를 실행 정답 function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 음수입니다.`); } else { alert(`${n}은 0입니다.`); } } cons..

CSS 문자 관련 스타일 font-family 문자의 글꼴을 지정하는 속성 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ; font-size, 단위의 고찰 문자 크기를 지정하는 속성 글자 크기를 지정하지 않으면 기본값 16px이 됩니다. px 해상도에 따라 상대적으로 달라지는 기본 단위 font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위 font-size: 150%; em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위 font-size: 1.5..

CSS 레이아웃 grid 방식 정리 grid layout 은 비교적 직관적이어서 다른 레아이웃보다 사전지식이 덜 필요합니다. 예제1 가장 많이 접해본 레이아웃으로 시작해보겠습니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. 가로로2칸 세로로3칸이므로 grid-templat-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrpa { display: grid; grid-templte-colums: 30% 70%; grid-template-rows: 50px 150px 50px; } 다음은 각 칼럼의 경게선 번호를 알아야 합니다. 칼럼이 두개이므..

CSS 레이아웃 flex 오늘은 레이아웃을 구성할 때 쓰는 flex방법에 대해 정리해보려고 합니다. 최신 브라우저들에서 많이 실행됩니다. flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex : display: -webkit-flex: display: -ms-flexbox: 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예제 더보기 위의 예제와 같이 display: flex를 써주면 이렇게 레이아웃이 잘 잡힙니다. 예제에서 display: flex 를 선언하지 않으면 이렇게 레이아웃 밖에 나타납니다. flex-direction 자식 요소..

함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 됩니다. 분류 종류 설명 사용자의 정의 함수 선언적 함수 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 내장 함수 인코딩, 디코딩 함수 숫자 판별 함수 유 •무한 값 판별 함수 숫자변환 함수 문자 변환 함수 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수 선언적 함수 선언적 함수의 형식 { function func(){ document.write("실행되었습니다."); //실행문이 있어야함 } func(); //가장 기본적인 함수 } 선언적 함수의 호출 선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니..