코딩하는 거북이

밑 스케치 펜툴 작업하기 위 스케치 이미지를 일러스트레이터로 외곽선을 따고 색을 입히는 작업을 해보겠습니다. 펜툴을 사용하여 외곽선을 따라 그려주고 선 두께를 군데군데 조정하여 부드러운 그림효과를 내주었습니다. 외곽선을 빈틈없이 채우고 라이브페인트를 사용하여 면의 색을 입혀주었습니다. 명암까지 넣어주면 끝 ! 조금 더 복잡한 이미지도 도전해봅시다 !

CBT형식의 시험지 만들기 추가된 HTML 추가된 HTML알아보기 시험 문제를 다 풀고 제출하기 버튼을 눌렀을 때 사용자의 점수를 나타내줄 div박스를 하나 추가하였습니다. 내용추가 1번에서 만들었던 select 박스에 onchange="changeSelet(this)"를 추가하여 select박스의 내용이 변할 때 함수를 추가하였습니다. 추가된 javascript const nameInput = document.querySelector(".cbt__view input"); const cbtResult = document.querySelector(".cbt__result"); let great = 0; const startQuiz = () => { cbtStart.classList.add("hide"); ..

CBT형식의 시험지 만들기 추가된 HTML 시험 유형 선택하기 정보처리기능사 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회 정보처리기능사 2011년 1회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능..

CBT형식의 시험지 만들기 HTML 작성하기 Quiz 객관식 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 59분 10초 제출하기 수험자 : 전체 문항 : 문항 남은 문항 : 문항 HTML 정리해보기 기존에 사용하던 강아지(dog__wrap부분)와 다른 방식인 CBT형식으로 만들기위해 html의 구조를 다르게 변경했습니다. 구조는 크게 좌, 우를 나누어 좌측에는 문제를 나열하고 우측에는 omr형식의 답지를 고정하여 두는 구조입니다. 문제가 많아 script로 문제와 omr카드를 출력하기 때문에 문제가 들어갈 cbt__quiz부분과 omr형식의 답지가 들어갈 cbt__omr부분을 만들어 놓기만 했습니다. CSS 작성하기 .quiz__wrap__cbt { padding: 0 2..

마우스 오버 했을 때 이미지 바꿔주기 스크립트를 통해 이미지에 마우스를 올렸을 때, 이미지가 바뀌는 효과를 주도록 하겠습니다. HTML 작성하기 마우스 오버하면 이미지 바꾸기 HTML 정리해보기 html문서에는 간단하게 주제와 이미지 하나만을 넣어주었습니다. 밝은 한강의 사진을 넣어주었고, 스크립트를 통해 마우스 오버했을 때, 어두운 사진으로 바뀌면서 밤이 되는 느낌을 주도록 하겠습니다. Javascript 작성하기 const Img = document.querySelector("#container img"); Img.addEventListener("mouseover", () => { Img.src = "practice/img/Han-river2.png" }); Img.addEventListener("m..

문자열 property, 문자열 method 문자열의 길이 문자열.length 위 형식으로 사용하면 문자열의 길이를 나타낼 수 있습니다. 문자열의 길이에는 공백도 포함됩니다. const str = "Good morning!"; console.log(str.length)// 14 const str1 = "안녕하세요"; console.log(str1.length)// 5 문자열에서 문자의 위치 활용하기 문자열에서 특정 위치의 문자 문자열.charAt(위치) 위 형식으로 사용하면 문자열에서 특정 위치의 문자열을 가져올 수 있습니다. 인덱스로 표시하므로 0부터 시작합니다. const str = "Good morning!" console.log(str.charAt(3))// d console.log(str.[5]..

레이아웃 실전 종합 이번에는 만들어놓은 레이아웃들을 한 곳에 합쳐 웹페이지를 만들어보도록 하겠습니다. (슬라이드 제외) 슬라이드 유형은 다음에 따로 만들도록 하겠습니다. 만들어진 페이지 보러가기 https://dlgnsrb227.github.io/web2023/site/site1/index.html HTML 작성하기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 Han-River. 전경 소개 역사 위치 주변 공원 로그인 EVENT 한강 무료 아메리카노 여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노 시식 이벤트가 진행됩니다. 자세히 ..

여러개의 객관식문제 출력하기 (슬라이드 형식) HTML 작성하기 Quiz 객관식(여러문제) 확인하기 / 슬라이드 유형 1 2 3 4 5 6 정답 ! 오답 ! 다음 문제보기 gnsrdbi@naver.com HTML 정리해보기 기존 4번의 객관식 페이지와 동일하지만 이번 페이지에서는 각각의 Tag를 만들어 script를 통해 html문서에 넣어 줄 것이라 문제의 보기 부분을 지웠습니다. 그 외는 4번 페이지의 html과 동일합니다. 새로 추가된 CSS .quiz__main h4 { text-align: center; padding-top: 5px; font-family: DungGeunMo; } CSS 정리해보기 남은 문제의 개수를 알려주는 h4태그를 하나 넣어주었기 때문에 h4태그의 속성을 만들어 주었습니..

레이아웃 실전 _ 배너 유형 이번에는 웹페이지 안에 들어가는 배너유형을 작업해 보도록 하겠습니다. 배너유형 디자인하기 HTML 작성하기 한강을 제대로 즐기는 방법 한강에서 보내는 시간을 더 아름다운 추억으로 남길 수 있는 방법을 알려드립니다. 아래 블로그를 참고하여 한강에서의 추억을 더욱 값지게 만들어보세요. https://hoong-co.tistory.com/ HTML 정리해보기 이번 배너 유형은 다른 section들과 달리 하나의 article만 만들었습니다. 하나의 article에 h3, p, a 태그를 사용하였습니다. CSS 작성하기 * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1,h2,h3,h4,h5,h6 { f..

여러개의 객관식문제 출력하기 HTML 문서작성 Quiz 객관식(여러문제) 확인하기 유형 1 2 3 4 5 gnsrdbi@naver.com HTML 정리해보기 이번 객관식 퀴즈 유형은 문제의 갯수만큼 계속 출력시키도록 script를 작성하기 때문에 기존의 html문서에서는 헤더와 푸터, quiz__wrap부분만 남기고 전부 지웠습니다. 새로 추가된 CSS .quiz__check { position: fixed; right: 40px; bottom: 70px; width: 100px; height: 100px; line-height: 95px; border-radius: 45%; text-align: center; background-color: rgb(247, 157, 157); font-family: H..

Javascript 연습문제 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(fu..

검색할 수 있는 효과 만들기 이번에는 여러개의 목록 중 사용자가 검색한 내용을 볼 수 있는 검색효과를 만들어보도록 하겠습니다. 완성화면 HTML 작성하기 1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 css속성 : css속성 설명 gnsrdbi@naver.com CSS 작성하기 /* header */ #header { padding: 1.4vw 1.4vw 1.8vw 1.4vw; } #header ul { } #header li { list-style: none; display: inline; } #header li a { text-decoration: none; width: 50px; height: 50px; line-he..

레이아웃 실전 _ 푸터유형 이번에는 웹페이지의 가장 하단에 부분에 들어가는 푸터 유형에 대해 작업해 보겠습니다. 푸터유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 한강 주변 식당 소개하기 방문 예약하기 사진 보기 식당 구경하기 식당 등록하기 커뮤니티 한강 주변 카페 소개하기 방문 예약하기 사진 보기 카페 구경하기 카페 등록하기 커뮤니티 한강공원 화장실 위치보기 안내보기 시설보기 가까운 시설 안내 한강 배달존 위치보기 배달점 검색 주소받기 가까운 자리 보기 한강 대여소 대여물품 대여하기 사진 보기 반납존 위치 보기 가격문의 신고하기 불법행위 소란행위 민원안내 안내소 위치 2023 한강공원 나들이 프로젝트 HanRiver Picnic All Right Reserved HTML 정리해보기 이번..

마우스 위치를 따라다니는 조명 효과 만들기 페이지 미리보기 HTML 작성하기 Javascript Mouse Effect03 마우스를 따라다니는 조명 효과 1 2 3 4 5 6 If not now, then when ? 지금이 아니면, 언제 하실 건가요 ? gnsrdbi@naver.com HTML 정리해보기 3번 페이지에서는 img03 bg03 의 class를 주었고, 조명효과를 사용하기 위해 덮어쓰는 배경이미지의 투명도를 약하게 주었습니다. 2번 페이지와 달리 마우스를 따라다니는 "mouse__cursor" 도형은 하나만 필요합니다. CSS 작성하기 #header { z-index: 100; } .mouse__wrap { cursor: none; } .mouse__text { width: 100%; he..

마우스 위치를 따라다니는 효과 만들기 (gsap 사용) 페이지 미리보기 HTML 작성하기 Javascript Mouse Effect02 GSAP를 이용해서 마우스를 따라다니기 1 2 3 4 5 6 Age is no guarantee of maturity. 나이가 성숙을 보장하지는 않는다. gnsrdbi@naver.com HTML 정리해보기 1번페이지와 거의 동일하게 만들었지만 마우스를 따라다니는 "mouse__cursor" 박스를 2개 더 만들어 총 세개를 만들어 주었습니다. 2번 페이지에서는 2번 이미지와 2번의 배경색을 사용하기 위해 class에 img02와 bg02를 추가했습니다. CSS 작성하기 .mouse__wrap { cursor: none; } .mouse__text { width: 100%..

마우스 위치를 따라다니는 효과 만들기 이번에는 웹 페이지 내에 도형을 만들어 마우스를 따라다니는 효과를 만들어 보도록 하겠습니다. 페이지 미리보기 HTML 작성하기 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 If you don't want to regret, don't live like that, if you're going to live like that, don't regret. 후회하기 싫으면 그렇게 살지 말고, 그렇게 살거면 후회하지마라. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px gnsr..

레이아웃 실전 _ 슬라이드 유형 이번에는 웹페이지에 들어갈 텍스트 유형의 레이아웃을 만들어 보겠습니다. 텍스트유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 HISTORY 한강의 역사 한국의 한강 한강은 대한민국에서 가장 중요한 강 중 하나로, 서울을 비롯한 수도권 지역의 생명선이기도 합니다. 한강의 역사는 매우 오래되었으며, 이 지역을 거주하던 선사시대부터 현재까지 ... 더보기 한강의 과거 선사시대에는 한강 주변 지역에 선사 문화가 발전하였으며, 이후 백제와 고구려가 이 지역을 통제하였습니다. 고려시대에는 한강이 경제와 군사의 중요성을 가졌으며, 성종 때에는 ... 더보기 기준이 되는 한강 조선시대에는 한강 주변 지역이 국가 발전의 중심지가 되었으며, 여러 대목으로 이루어진 다목적 수로..

객관식 문제 출력하기 HTML 문서작성 Quiz 객관식 확인하기 유형 1 2 3 4 5 정답 ! 오답 ! 정답 확인하기 gnsrdbi@naver.com HTML 정리해보기 앞서 게시한 주관식 확인하기 유형의 퀴즈 페이지와 유사하지만, 이번에는 객관식을 확인하는 유형이므로 주관식에서 사용했던 정답을 적는 input박스의 타입을 text에서 radio로 바꾸어주었습니다. 총 4개의 보기를 만들기 위해 각각 다른 id, value값을 주고 네 개의 input 버튼을 만들었습니다. 새로 추가된 CSS .quiz__choice label { display: flex; } .quiz__choice label input { position: absolute; clip: rect(0 0 0 0); width: 1px;..

Javascript 연습문제 1. 결괏값을 작성하시오 { (function(){ console.log("함수가 실행되었습니다."); })(); } 결과 확인하기 함수가 실행되었습니다. 2. 결괏값을 작성하시오 { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 결과 확인하기 함수가 실행되었습니다. 3. 결괏값을 작성하시오 { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 결과 확인하기 73 이상으로 몇 가지 javascript관련 연습문제를 풀어보았습니다 !

코딩일기.(1) 코딩을 배운지 이제 겨우 한 달이 지났지만, 이 짧은 시간에 깨운친 것이 있다. 코딩은 생각보다 재미있고, 코딩은 생각한 것보다 훨씬 복잡하고 어렵다는 것이다. 코딩 공부를 하기 전에는 하루 평균 3~4 시간은 게임을 했는데 거짓말처럼 공부 시작과 동시에 정말 한 번도 로그인조차 한 적이 없다. 근데 또 거짓말 같지도 않은 것이 게임을 할 시간이 없어서 당연한 건지도 모르겠다.😓 아침부터 저녁까지 학원에 앉아서 뒤처지지 않으려고 미어캣마냥 허리 쭉 세우고 앞 선생님 화면 보고 다시 거북이마냥 쭈그려서 내 화면보고 쉴 새 없이 반복하다 집에 오면 몸도 뻐근하고 피곤해서 게임을 하기 위해 다시 컴퓨터 앞에 앉을 생각 조차도 못하는 걸지도 ... 그래도 내가 적은 코드 몇 개가 모양을 갖추고,..

레이아웃 실전 _ 슬라이드 유형 이번에는 웹페이지에 들어갈 슬라이드 유형의 레이아웃을 만들어 보겠습니다. 슬라이드유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 메인 슬라이드 영역 EVENT 한강 무료 아메리카노 여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노 시식 이벤트가 진행됩니다. 자세히 보기 참여 하기 이전 이미지 다음 이미지 첫 번째 이미지 두 번째 이미지 세 번째 이미지 플레이 정지 HTML 정리해보기 슬라이드 유형의 경우 전체 배경에 이미지가 들어가기 때문에 별도의 container 안에 작업하지 않았습니다. slider__inner 클래스의 박스에 크게 세 부분으로 나누어 작업하였습니다. 이미지와 주제, 설명 등의 글이 들어가는 한 부분, 슬..

레이아웃 실전 _ 이미지/텍스트 유형 이번에는 텍스트와 이미지가 같이 있는 유형을 한번 만들어보도록 하겠습니다. 이미지/텍스트 유형 디자인하기 만들고자 하는 사이트의 디자인을 구상해봅니다. 구상한 디자인 기반으로 코딩 HTML 작성하기 park 한강을 끼고있는 공원 한강 주변에는 다양한 공원이 있습니다. 여기에 몇 가지 추천 공원을 알려드리겠습니다. 반포 한강공원 여의도 한강공원 이촌 한강공원 뚝섬 한강공원 난지 한강공원 잠원 한강공원 망원 한강공원 잠실 한강공원 광나루 한강공원 강서 한강공원 양화 한강공원 HTML 정리해보기 하나의 컨테이너에 이미지들을 감쌀 수 있는 하나의 박스를 만들고 그 안을 세 개의 로 나누어 주었습니다. 두 번째, 세 번째 은 준비한 이미지를 넣어주고, 첫 번째 에는 태그를 사..

주관식 문제 여러개 출력하기 퀴즈화면 예시 HTML 문서 작성 Quiz 주관식(여러문제) 확인하기 유형 1 2 3 4 . 정답 ! 오답 ! 정답 확인하기 . 정답 ! 오답 ! 정답 확인하기 . 정답 ! 오답 ! 정답 확인하기 gnsrdbi@naver.com HTML 정리해보기 앞서 게시한 퀴즈 화면 만들기의 퀴즈부분을 두번 더 반복하여 총 세개를 만들어 주었습니다. CSS 문서 작성 .quiz__wrap { display: flex; justify-content: center; flex-wrap: wrap; align-items: flex-start; } 추가된 CSS 세 개의 퀴즈 박스의 지문, 해설 등의 길이가 달라 서로 같은 크기로 맞춰지며 짧은 지문의 문제에 여백이 생겨버리는 탓에 "align-i..

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

javascript에서 사용하는 함수의 유형 몇가지 이번에는 javascript의 함수유형에 대해 간단하게 몇 가지 알아보겠습니다. 함수와 매개변수를 이용한 형태 function func(num, str1, str2){ document.write(num + "." + str1 + "가 " + str2 + "되었습니다. "); } func("1","함수","실행"); func("2","자바스크립트","실행"); func("3","리액트","실행"); 결과 확인하기 1.함수가 실행되었습니다. 2.자바스크립트가 실행되었습니다. 3.리액트가 실행되었습니다. 함수와 변수를 이용한 형태 function func(num, str1, str2){ document.write(num + "." + str1 + "가 " +..

레이아웃 실전 _ 이미지 유형 이미지 유형 레이아웃 디자인하기 우선 만들고자 하는 웹 사이트의 디자인을 구상해 봅니다. 구상한 디자인 기반으로 코딩하기 구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다. HTML 문서 작성 한강의 전경 한강은 평소에 봐도 저녁에 봐도 이쁩니다. 낮의 한강 맑은 날 밝을 때 한강을 가면 산뜻하고 웅장한 느낌을 받을 수 있습니다. 자세히보기 저녁의 한강 노을이 지는 저녁에 한강을 가면 맥주를 안 마시고는 버틸 수 없는 전경이 펼쳐집니다. 자세히보기 HTML 정리해보기 하나의 section에 제목과 이미지로 크게 두 부분으로 나누어 구조를 짜봤습니다. 이미지의 부분에는 다시 두 부분으로 나누어 각각의 이미지를 넣어주었습니다. CSS 정리해보기 * { margin: 0..

Javascript 간단한 연습문제 결과값 작성 문제 { if( null ){ console.log("true"); } else { console.log("false"); } } 결과 확인하기 false { let num = 0; while( num 6 ){ break; } console.log(num); } } 결과 확인하기 12456 풀이 변수 num을 설정해주고 num에 대한 while문으로 실행됩니다. num은 숫자이기 때문에 while(true)는 무한 실행 되지만, num이 6보다 커지면 break가 걸리게 됩니다. num의 ++연산이 console.log보다 전에 있으므로 연산이 우선적으로 진행되고 3일 때 건너뜁니다. 따라서 답은 12456이 됩니다. { for(let i=1; i { co..

문제와 정답을 적을 수 있는 화면 만들기 퀴즈화면 예시 HTML 문서 작성 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 설명 gnsrdbi@naver.com HTML 정리해보기 앞서 게시한 퀴즈화면 만들기 1번과 같은 형식으로 구조를 짰습니다. CSS 문서 작성 .quiz__answer .input { background-color: #fff; border: 6px groove #cacaca; width: 100%; font-family: HealthsetGothic; padding: 10px 20px; font-size: 22px; margin-bottom: 10px; } .quiz__footer::before { content: "✔Tip"; color: #F5534F; font-weigh..

문제와 정답을 적을 수 있는 화면 만들기 이번에는 화면에 문제를 띄우고 버튼을 만들어 정답을 볼 수 있도록하는 페이지를 만들어 보도록 하겠습니다 ! 페이지 디자인하기 문제를 적어주고 '정답 확인하기' 버튼을 누르면 정답을 볼 수 있도록 디자인 해봤습니다. HTML 문서 작성 Quiz 정답 확인하기 유형 . 정답 확인하기 gnsrdbi@naver.com HTML 정리해보기 기본적으로 페이지의 헤더와 메인, 푸터 영역을 만들어주고 메인영역에 다시 퀴즈에 대한 헤더, 메인, 푸터 영역을 만들어줍니다. quiz__header 에는 quiz__title 하나를 넣어주었습니다. quiz__main 에는 quiz__question(문제 부분), quiz__view(캐릭터 부분), quiz_answer(정답 부분) 세..

레이아웃 실전 _ 카드유형 카드유형 레이아웃 디자인하기 우선 만들고자 하는 웹 사이트의 레이아웃을 구상해봅니다. 구상한 디자인 기반으로 코딩하기 구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다. 한강을 알아보자 한강은 낮에도 밤에도 아름다운 광경이 펼쳐지지만, 특히 맑은날 저녁 노을이 지는 무렵의 한강의 모습은 하루의 고단함을 저절로 잊게 만들어주곤 합니다. 한강 주변 관광지 한강 주변에는 대표적으로 한강공원이 위치하며, 주요 관광지로는 남산타워, 경복궁, 국립중앙박물관, 63빌딩, 덕수궁 등이 있습니다. 또한, 한강을 따라 자전거도로와 산책로가 조성되어 ... 자세히 보기 한강의 중요성 한강은 또한 한반도의 역사와 문화를 반영하는 중요한 상징 중 하나입니다. 특히, 1950년대 한국전쟁에서 ..