june blog

문제1번 이미지의 위에 마우스 포인터르르 올려 놓았을때 바뀌었다가 이미지에서 마우스 포인터를 다른곳으로 이동하면 다시 원복하는 소스를 작성해보세요. 마우스 오버하면 이미지 바꾸기 마우스 오버 효과와 마우스 아웃 효과만 알면 쉽게 풀수 있는 문제입니다. 변수안에 img를 저장하고 이미지에 마우스오버를 하면 그림을 바꿔주고 img에 마우스아웃이 되면 다시 원래 이미지로 변경하면 됩니다. 문제2번 네비게이션 바를 클릭하면 메뉴가 표시되고 다시 클릭하면 메뉴가 숨겨지는 소스를 작성해보세요 ☰ Javascript Typescript Node.js css 에서 active 효과를 작성했습니다. 자바스크립트에서 가져와서 불러오면 됩니다. 먼저 변수에 버튼과 id=nav를 가져옵니다. 그리고 버튼을 클릭하면 이벤트를 ..

문자열 접근하기 원시유형과 객체 단순히 값만 가지고 있을 경우에는 원시유형이고 프로퍼티와 메서드를 가지고 있을때는 객체라고 설명했습니다. 문자열의 길이 length 프로퍼티 문자열의 길이를 찾을떄 프로퍼티 입니다. 기본형 : 문자열.length 예제 let str = "good morning!"; console.log(str.length); //14 문자열에서 문자 위치의 위치 활용하기 - charAt(), infexOf() 메서드 특정위치의 문자 접근하기 - charAt()메서드 문자열에서 특정 위치의 문자를 가져오려면 chatAt() 함수를 사용합니다. ESMA2015부터는 별도의 메서드 없이 배열처럼 대괄호([])를 사용할 수 있습니다. 위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다. 기본..

완성된 화면입니다. html코드입니다. 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 Cat 소개 입양문의 주의할점 지점 공지사항 찾아오시는길 로그인 슬라이드 영역 event 반려묘와 함께하는 싸이트 고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청, 고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면, 고양이와 함께 휴식을 공유 합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번쨰 이미지 두번쨰 이미지 세번째 이미지 플레이 정지 이미지 영역 고양이를 키우는 방법 반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 경제적 능력 반려묘..

