공부블로그

일러스트레이트 선따서 색 입히기 큰 토끼와 애기 토끼를 선 따서 색을 입혀봤습니다. [ 선 열심히 따는중 ] [ 색과 명암을 입히며 완성! ] 토끼는 쉬웠습니다..만 다음 미션은 직접 그림을 찾아서 선을 따고 색입 힙혀보는것. 무엇을 하면 재밌게 할까 고민하다가 찾은 그림 한장. 그거 아니야 그러지마.. 뒤에서 선생님이 "그거 완성하면 진짜 멋있겠다 그치? 그거 해보자" 가스라이팅 시전. 멋있겠다 소리에 멋있게 색이 입혀진 그림을 상상하며 선 따기 시작. 휴~ 문인지 울타린지 모를것을 빠르게 선따고 흐뭇해 하는중. 점심 먹고 와서 나뭇잎 선 하나하나 따고 있는데 슬슬 아차싶음. '이게 맞나?? 지금이라도 다른걸로 바꿔도 괜찮을 거 같은데..' 자기 자신을 계속 의심하지만 내 손은 멈출 생각이 없다. 생각..

퀴즈 이펙트 ( 7-3 ) cbt 퀴즈 이펙트 ( 7-3 ) json 연동과 cbt연동 완성입니다. [ json파일 연동 완료 ] 추가 VSCode 당신의 이름은 입니다. 당신은 웹디자인 기능사시험을 선택했습니다. 시작하기 모달창에 이름을 입력할 수 있는 input 창과, 어떤 기능사 종류를 골랐는지 나타내는 span을 추가했습니다. 추가 script const cbtScore = document.querySelector(".cbt__score"); const cbtName = document.querySelector(".cbt__name"); const cbtViewInput = document.querySelector(".cbt__view input"); const cbtViewSubject = do..

퀴즈 이펙트 ( 7 ) cbt 퀴즈 이펙트 ( 7-2 ) cbt형식으로 만들었습니다. [ 처음 화면에 시작하기, 타이머, 문제수 추가 ] 추가 VSCode 기능사 시험 정보처리기능사 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회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5..

퀴즈 이펙트 ( 7 ) cbt 퀴즈 이펙트 ( 7 ) cbt형식으로 만들었습니다. [ 학교 다닐때 보던 omr 입니다! ] VSCode Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 다음 빈칸을 채우시오. 객체지향 언어는 _____이다. 클래스 메소드 상속 메시지 객체지향 언어는 이다. 객체지향 언어 asd 제출하기 이 코드는 객관식 문제를 보여주는 HTML 코드입니다. header 요소는 웹페이지 상단에 위치하는 영역입니다. 여기에는 제목(h1)과 문제 번호(li)로 구성된 ul 리스트가 포함됩니다. main 요소는 웹페이지의 주요 콘텐츠를 담는 영역입니다. 여기에는 문제를 담고 있는 div 요소들이 포함됩니다. 각 문제는 cbt 클래스를 가지고 있으..

웹디자인 기능사 실기 홈페이지 만들어보기 시험 실기를 위해 연습을 해봤습니다. VSCode 즐길거리 요금/우대혜택 참여프로그램 이용가이드 소통서비스 롯데월드 소식 | 뉴스 공지 그럴싸진관 미라클2018.11.19 드림스테이지'힘내 소중한 너'2018.11.30 '힘내 소중한 너' 음원 발배2018.11.19 이용 요금 조정 안내2018.11.19 더보기 특별한 경험 연간회원안내 연간회원안내 연간회원안내 연간회원안내 서울특별시 송파구 올림픽로 240 호텔롯데 롯데월드 | 대표자: 박동기 사업자등록번호:219-85-00014 | 통신판매업신고번호: 송파 제 5513호 | 전화:1661-2000 COPYRIGHT 2018 LOTTEWORLD. ALL RIGHTS RESERVED. 완벽하게 만든건 아니지만 일단..

