june blog

완성된 화면 입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 music player 노래 제목 노래 작가 0:00 3:55 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. css 코드입니다. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap'); .music_inner { width: 350px; /* background: rgba(0,0,0,0.5); */ filter: blur(0.3); backdrop-filter: blur(20px); position: absolute; left: 50%..

게시판 웹디자이너, 웹퍼블리셔,프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요. * 총 1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 동록일 조회수

완성된 화면입니다. html 코드 화면입니다. 게시글 수정하기 웹디자이너, 웹퍼블리셔,프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요. 게시글 수정하기

완성된 화면 입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. css 코드입니다. * { cursor: none; } body { width: 100%; height: 100vh; overflow: hidden; } .cursor { width: 20px; position: absolute; left: 0; top: 0; z-index: 1000; pointer-events: none; user-select: none; cursor: none; } #header { position: fixed; left: 0; top: 0; background-c..

시안 싸이트 입니다. 참조 사이트 아이허브 : https://iherbkr.com/ 오플닷컴 : https://www.ople.com/mall5/ 필리 :https://pilly.kr/ 비타민샵 :https://vitaminshop.co.kr/ GNC : https://www.gnc.com/ 필라이즈 :https://www.pillyze.com/ 닥터피앤티 :https://www.pntmall.com/ 만개의레시피 :https://www.10000recipe.com/ 82cook :https://www.82cook.com/ 램프쿡 :http://www.lampcook.com/ 레시피뱅크 :https://www.recipebank.co.kr/ 오키친 : https://ottogi.okitchen.co.kr..

at() ES2021에서 도입된 문자열 메서드 중 하나입니다. 이 메서드는 문자열에서 특정 인덱스의 문자를 반환합니다. charAt()과 비슷하지만, at()은 유니코드 코드 포인트의 인덱스를 사용한다는 점에서 다릅니다. 반환할 문자의 위치를 나타내는 0부터 시작하는 정수 값입니다. 만약 인덱스가 문자열 길이를 벗어난 경우, undefined를 반환합니다. 구문 at(index) 예시 const str = 'Hello, world!'; console.log(str.at(1)); // 출력 결과: "e" console.log(str.at(2)); // 출력 결과: "l" console.log(str.at(3)); // 출력 결과: "l" console.log(str.at(4)); // 출력 결과: "o" ..

완성된 화면입니다. html 코드 화면입니다. 헤더 영역 바로가기 헤더 영역 바로가기 헤더 영역 바로가기 메인으로 Developer Blog 회원가입 회원가입 로그인 게시판 블로그 게시판 웹디자이너, 웹퍼블리셔,프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요. *총1111건의 게시물이 등록되어 있습니다. 제목 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수 10 게시판 제목 영역입니다. 아직 제목이 없어요! 전윤기 2023-04-21 100 9 게시판 제목 영역입니다. 아직 제목이 없어요! 전윤기 2023-04-22 100 8 게시판 제목 영역입니다. 아직 제목이 없어요! 전윤기 2023-04-20 100 7 게시판 제목 영역입니다. 아직 제목이 없어요! 전윤기 2023-0..

01. SQL문의 빈칸을 완성하시오. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문의 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; 02. SQL문의 빈칸을 완성하시오. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG 03. SQL문의 빈칸을 완성하시오. [성적] 테이블에서 점수가 90점 이상 95점 이하인 '컴퓨터공학과' 학생의 정보를 검색한 SQL문을 작성하시오. SELECT * FROM 성적 WHERE (점수 _____ 90 _____ 95) AND 학과 = '컴퓨터공학과'; 04. SQL문의 빈칸을 완성하시오. [성적] 테이..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 03. 다음의 결괏값을 작성하시오. { function func(begin, diff, n)..

완성된 화면 입니다. HTML 화면입니다. hello javascript,react,php 남은시간 잘보내서 행복하게 삽니다. 그럼이만 skrollr.js의 양식을 이용해서 작성해주었습니다. data-0은 스크롤이 0일때 의 효과를 주는 코드입니다. 이런식으로 각각 주어서 노다가 방식으로 css효과를 주었습니다. css 코드입니다. * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Cookie"; } body { /* height: 20000px; */ background-color: #E0E4DD; } .scrollTop { position: fixed; left: 10px; top: 10px; z-index: 1000; width: 4..

회원가입 페이지 입니다. 회원가입 소스 입니다. join.php입니다. 회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다. 회원가입 회원가입 영역 이메일 이름 비밀번호 비밀번호 확인 연락처 회원가입 완료 보시면 link부분은 먼저 따로 lnclude 파일에 head.php에 넣어 주었습니다. 그후include를 시켜 불러왔습니다. 그리고 skip,header부분도 각 각 php 파일을 만들어 include 시켰습니다. 그리고 from에 액션에 joinsave.php를 넣어서 회원가입 완료를 누르면 joinsave.php로 이동되게 했습니다. joinsave.php입니다. 화면입니다. 소스코드입니다.

완성된 화면 입니다. HTML 화면입니다. Javascript parallax Effect01 패럴랙스 이펙트 - 메뉴 효과 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 결과도 중요하지만, 고정을 더 중요하게 생각한다. 02 Section2 산다는것 그것은 치열한 전투이다. 03 Section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 Section4 고통이 남기고 간 뒤를 보라! 고난이 지나면 반드시 기쁨이 스며든다. 05 Section5 행복한 삶을 살기위해 필요한 것은 거의 없다. 06 Section6 좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다 07 Section7 평생 살 것처럼 꿈을 꾸어라.그리..

문제입니다. 명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을 author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요. 길라잡이 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다. 완성화면 입니다. HTML 코드입니다. HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const num = document.querySelector(".num"); const quote = document.querySelector(".quote"); const author = document.querySelector(".author"); cons..

문제입니다. 자바스크립트에서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋을 이용할 것이고 숫자는 1부터 45까지 범위안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을떄 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요. See the Pen Untitled by ture403 (@ture403) on CodePen. 완성화면 입니다. HTML 코드입니다. 로또 번호 생성기 클릭 HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const result = document.querySelector('#result'); const button = document.querySelector..

문제입니다. 명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을 author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요. 길라잡이 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다. See the Pen 숙제 by ture403 (@ture403) on CodePen. 완성화면 입니다. HTML 코드입니다. HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const num = document.querySelector(".num"); const quote = document.querySelector(".quote"); const..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect07 슬라이드 이펙트 - 썸네일 슬라이드(버튼,썸네일) 1 2 3 4 5 6 7 prev next ture403@gmail.com css 코드입니다. /* silder_wrap */ .slider_wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px rgba(0,0,0,0.4); } .slider_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .sl..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect06 슬라이드 이펙트 - 이미지 슬라이드(버튼,닷메뉴) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect04 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ width: 800px; height:..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect04 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex-w..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect03 슬라이드 이펙트 - 상하 움직이기 1 2 3 4 5 6 ture403@gmail.com css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ width: 800..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect02 슬라이드 이펙트 - 좌로 움직이기 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 500px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex-wrap: wr..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect01 슬라이드 이펙트 - 트랜지션 효과 1 2 3 4 5 6 ture403@gmail.com css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider_img { position: relative; width: 800px; height: 450px; overflow: hidden; } .slider { position: absolute; left: 0; top: 0; transition: all 0.3s; } .slider::..