퀴즈이펙트 완성 화면 입니다. html 코드입니다. Quiz객관식(슬라이드) 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 5 정답입니다. 틀렸습니다! 다음 문제 ??점 ture403@gmail.com dog_wrap 안에있는 p 와 span 태그는 총 갯수와 맞힌 갯수를 표출해 줄려고 만들었습니다. 기존 html이랑 별 다를게 없습니다. JS 코드입니다. const quizInfo = [ { infoType : "정보처리 기능사", infoTime : "2011년도 5회", infoNumber : "20110501", infoQuection : "JK 플립플롭(Flip Flop)에서 보수가 출력되기 위한 J, K의 입력 상태는?", infoChoice : ["J=1, K=0","J=0, ..

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

function test(){ setTimeout(function(){ console.log("타이머 끝!!"); },0); for(let i=0; i setTimeout (web api) 2. for문 실행 3. console 메인실행 4. setTimeout을 web api가 실행하고 안쪽의 콜백함수를 다시 queue에 등록 5. 이벤트루프를 통해서 마지막으로 callstack에 등록 */ ES5에서의 비동기 --> 동기화 (콜백함수를 활용) 1. callstack이 처음 delay함수를 호출 2. 첫번째 delay안쪽의 setTImeout을 web api가 호출하면 콜백으로 들어가있는 두번쨰 delay함수를 다시 callstack에 전달 3. callstack이 두번째 delay함수를 호출 4. 두..

퀴즈 이펙트 5번 입니다. 완성된 화면 입니다. html코드입니다. Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 ture403@gmail.com 다중으로 문제를 만들때 일일이 HTML에 입력해서 표출하는건 너무 노다가 작업입니다. 자바스크립트를 이용해서 반복을 해서 문제를 계속 표출하게 하는게 더 효율적일 것입니다. JS코드입니다. const quizInfo = [ { infoType : "정보처리 기능사", infoTime : "2011년도 5회", infoNumber : "20110501", infoQuection : "JK 플립플롭(Flip Flop)에서 보수가 출력되기 위한 J, K의 입력 상태는?", infoChoice : { 1: "J=1, K=0", 2: "J=0, K=1", 3..

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

search 이펙트 화면 입니다. HTML 코드입니다. 1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-direction : 애니메이션 움직임 방향을 설정합니다. animation-du..

피그마 화면 입니다. html코드 입니다. 푸터 고양이 사이트 소개하기 고양이 이야기 유기묘 도움주기 반려묘 만들기 고양이 음식 건식사료 습식사료 캣잎 츄르 고양이 놀이 장난감 캣휠 스크래처 캣타워 고양이 자랑하기 앨범 사진올리기 장기자랑 고양이 주의점 책임감 털날림 비용의 측면 물건 치우기 안내사항 찾아오시는길 회사소개 2023 ture403 고양이 사이트 PortFoilo is Power All Right Reserved footer_memu 안에 div 박스를 만들어서 그안에 내용을 적어주었습니다. 맨마지막에 address 태그를 써서 마지막 글을 만들었습니다. css 코드입니다. *{ margin: 0; padding: 0; } a{ text-decoration: none; color: #000;..

GSAP를 이용해서 마우스를 따라다니는 조명 효과입니다. 완성된 화면 입니다. HTML 코드입니다. javascript 데이터 저장하기 데이터 불러오기 데이터 실행하기 데이터 제어하기 문자열 객체 배열 객체 수학 객체 숫자 객체 브라우저 객체 요소 객체 이벤트 객체 데이터 효과 검색 효과 퀴즈 효과 마우스 효과 슬라이드 효과 패럴랙스 효과 게임 효과 01. 마우스 이펙트 : 정답 확인하기 유형 마우스를 따라 다니는 기본적인 효과입니다. 데이터 실행하기 : 함수 데이터 저장하기 : 변수 데이터 불러오기 : for(), forEach() 이벤트 객체 : mousemove 이벤트 속성 : clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY 요..

GSAP를 이용해서 마우스를 따라다니는 효과입니다. 완성된 화면 입니다. HTML 코드입니다. Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 If all the year were playing holidays; To sport would be as tedious as to work. 만약 매일매일이 휴일과 같다면 노는 것도 일하는 것 만큼이나 지루할 것이다. ture403@gmail.com css 메인 코드입니다. body { width: 100%; height: 100vh; overflow: hidden; background-position: center center; background-size: cover; } body.img01 { back..

마우스 이펙트 01번 입니다. 완성된 예제 입니다. HTML 코드입니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Love looks not with the eyes, but with the mind. 사랑은 눈으로 보지 않고 마음으로 보는 거지. clientX : 0 clientY : 0 offsetX : 0 offsetY : 0 pageX : 0 pageY : 0 screenX : 0 screenY : 0 ture403@gmail.com reset.css코드입니다. @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); @import url('http..

피그마에 만든 텍스트 유형입니다. HTML 코드 입니다. notice 고양이를 키울떄 주의할점 건강 검진 새로운 고양이를 입양하면 즉시 수의사를 방문하여 건강 검진을 받도록 하십시오. 정기적으로 예방 접종, 통합 검진, 벼룩 예방 등을 시행하십시오. 더보기 실내 환경 고양이는 실내에서 살아가므로 안전한 실내 환경을 제공해야 합니다. 미끄러운 바닥이나 위험한 물건을 없애고, 고양이에게 안전한 장소를 마련하십시오. 캣타워와 스크레처는 꼭 준비하세요. 더보기 적절한 사료 고양이는 고양이 전용 사료를 먹어야 합니다. 고양이에게 인간 식품을 주면 안 되며, 물과 식사 그릇은 매일 청소하십시오.물과 식사 그릇은 매일 청소하십시오. 그릇은 매일 청소하십시오. 더보기 꼬리 취급 고양이의 꼬리는 중요한 신호입니다. 꼬리..

완성된 사진입니다. HTML 코드 입니다. Quiz객관식 확인하기 1 2 3 4 5 정답입니다. 틀렸습니다! 정답 확인 하기 ture403@gmail.com div박스를 만들어서 quiz_choice 클래스를 만들어서 거기안에 4개의 inupt박스를 만들었습니다. input type을 라디오로 하고 그안에 이름을 choice로 설정 하고 각각 value값을 넣어주었습니다. 정답확인하기 버튼을 button태그를 써서 만들었습니다. quiz_desc 를 만들어서 해설을 넣었습니다. CSS코드 입니다. 강아지는 전에 있는 코드를 봐주세요 /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; ..

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 오답노트 04. 다음의 결괏값을 보고 빈칸을 작성하시오. { const obj = { a: 100, b: 200, c: "..

오전에 자바스크립트 를 배웠습니다. 객체생성자 함수,프로토타입 함수, 객체리터럴 함수, 즉시 실행 함수, 파라미터 함수, 아규먼트 함수, 재귀함수, 콜백 함수가 있습니다. 객체생성자 함수 예시입니다. { function Func(num, name, com){ this.num = num; this.name = name; this.com = com; this.result = () =>{ document.write(`${this.num}.${this.name}가 ${this.com}되었습니다.`); } } //인스턴스 생성 const info1 = new Func("100", "함수", "실행"); const info2 = new Func("200", "자바스크립트", "실행"); //실행문 info1.res..

피그마에서 작업한 프레임 입니다. HTML 코드입니다. 메인 슬라이드 영역 event 반려묘와 함께하는 싸이트 고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청, 고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면, 고양이와 함께 휴식을 공유 합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번쨰 이미지 두번쨰 이미지 세번째 이미지 플레이 정지 코드정리 일단 section 태그를 만들어 주었고 class를 silder_wrap 과 nexon을 넣어 주었습니다. 그리고 그안에 h2태그를 넣어서 글씨를 써 주었습니다. h2안에 class를 blind를 추가해서 가렸습니다. 그다음 div태그 만들어서 class silder_inner 로 지정해 주었습니다. 그안에 EVENT..

피그마에서 작업한 화면입니다. 넓이를 1920 으로 지정 해주고 높이를 800로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정했습니다. HTML 코딩 입니다. notice 고양이 종류 10가지 GPT한테 물어본 고양이 종류가 10가지가 있습니다.다음은 그 목록입니다. 샴 고양이 (Siamese Cat) 페르시안 고양이 (Persian Cat) 스코티시 폴드 고양이 (Scottish Fold Cat) 먼치킨 고양이 (Manx Cat) 시베리안 고양이 (Siberian Cat) 아비시니안 고양이 (Abyssinian Cat) 브리티시 쇼트헤어 고양이 (British Shorthair Cat) 미묘 (Munchkin Cat) 벵골 고양이 (Bengal Cat) 러시안 블루 고양이..

위에는 완성된 화면입니다. HTML 코드입니다. Quiz객관식 확인하기 1 2 3 4 정답입니다. 틀렸습니다! 정답 확인 하기 ture403@gmail.com CSS 코드입니다. /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; padding: 10px; margin-bottom: 100px; width: 100%; z-index: 1000; display: flex; justify-content: space-between; } #header::before { content: ""; border: 4px ridge #a3a3a3; position: absolute; left: 5px..

MYSQL MYSQL MySQL은 가장 많이 사용되는 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS) 중 하나입니다. MySQL은 가장 많이 사용되는 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS) 중 하나입니다. MySQL은 오픈 소스이며, 다양한 운영 체제에서 사용할 수 있습니다. MySQL은 일반적으로 웹 응용 프로그램, 데이터 분석 및 기업 응용 프로그램과 같은 다양한 분야에서 사용됩니다. MySQL은 SQL(Structured Query Language)을 사용하여 데이터를 관리하며, 데이터를 효율적으로 저장, 검색, 수정 및 삭제할 수 있습니다. MySQL은 다중 사용자, 다중 스레드 및 다중 플랫폼 지원을 제공하여 대규모 응용 프로그램에서도 효과적으로 작동할 수 있습니다. My..

break문 break문은 보통 반복문 내에서 사용되며, 실행 중인 반복문을 즉시 종료시키고 다음 코드 블록으로 이동합니다. 즉, 반복문이 조건에 따라 종료되기 전에도 break문을 만나면 그 즉시 반복문을 빠져나옵니다. 예를 들어, 아래 코드에서는 for 반복문을 실행하다가 i 값이 3이 되었을 때 break문을 만나면 for 반복문이 즉시 종료됩니다. for (var i = 0; i < 5; i++) { if (i === 3) { break; } console.log(i); } // 출력 결과: 0 1 2 return문 return문은 함수 내에서 사용되며, 함수 실행을 즉시 종료시키고 함수를 호출한 곳으로 값을 반환합니다. return문이 실행되면 그 이후의 코드는 실행되지 않습니다. 예를 들어, ..

피그마를 이용한 그리드 지정 해준 화면 입니다. 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12개 선이 생깁니다. 글자의 line-hegiht를 1.5 로 피그마는 150 으로 넣어 주면 됩니다. HTML 코드입니다. 고양이를 키우는 방법 반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 경제적 능력 반려묘가 아플떄 병원도 가야하고 사료,모래 끊이지 않게 공급해야함 아무튼 돈이 많이 들어감 자세히 보기 고양이 알레르기 고양이는 생각보다 털이 많이 날리는 동물임 천식있으시면 정말 신중하게 생각 해야함 자세히 보기 css 코드입니다. css을 보시면 .container 위까지 리셋과 많이 ..

01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 결과확인하기 x y x+y 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 결과확인하기 1 2 3 4 5 6 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } 결과확인하기 함수가 실행 되었습니다. 11. 결괏값을 작성하시오. { let direct = 1; function gallery(num){ if(num){ if(num == 2) ..

퀴즈 이펙트 02 번 결과 화면 입니다. HTML 코드입니다. Quiz주관식 확인하기 유형 1 2 . 정답 확인 하기 설명 ture403@gmail.com css 코드 입니다 (강아지 이미지는 전에 있는 퀴즈 블로그 를 참조 하세요.) /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; padding: 10px; margin-bottom: 100px; width: 100%; z-index: 1000; display: flex; justify-content: space-between; } #header::before { content: ""; border: 4px ridge #a3a3a..

퀴즈 이펙트 초기 구성 만들기 HTML 코드 Quiz정답확인하기 유형 . 정답 확인 하기 ture403@gmail.com reset.css 코드 @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; color: #222; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } ul,ol,li { list-style: none; } img { vertical-align: to..

카드 타입 유형 피그마를 이용한 그리드 지정 해준 화면 입니다. 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12개 선이 생깁니다. 글자의 line-hegiht를 1.5 로 피그마는 150 으로 넣어 주면 됩니다. 카드 타입 유형 코딩 입니다. 고양이를 키우는 방법 반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 예방접종 및 기본검사로 돈이 많이 듭니다. 키울실려면 신중하시길 바랍니다. 경제적 여건 다치거나 아프게 되고 병원에서 입원/수술을 하는경우는 100만원 단위 이상으로 발생할 수 있습니다. 그러므로 돈을 많이 벌어야 합니다. 신중신중신중 자세히 보기 집에서 보내는 시간 반려동물은..

01. 변수 : 데이터 불러오기 변수안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과확인하기 100 200 "javascirpt" 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y =200, z = "javascript"; console.log(x, y, z); } 결과확인하기 100 200 "javascirpt" 03. 배열 : 데이터 불러오기 배열안에 저장된 숫자 및 문자를 불러오는 방법입니다. { const arr = [100, 200, "javasscript"]; console.log(arr[0], arr[1], arr[..