천사님 밥 친구해요

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 문제를 풀었던 명언 30개에다가 추가하라는 미션을 받았습니다. 배경 이미지가 계속 변하게 만들라는 것입니다. (밑에가 랜덤 30개 미션이었습니다.) https://skadldldl123.tistory.com/manage/newpost/78?type=post&returnURL=https%3A%2F%2Fskadldldl123.tistory.com%2Fmanage%2Fposts HTML+CSS+JAVASCRIPT코드 2초만 기달려주세요 코드 설명 1. img태그를 하나 만듭니다. 2. let Img = document.querySelector("img"); querySelector("img");로 img태그를 찾습니다. 3. setInterval..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 ㅠ_ㅠ... set()을 이용해 보라고해서 이용했어요. 처음에 set으로 중복을 지우는데 중복이 계속 삭제가 되는거애요. 그래서 중복이 제거된 부분에 값들을 추가를 해봐도 중복이 계속 겹치더라고요. 그래서 다시 중복을 지우니간 중복이 제거가 되는겁니다.ㅠ_ㅠ (머리가 아파왔습니다.) 6시간 헤매고 난다음. 구글링 30분 하고나서야 set()의 비밀을 알았어요... for()을 이용해서 만들면 중복을 제거한다고 하더군요.. -_- 6시간을 뺏겼지만. 이전보다 배열에 대해 좀 더 알게 되어서 괜찮네요 (공부해야 하는데.. 못했어요.) 문제내용 자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하세요. set()을 꼭 이용할 것 / ..