문자열 잘라서 배열로 저장하기 문자열이 주어 졌을 때, 주어진 n 길이씩 잘라서 배열에 저장하기 https://school.programmers.co.kr/learn/courses/30/lessons/120913 제안 사항 예시 이 문제는 문자열과 정수가 주어지는데, 문자열을 길이 정수만큼 잘라서 배열에 저장해야 합니다. 예를 들어 "javascript" 란 문자열과 3 이란 정수가 주어졌을땐, 입출력(결과)은 ["jav", "asc", "rip", "t"] 가 return 되어야 합니다. 한번 코드를 짜보겠습니다! 일단 n만큼 문자열을 계속 잘라서 빈 배열에 보내줘야 하니 반복문과 배열 push 메서드가 쓰여야 할거 같습니다! function solution(my_str, n) { var answer ..

자바스크립트 테스트 ( 6 ) 틀린문제 오답노트 해보겠습니다.... 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

자바스크립트 마우스 오버 사진, 토글 메뉴 만들기 마우스를 사진에 올리면 바뀌게 만들고, 토글 메뉴 만들기 두가지를 준비했습니다~ 1번 문제 마우스 오버 이 문서에는 1번 이미지가 삽입되어 있습니다. 이미지 위에 마우스 포인터를 올려 놓았을 때 2번 이미지로 바뀌었다가, 이미지에서 마우스 포인터를 다른 곳으로 이동하면 1번 이미지로 바뀌는 소스를 작성해 보세요. [ 사진에 마우스 커서를 올려보세요~ ] VSCode 이 코드는 HTML과 JavaScript를 사용하여 마우스 오버(mouseover) 이벤트와 마우스 아웃(mouseout) 이벤트를 처리하는 방법을 보여줍니다. HTML 코드는 img 태그를 사용하여 이미지를 표시합니다. 이미지의 src 속성은 "img/2.png"로 설정되어 있습니다. Jav..

자바스크립트 문자열 문자열의 종류와 사용법을 알아보겠습니다. 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다! 이번엔 자바스크립트에서 문자열을 다루는 방법을 대해 살펴보겠습니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우에는 '원시 유형'이고, 프로퍼티와 메서드를 가지고 있을 때는 '객체' 라고 부릅니다. 그런데 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 자바스크립트에서는 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객체(wrapper object)' 라고 부릅니다. 원시 유형(Prim..

사이트 만들기 최종본 (헤더, 배너, 슬라이드, 카드, 이미지, 텍스트,이미지/텍스트, 푸터 유형) 을 합친 사이트 입니다. 블로그 슬라이드 유형 : https://ehcjswo.tistory.com/42 이미지 유형 : https://ehcjswo.tistory.com/36 이미지/텍스트 유형 : https://ehcjswo.tistory.com/41 푸터 유형 : https://ehcjswo.tistory.com/51 블로그에 포스팅을 안한 사이트가 많지만 완성은 다 했습니다! 완성 화면 헤더 : https://ehcjswo.github.io/web2023/site/headerType/headerType01.html 슬라이드 : https://ehcjswo.github.io/web2023/site/s..

퀴즈 사이트 만들기 ( 6 ) 객관식 문제들을 많이 풀 수 있도록 슬라이드 형식으로 만들어 보겠습니다. [ 한번 풀어보개~ ] https://ehcjswo.github.io/web2023/javascript/quiz/quizEffect06.html 링크 들어가시는게 이펙트가 안깨지고 좋습니다! VSCode Quiz 객관식 확인하기 (슬라이드) 유형 1 2 3 4 5 6 점수! 수고했개! 정답입니다! 틀렸습니다.. 다음 문제 ehcjswo1@gmail.com html 부분 입니다. 페이지는 header와 main 요소로 구성됩니다. header 요소에는 페이지 제목과 각 퀴즈에 대한 링크가 포함된 메뉴가 있습니다. main 요소에는 quiz__wrap 클래스가 있는 div 요소가 있으며, 여러 퀴즈의 정보..

논리 연산자 문제, 등차수열 등비수열 문제 금요일 테스트 봤던 논리연산자 문제 하나와 등차,등비수열에 관한 문제 입니다. 우선 문제를 보기 전 논리연산자의 개념부터 알아보겠습니다. 논리연산자란? 논리 연산자는 불리언 값 (true 또는 false) 간의 연산을 수행하는 연산자입니다. 자바스크립트에서는 세 종류의 논리 연산자를 제공합니다. 1. && (and) 양쪽 피연산자가 모두 true 일 때 true를 반환합니다. 만약 어느 한 쪽이 false이면 false를 반환합니다. 예시: true && true는 true를 반환하고, true && false는 false를 반환합니다. 2. || (or) 양쪽 피연산자 중 하나라도 true이면 true를 반환합니다. 양쪽 피연산자가 모두 false일 때 fal..