10. 다음 중 동화현상에 대한 설명으로 틀린 것은? ① 색들끼리 서로 영향을 주어서 인접색에 가까운 것으로 느껴지는 현상을 말한다. ❷ 색 자체가 명도나 채도가 높아서 시각적으로 빨리 눈에 띠는 성질을 말한다. ③ 동화현상에는 명도의 동화, 채도의 동화, 색상의 동화가 있다. ④ 동화현상은 눈의 양성적 또는 긍정적 잔상과의 관련으로서 설명된다. 2번 시각적으로 눈에 잘 띄는 성질은 주목성이나 명시성으로 볼 수 있고 고명도 고채도 난색 종류가 그에 해당한다. 15. 검은 종이 위에 노랑과 파랑을 나열하고 일정한 거리에서 보면 노랑이 파랑보다 더 가깝게 보인다. 이때의 노랑색을 무엇이라 하는가? ① 후퇴색 ② 팽창색 ❸ 진출색 ④ 수축색 노란색 같은 난색계열은 진출색, 파란색 같은 한색계열은 후퇴색입니다...

9. 가시광선에 대한 설명으로 틀린 것은? ① 빛의 파장 중 380nm에서 780nm 사이의 범위로 눈으로 지각되는 영역을 말한다. ② 백색광이 프리즘을 통해 나타나는 색띠를 말한다. ❸ 라디오나 텔레비전, 휴대폰의 파장범위를 포함 한다. ④ 전자기파 스펙트럼이라고도 한다. 라디오, 텔레비전, 휴대폰의 파장범위는 가시광선이 아니라 적외선이다. 15. 물체의 표면이 가지고 있는 특징의 차이를 시각과 촉각을 통하여 느낄 수 있는 성질을 의미하는 것은? ① 색감 ② 항상성 ③ 고유성 ❹ 재질감 1. 색이 망막을 자극함으로써 느끼게 되는 심리적인 감정. 2. 고유의 상태를 유지하려는 성질. 3. 어떤 물체가 가지고 있는 고유한 성질이나 속성. 35. 정보 검색 연산자의 설명으로 옳은 것은? ❶ OR : 연산자 ..

4. 디자인 형태의 개념에 조화(harmony)를 이루는 법칙과 거리가 먼 것은? ① 균형 ② 대비 ③ 통일 ❹ 색상 균형, 대비, 통일, 유사, 균일, 강약, 변화 [해설작성자 : 도전] 5. NICS 표색계에 대한 설명으로 옳은 것은? ❶ 색상환은 노랑(Y), 빨강(R), 파랑(B), 초록(G)으로 구분되어 있다. ② 기본 6색 중 흰색과 검정은 포함되지 않는다. ③ 20% 흰색도와 30%의 유채색도를 표시하고 90%는 노랑색도를 지닌 백색이다. ④ 색자각 양의 합은 100 이며, 이것은 명도, 채도, 색상의 합이다. 4) 오스트발트 표색계와 관련된 내용 10. 빛이 눈의 망막 위에서 해석되는 과정에서 혼색효과가 가져다주는 가법혼색으로 점표파 화가들이 많이 사용 하였고, 디더링의 혼색원리이기도 한 혼..

무슨 수업시간에도 못끝내는 수준의 노가다.... 지지

완성된화면입니다. HTML 코드입니다. Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 60분 00초 수험자 : 황상연 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 도전하기 정보처리기능사 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회 정보처리기..

완성된화면입니다. HTML 코드입니다. Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 전체 문제수 : 60문항 남은 문제수 : 59문항 기능사 도전하기 정보처리기능사 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회 정보처리기능사 20..

완성된 화면입니다. HTML 코드입니다. Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 홍길동 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 주석친 부분은 스크립트로 불러와서 문제를 입력할 부분 입니다. JS 코드입니다. const cbt = document.querySelectorAll(".cbt"); const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr"); const cbtSubmit = document.querySelector(".cbt__submit"); const ScoreEm..

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