완성된 모습 HTML 삽입 미리보기할 수 없는 소스 문제 내용 json파일에 배열로 생성한 내용이 30개가 있습니다. ("명언"과 "사람 이름" 입니다.) 여기에 저장된 내용들을 랜덤하게 출력을 하라는 문제입니다. 저는 2개로 만들어 봤어요. 1) 1개씩 차례대로 추출하는 방법입니다. (문제를 잘못 봐서 만들었어요. 지우기가 아깝네요.) 2) 랜덤으로 추출하는 방법입니다. 1) 1개씩 차례대로 추출하는 코드입니다. 3초만 기달려주세요 코드설명 1. fetch()로 json파일을 불러옵니다. 2. let Result, let Quote, let What은 명언, 사람 이름, 몇번인지 출력할 변수입니다. 3. setInterval은 주어진 시간만큼 반복적으로 실행합니다. 4. result.quotes[num..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 닷버튼 대신 썸네일이 있습니다. 썸네일을 클릭하면 슬라이드가 이동합니다 그리고 NEXT와 PREV버튼을 누르면 이동합니다. HTML+CSS코드 Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next mailto: skadldldl123@gmail.com 코드설명 1.div태그인 .slider__wrap은 안에 있는 내용물들을 전부 이동 시켜줍니다. 2.div태그인 .slider__img는 이제 슬라이드에 들어갈 이미지가 들어갑니다 (이것은 JAVASCRIPT로 넣어줄 예정입니다.) 3.div태그인 .slider__thumb은 이제 닷버튼 대신 들어갈 썸..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 닷버튼을 클릭하면 슬라이드가 이동을 합니다. Next와 Prev버튼은 선생님이 해주셨습니다. HTML+CSS코드 Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next mailto: skadldldl123@gmail.com 코드설명 (이번것도 HTML을 슬라이드 2번을 활용해서 만들어서 중복이네요) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번거는 슬라이드 4번을 이용해서 위로 올라가는 것을 만들어 보라는 미션입니다. (JAVASCRIPT, GSAP, JQUERY) HTML+CSS코드 Javascript Slider Effect05 슬라이드 이팩트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 mailto:skadldldl123@gmail.com 코드 설명 (역시나 슬라이드 2번을 재탕 중이네요) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘라줍니다. (주렁 ..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에도 슬라이드를 API 없이 코드를 입력하는 것 입니다. 이번에는 슬라이드가 연속적으로 자연스럽게 이동하는 것을 배웠습니다. (JAVASCRIPT, GSAP, JQUERY)를 활용했습니다. HTML+CSS코드 Javascript Slider Effect04 슬라이드 이팩트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (슬라이드 2번과 똑같은 HTML과 CSS라 설명이 중복이 됩니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 sli..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 이번 슬라이드도 API 없이 코드로 작성합니다. 이번거는 위로 이동하는 슬라이드 입니다. (1번과 2번을 활용해서 만들어보기 미션이었네요) HTML+CSS코드 Javascript Slider Effect02 슬라이드 이팩트 : 위로 움직이기 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (이번것은 2번을 활용하여서 HTML내용이 슬라이드 2번과 똑같습니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 ov..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 이번에도 API없이 코드로 만들어보는 슬라이드 유형입니다. 이번에는 absolute없이 사용하는 방법입니다. (JAVASCRIPT, GSAP, jQuery를 사용했습니다.) HTML+CSS코드 Javascript Slider Effect02 슬라이드 이팩트 : 좌로 움직이기 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (이번거가 특히 이해가 안가서 1시간 쳐보고 이해가 갔습니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 오늘은 슬라이드 만들기를 배웠습니다. API 없이 직접 코드로 짜는 연습을 먼저 했습니다. HTML + CSS 코드 Javascript Slider Effect01 슬라이드 이팩터 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (처음이라 슬라이드 배치 방법이 이해가 안가서 쳐보고 이해를 했습니다.) 1.div태그인 .slider__wrap은 전체적인 내용물들을 가운데로 배치해줍니다. (align-items는 안먹혀서 height값을 줬습니다.) 2.div태그 .slider__img는 .slider의 보여줄 만큼의 width를 주고 overflow를 줍니다. (여기에서는 이제 보여줄 width의 값만큼 지정해주고 ove..

오답 정리 1. 다음 중 디자인의 조건에 해당하지 않는 것은? ④ ① 합목적성 ② 심미성 ③ 경제성 ④ 유통성 2. 물리적인 빛이 우리의 눈에서 색채로 지각되어 범위의 파장 한계 내에 있는 스펙트럼을 의미하는 것은? ① ① 가시광선 ② 색청 ③ 색각 ④ 지각색 11. 색의 3속성에 포함되지 않는 것은? ③ ① 색상 ② 명도 ③ 대비 ④ 채도 12. 촉각적 질감에 대한 설명으로 틀린 것은? ① ① 촉각적 질감에는 장식적 질감, 자연적 질감, 기계적 질감 이 있다. ② 촉각적 질감은 눈으로 볼 수 있을 뿐 아니라 손으로 만 져서 느낄 수 있는 질감이다. ③ 촉각적 질감은 2차원 디자인의 표면과 함께 3차원의 양 각(relief)으로 확대하는 것이다. ④ 촉각적 질감의 연출방법에는 자연재료사용, 재료변형, 재..

오답 정리 1. 다음 중 디자인의 기본 요소들로 옳은 것은? ② ① 선, 색채, 공간, 수량 ② 점, 선, 면, 질감 ③ 시간, 수량, 구조, 공간 ④ 면, 구조, 공간, 수량 12. 다음 중 게슈탈트의 시각에 관한 법칙으로 볼 수 없는 것은? ④ ① 근접의 원리 ② 유사의 원리 ③ 연속의 원리 ④ 통일의 원리 13. 다음 디자인 형태 중에서 다른 성격을 지닌 것은 어느 것인가? ③ ① 추상적 형태 ② 기하학적 형태 ③ 유기적 형태 ④ 기능적 형태 17. 먼저 본 색의 영향으로 나중에 보는 색 이 다르게 보이는 현상은? ④ ① 동시대비 ② 면적대비 ③ 연변대비 ④ 계시대비 20. 오스트발트(Ostwald) 색상환은 무채색 축을 중심으로 몇 색 상이 배열되어 있는가? ④ ① 9 ② 10 ③ 11 ④ 24 ..

2015년 7월 오답노트 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? ① ①명도대비 ②색상대비 ③보색대비 ④채도대비 2.색의 주목성에 대한 설명으로 옳지 않은 것은? ④ ①명시도가 높으면 색의 주목성이 높다 ②채도 차이가 클수록 주목성이 높다 ③빨강은 초록보다 주목성이 높다 ④명도채와 채도가 낮은 색이 주목성이 높다 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? ① ①균형을 가장 많이 고려하여 구성해야 한다. ②부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. ③조형을 구성하는 모든 단위의 크기를 결정한다. ④객관적 질서와 과학적 근거를 명확하게 드러내는 구성 형식이다. 4. 색의 감정에서 저채도의 배색이 주는 느낌은? ① ①부드러운 느낌 ②명쾌한 느낌 ③화려..

(원본) 일러스트에서 펜툴 따기 일러스트를 활용해서 포트폴리오와 자기소개 페이지를 꾸미기 위해 일러스트에서 펜툴 도구에 대해 배웠습니다. (사용) 일러스트 펜툴 활용한 모습 포트폴리오에서 명함을 만들기 위해 연습한 결과입니다.

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 어제 완성된 코드에 3가지를 추가하라는 미션을 받았습니다. 1.문제를 맞추거나 틀렸으면 그것들을 표시해줄 것 2. 시간을 00:00으로 만들어 볼 것 3.input type="text"에 이름을 입력하면 "수험자"에 표시하기 1번 문제 : HTML코드+ JAVASCRIPT코드 맞춘개수 : 0 틀린개수 : 0 코드설명 1. em태그인 .cbt__score는 문제를 맞추면 갯수를 표시해줄겁니다. 2. em태그인 .cbt__wrong은 문제를 틀렸다면 틀린 갯수를 표시해줄겁니다. let wrong = 60; let hap = 0; if(numberAnswer == question.answer){ console.log("정답"); cbtselects[nu..

보충 작업 완성물 HTML 삽입 미리보기할 수 없는 소스 최종 완성된 사이트 어제가 지나고 화가 가라 앉으니간 어느정도 따라가기 시작하네요. HTML코드 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2011년 1회 웹디자인기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 59분 10초 답안지 제출하기 수험자 : 안교남 전체 문제수 : 0 남은 문제수 : 0 1 1 2 3 4 필기 시험 공부하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 200..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 오늘은 CBT퀴즈 만들기를 따라 만들었습니다. 초반에는 이해가 갔다가 마지막에 너무 헷갈렸습니다. HTML코드 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2011년 1회 웹디자인기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 59분 10초 답안지 제출하기 수험자 : 안교남 전체 문제수 : 60문항 남은 문제수 : 59문항 1 1 2 3 4 코드설명 1. div태그 .container은 내용물들을 가운데로 옮겨주고. 반응형을 위해서 특정 max-width에서 퍼센트(%)을 줍니다. 2. div태그 .cbt__header은 "시험 종목", "남은 시간", "답안지 제출하기"를 담고 있습니다. 3. div태그 .cbt__header안..

틀린 것 : 4, 7, 10, 14, 15, 16 1번. 다음의 결괏값을 작성하시오. let num = 0; while(false){ num++; if(num == 3){ continue; } if(num > 10){ break; } } console.log(num); 답 : 0 설명 : while문은 true일때 조건을 반복합니다. false일떄는 while문을 벗어납니다. 2번. 다음의 결괏값을 작성하시오. let a=6, b=9, c=3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); 답 : 20, 21 설명 : 선연산자와 후연산자 입니다. 선연산자는 먼저 값이 적용되지만 후연산자는 1번 더 호출이 되어야 적용됩..

1번 문제. 이미지 위에 마우스 포인터를 올려 놓으면 다른 이미지로 변하고. 마우스가 밖으로 이동하면 원래의 이미지가 돌아옵니다. (자바스크립트는 mouseover와 mouseout을 사용해야합니다.) 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 HTML+CSS코드 코드 설명 1. div태그 .img1을 만듭니다.(여기는 재가 좋아하는 교촌치킨 윙봉 사진이 들어갑니다.) 2. div태그 .img2을 만듭니다.(여기도 재가 좋아하는 교촌치킨 닭다리만 사진이 들어갑니다.) 3. CSS에서는 .img1에다가 background-image로 이미지를 불러오고 width값과 height값을 줍니다. 4. .img2에다가 똑같이 background-image로 이미지를 불러오고 width값과 height값을..

1.원시 유형과 객체 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열로 예를 들겠습니다. let str = "hello" str.length; //5 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데 이런 객체를 "래퍼 객체"라고 부릅니다. 2.문자열의 길이 : length 프로퍼티 ● 문자열.length 문자열의 길이를 찾을 때는 배열에서처럼 length프로퍼티를 사용합니다. let str = "Good morning!"; let greeting = "안녕하세요?"; str.length; //14 greeting.length; //6 3.문자열에서 문자의 위..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 링크 이번에는 여태까지 배웠던 header, section, slide, footer을 쪼개서 만들고 리액트를 배우기 전에 이것들을 하나하나 합치는 작업을 했습니다. 처음으로 복붙해서 CSS를 만들다보니 공통 요소의 중복된 이름 때문에 문제가 있었는데 해결했네요. 으으으으..... HTML코드 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 pizza 소개 훈련방법 교육방법 주의할점 공지사항 연락처 로그인 슬라이드 영역 event 야채, 과일, 고기의 좋은 점 영양가가 높다. 야채는 비타민, 미네랄..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번 퀴즈 사이트는 "다음 문제" 버튼을 누르면 정답체크와 다음 문제가 나오는 형태입니다. HTML코드 Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 6 정답입니다. 틀렸습니다. 다음 문제 맞춘개수 0개 / 총 : 0점 현재 : 1번 mailto:skadldldl123@gmail.com 코드 설명 1. div태그 중 .quiz__wrap은 "시험 종류", "시험 문제", "문제 내용", "버튼" 전부다 가지는 div태그 입니다. 2. div태그 중 .quiz__title은 "시험종류"와 "시험회차"를 가지고 있습니다. 3. div태그 중 .quiz__question은 "시험 번호"와 "시험 문제"를 가지고 있습니다. ..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 올렸던 CSS 애니메이션이 궁금해서 공부했습니다. HTML코드 div태그 6개를 만듭니다. 애니메이션에 들어가는 꽃잎 6개 입니다. CSS코드 body { background-color: #000; display: flex; align-items: center; justify-content: center; height: 100vh; } .watch__face { animation: spring 3s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite; width: 125px; height: 125px; } .circle { width: 125px; height: 125px; border-radius: 50%..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번에는 html에 쓰던 코드를 자바스크립트로 작성하는 것을 배웠습니다. 그리고 퀴즈를 활용하는 것도 같이 배웠습니다. JAVASCRIPT코드 코드 설명 1. const quizInfo에는 "시험 종류", "회차", "문제 번호", "문제", "문제 내용", "문제 답", "문제 설명"이 들어갑니다. 2. const quizWrap은 .quiz__wrap의 클래스를 찾습니다. 3. const exam = []; quizInfo.forEach((question, number) => { // 탬플럿 리터럴 방식 exam.push( ` ${question.infoType} ${question.infoTime} ${number + 1}..

HTML 삽입 미리보기할 수 없는 소스

3월 24일 틀린 것 1번, 6번, 7번 ,11번, 13번, 14번, 15번, 17번 시험 내용 1. 결괏값을 작성하시오 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 2. 다음의 결괏값을 보고 빈칸을 채우시오. function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다...

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번에 배운 것은 css 명령어들을 213개 저장시켜 놓고 이것들을 찾는 것을 만들었습니다. HTML코드 1 2 3 4 5 자바스크립트 자바스크립트 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지..

footer type 완성본 HTML 삽입 미리보기할 수 없는 소스 footer type 사이트 주소 사이트를 보다보면 맨밑에 회사 주소?와 회사 소개 등이 써져있는 부분을 제작해 보았습니다. HTML코드 푸터 음식 소개 음식 종류 음식 재료 음식 만들기 음식 추가 음식 구매 온라인 구매 오프라인 구매 밀키트 구매 음식 재료 판매처 원산지 유통 기한 인사말 CEO 소개글 인사말 추가 소개 건강식품 효능 면역력 건강증진 고객센터 전화 문의 온라인 문의 이메일 문의 2023 피그마로 만들어본 사이트 Portfollo is Power All Right Reserved 코드 설명 1. footer태그의 #footer__wrap은 "메뉴"와 "맨밑에 소개글"을 담고 있습니다. 2. div태그 중 .containe..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 완성 사이트 주소 코드

마우스 효과 3번째 완성 HTML 삽입 미리보기할 수 없는 소스 마우스 효과 3번째 완성 주소 이번 3번째 효과는 뒤에 배경 이미지가 1개 있습니다. 그리고 div태그로 width값, height값을 주고 background-image로 1개 넣었습니다. 그리고 fixed로 고정을 시켜놓고 마우스를 움직일때마다 배경의 이미지가 나오게 했습니다. HTML코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 The most important thing in life is not how it ends, but how it starts. 인생에서 가장 중요한 것은 그것이 어떻게 끝나느냐가 아니라, 어떻게 시작하는가이다 mailto:skadldldl123@gma..