퀴즈 사이트 만들기 객관식 문제들을 많이 풀 수 있도록 만들어 보겠습니다. [ 문제가 좀 많개 ] https://ehcjswo.github.io/web2023/javascript/quiz/quizEffect05.html 링크를 눌러 큰 화면으로 편하게 보실 수 있습니다! VSCode Quiz 객관식 확인하기 (여러문제) 유형 1 2 3 4 5 html 부분 입니다. 페이지는 header와 main 요소로 구성됩니다. header 요소에는 페이지 제목과 각 퀴즈에 대한 링크가 포함된 메뉴가 있습니다. main 요소에는 quiz__wrap 클래스가 있는 div 요소가 있으며, 여러 퀴즈의 정보가 이 div 요소 안에 동적으로 로딩됩니다. 주석 처리된 코드를 제거하면, 퀴즈 질문과 선택지, 그리고 정답 확인 ..

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 코드팬으로 만든 이펙트 입니다. 로딩중 띄우기 좋은 이펙트 인거 같아요!

자바스크립트 테스트 ( 5 ) 틀린문제 오답노트 해보겠습니다.. 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가 실행되었습니다."); _____..

서치 이펙트 (searchEffect) CSS 속성 검색할 수 있는 사이트를 만들었습니다. [ 원하는 속성을 검색해보세요! ] VSCode 1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animatio..

푸터 (footer) HTML에서 태그는 일반적으로 웹 페이지의 하단에 있는 섹션을 나타냅니다. 이 섹션은 페이지의 제작자 정보, 저작권 정보, 연락처 정보, 관련 링크 등을 포함할 수 있습니다. [ 완성된 푸터 피그마 ] 일반적으로 태그는 웹 페이지의 내용의 끝을 표시하고, 페이지가 끝났음을 나타내기 위해 사용됩니다. 태그는 보통 태그와 쌍을 이루며, 이 둘은 웹 페이지의 상단과 하단을 각각 나타냅니다. VSCode 푸터 간식 사이트 소개하기 간식 이야기 간식 추천 간식 만들기 인기 상품 상품 목록 간식 추천 간식 고르기 쿠키 인기 상품 간식 랭킹 간식 세일 간식 목록 케이크 인기 상품 간식 랭킹 간식 세일 간식 목록 음료수 인기 상품 간식 랭킹 간식 세일 간식 목록 정보 이용 약관 간식 주의점 개인정..

VSCode

마우스 이펙트 ( 3 ) getBoundingClientRect()는 DOM 요소의 크기와 위치 정보를 제공하는 메서드입니다. [ 숨겨진 배경화면을 밝혀보세요! ] VSCode Javascript Mouse Effect03 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Yeah, life is a good thing, whatever it is. 그래, 어떻든 간에 인생은 좋은 것이다. ehcjswo1@gmail.com header 선택한 페이지를 쉽게 이동 할 수 있도록 버튼을 만들었습니다. main 선택자엔 커서클래스, 명언이 들어갈 텍스트 클래스가 있고 중요한 단어,문장에 span태그를 줘서 마우스 이펙트 효과를 넣을 수 있게 만들었습니다. footer 선택자엔 이메일 링크가 있습니다. CS..

마우스 이펙트 ( 2 ) GSAP (GreenSock Animation Platform)은 자바스크립트로 애니메이션을 만들기 위한 라이브러리입니다. [ 뒤늦게 따라오는 원이 귀엽죠? ] VSCode Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 If you keep your dream, it's time to realize it. 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. ehcjswo1@gmail.com header 선택한 페이지를 쉽게 이동 할 수 있도록 버튼을 만들었습니다. main 선택자엔 커서클래스, 명언이 들어갈 텍스트 클래스가 있고 중요한 단어,문장에 span태그를 줘서 마우스 이펙트 효과를 넣을 수 있게 만들었습니다. foot..

마우스 이펙트 자바스크립트를 사용하여 마우스 이벤트를 처리하여 다양한 마우스 이펙트를 구현할 수 있습니다. [ 커서를 문장에 가져가 대보세요! ] VSCode Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Only I Can Change My LIFE. Noone Can Do it For ME 나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ehcjswo1@gmail.com header 에는 선택한 페이지를 쉽게 이동 할 수 있도록 버튼을 만들었습..

텍스트 유형 사이트 웹 디자인에서 텍스트는 중요한 역할을 담당하며 웹 페이지의 시각적인 효과를 높이는 데 기여합니다. [ 피그마 텍스트 유형 사이트 ] VSCode NOTICE 간식의 무서운점 비만 과다한 간식 섭취는 비만 및 대사 증후군의 위험을 증가시킬 수 있습니다. 신체에 불필요한 에너지를 제공할 뿐만 아니라 체중 증가 및 당뇨병, 고혈압 등의 질병 발생 가능성을 높일 수 있습니다. 더보기 소화장애 과도한 간식 섭취는 소화장애의 원인이 될 수 있습니다. 간식은 대개 지방과 설탕이 많아 소화를 위해 추가적인 소화 효소가 필요할 수 있습니다. 소화장애 증상을 유발할 수 있습니다. 더보기 치아 우식 과도한 간식 섭취는 치아 우식의 위험을 증가시킬 수 있습니다. 많은 간식에는 설탕이 들어가 있으며, 이는 ..

퀴즈 사이트 ( 4 ) 객관식 문제를 풀 수 있도록 만들어 보겠습니다. [ 모르면 찍으시개 ] VSCode " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 [ 주말이 좋개~ ]

자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 결과: 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 결과: 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i

코딩 일기

슬라이드 유형 사이트 슬라이드 사이트(Slide site)란 이미지나 동영상, 텍스트 등을 슬라이드 형태로 구성한 웹사이트를 말합니다. 슬라이드 사이트는 보통 특정한 주제나 테마에 대해 정보를 제공하거나, 프리젠테이션을 위해 사용됩니다. VSCode 메인 슬라이드 영역 event 고민하지 마세요! 매일매일 힘든 일상에서, 달콤한 한 입의 쉼을 드세요. 우리의 간식은 당신의 하루를 달달하게 만들어줄 거예요. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 HTML 부분 입니다! 피그마의 사진중 맨 윗장을 작업했습니다. 슬라이더 클래스를 만들어 사진이 들어갈 자리를 만들어 주고, 슬라이더 클래스 안에 event박스, 타이틀, 내용,을 적어두고 밑에 버튼..

이미지 / 텍스트 유형 사이트 웹 디자인에서 이미지 / 텍스트는 중요한 역할을 담당하며 웹 페이지의 시각적인 효과를 높이는 데 기여합니다. [완성된 이미지/텍스트 유형 사이트] VSCode NOTICE 수 많은 간식의 종류 간식은 다양한 종류가 있습니다. 자신이 좋아하는 종류의 간식을 선택하고, 그 간식을 즐기기 위한 시간을 가져보세요. 간식을 즐기기 위해 충분한 시간을 가지는 것은 행복감을 느끼는 데 큰 도움이 됩니다. · 과일 (바나나, 사과, 오렌지, 딸기 등) · 초콜릿 (땅콩초콜릿, 밀크 초콜릿 등) · 쿠키 (초코칩 쿠키, 버터 쿠키, 오트밀 쿠키 등) · 케이크 (초콜릿 케이크, 생크림 케이크 등) · 아이스크림 (바닐라, 초콜릿, 딸기, 민트 등) · 과자 (스낵과자, 쿠키와퍼, 빼빼로, ..

퀴즈 사이트 ( 3 ) 주관식 문제를 3개를 풀 수 있도록 만들어 보겠습니다. [ 분신술이개! ] VSCode " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 [ 오늘은 울개 😢 ]

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

브레이크문 복습, 문제 하나 자바스크립트에서 break문은 반복문이나 switch문에서 사용되며, 코드 실행 중지를 의미합니다. 반복문에서의 break break문은 주로 for문, while문, do-while문 등과 같은 반복문에서 사용됩니다. 반복문 내에서 break문이 실행되면, 반복문을 즉시 종료하고 반복문 이후의 코드를 실행합니다. for (var i = 0; i < 10; i++) { if (i === 5) { break; } console.log(i); } // 결과: 0 1 2 3 4 출력문의 위치도 잘 확인하여 결과가 어떻게 나오는지 잘 생각해봐야 합니다! 만약에, for (var i = 0; i < 10; i++) { console.log(i); if (i === 5) { break;..