공부블로그

포트폴리오 메인페이지 만들어보기 (GSAP, split) GSAP 라이브러리를 이용한 메인 페이지 일부분을 만들어봤습니다. VSCode KDH PORTFOLIO work about let's introduce frontend developer's all works of portfolio https://ehcjswo.github.io/web2023/ 헤더 영역에서는 position 속성으로 fixed를 사용하여 스크롤을 내려도 항상 상단에 위치하도록 설정하고 있습니다. 그리고 display 속성으로 flex를 설정하여 요소들을 수평 방향으로 배치하고 있습니다. 메인 영역에서는 display 속성으로 flex를 설정하여 요소들을 수평, 수직 방향으로 배치하고 있습니다. 그리고 .text__inner 클래스와..

게임 이펙트 만들기! ( 2 ) (jquery,gsap, 뮤직플레이어, 리스트) 뮤직 플레이어를 만들어 재생, 정지, 반복, 음악 리스트 버튼의 기능을 만들었습니다. VSCode GAME WORLD 현재 날짜, 시간출력 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 Music 노래 제목 노래 작가 이름 0:00 3:55 Music List 현재 OS정보 출력 이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다. 페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다. 뮤직 플..

코딩테스트 연습 - 등차수열의 특정한 항만 더하기 문제 예시 정수 a 와 b가 주어집니다. a는 첫째항, d는 공차 입니다. 그리고 included란 배열이 주어지는데 배열안엔 "true" 와 "false" 가 무작위로 섞여있습니다. 이 배열의 요소가 "true"일때 해당하는 인덱스값의 항을 구하면 됩니다. 쉬운 문제 인거 같습니다! included = [true, false, false, true, true]; let a = 3; let d = 4; //3 7 11 15 19문제가 이렇게 주어졌다면 우리는 첫째항이 3인, 공차가 4인 항을 배열의 수만큼인 5개만큼 나열해야 합니다. 그렇다면 항은 3 7 11 15 19 이렇게 나오므로 "ture" 자리인 3, 15 , 19 를 더하여 답은 37이 됩니다..

MYSQL PHP 게시판 사이트 검색 기능 만들기! 검색 기능을 추가 했습니다. [ 검색 결과가 잘 나오는 모습 입니다. ] [ 검색 결과가 없을시 나오는 화면입니다. ] [ 빈 칸을 검색했을시 모습입니다. ] VSCode

웹디자인 기능사 실기 메뉴, 슬라이드 유형! 웹디자인 기능사 실기 A~E 유형의 메뉴와 슬라이드를 만들어봤습니다. 단일메뉴, 전체메뉴 로고 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 하단메뉴 COPYRIGHT document.querySelectorAll(".nav > ul > li")을 사용하여 HTML 문서 내에서 클래스가 "nav"인 요소의 자식 중에서 ul 태그를 가지고 있고, 그 자식 요소 중에서 li 태그인 모든 요소를 찾아옵니다...

웹디자인 기능사 실기 유형별 레이아웃 정리! 웹디자인 기능사 실기 A~E 유형별로 레이아웃을 만들어봤습니다. 웹디자인 기능사 실기 A유형 1번 레이아웃 로고 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 COPYRIGHT SNS 웹디자인 기능사 실기 B유형 1번 레이아웃 로고 이미지 슬라이드 공지사항 배너 바로가기 로고 하단메뉴 COPYRIGHT 웹디자인 기능사 실기 C유형 1번 레이아웃 로고 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 하단메뉴 COPYRIGHT 웹디자인 기능사 실기 D유형 1번 레이아웃 LOGO LOGO SNS 웹디자인 기능사 실기 E유형 1번 레이아웃 LOGO 배너 공지사항 갤러리 링크 이미지 슬라이드 LOGO 하단메뉴 COPYRIGHT 웹디자인 기능사 실기 유형별 메뉴..

정보처리기능사 대비 오답노트 01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. HTTP, TCP, UDP, FTP, ICMP, IP, ATM, TELNET 더보기 iICMP, IP 02. 다음이 설명하는 용어를 작성하시오. 이것은 네트워로 연결된 두 호스트 사이에서 연결할 수 있는지 점검하는 진단도구이다. 이 명령을 실행하면 ICMP Echo 반향 패킷을 이용하여 원격 IP 주소에 송신하고 ICMP 응답을 기다린다. 더보기 PING 03. 다음이 설명하는 용어를 작성하시오. Window 10의 pro 버전에서 지원하는 기능으로 128bit 키의 CBC 모드에서 AES 암호화 알고리즘을 이용하여 이동식 디스크와 시스템 드라이브 암호화를 지원한다. 더보기 비트로커 04. ..

자바스크립트 정보처리 대비 테스트 ( 9 ) 오답노트 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 더보기 결과: 190 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); } 더보기 정답 : ..

게임 이펙트 만들기! (뮤직 플레이 기능) 작은 음악 재생기를 만들어 봤습니다! script const allMusic = [ { name : "1. Here it Comes", artist : "TrackTribe", img : "musicView01", audio : "music_audio01" },{ name : "2. Here it Comes", artist : "TrackTribe", img : "musicView02", audio : "music_audio02" },{ name : "3. Here it Comes", artist : "TrackTribe", img : "musicView03", audio : "music_audio03" },{ name : "4. Here it Comes", a..

MYSQL PHP 게시판 사이트 페이지 넘어가게 만들기 게시글 데이터수에 따라 페이지 수를 조절하고 누르면 이동할 수 있게 작동이 되게끔 만들었습니다. [ 게시판 html 입니다. 작동이 되지 않는 껍다구 입니다. ] 게시판 php하단 페이지버튼 입니다. 페이지 수에서 +-5 페이지까지만 출력이 되고 처음 페이지에선 [처음으로], [이전] 버튼이 사라지고. 마지막 페이지에선 [다음], [마지막으로] 버튼이 사라지게 됩니다. 또한 게시글이 없을 경우 버튼이 싹 다 사라지게됩니다. php 게시판 웹 디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 개시판입니다. 관련된 사항은 여기서 확인하세요! * 총 1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자..

MYSQL PHP 게시판 사이트 만들기 게시판에서 게시판, 글보기, 글쓰기, 글삭제, 글수정이 가능한 사이트를 만들어 보겠습니다. [ 게시판 html 입니다. ] php 글쓰기를 누르면 글쓰기 php로 이동합니다. 글과 내용을 적고 저장하기를 누르면 boardWriteSave.php로 이동합니다. boardWriteSave.php

게임 이펙트 만들기! (jquery, 드래그 이벤트) jquery를 이용한 드래그 이벤트 입니다. VSCode GAME WORLD 현재 날짜, 시간출력 asdf 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 OS정보 출력 이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다. 페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다. script //폴더 드래그, 헤더색 바꾸기 $(".icon1").draggable({ //특정 범위 안에서 드래그로 못빠져나가게 하기 con..

사이트 제작 - 메인 페이지 시안 짜집기 사이트 메인 시안 작업을 했습니다. 팀 프로젝트 오픈런 대행사 사이트를 만들기 입니다. 제 기준으로 사이트를 트렌디 하면서 심플하게 만들려고 노력했고, 생각한거 만큼 쉽지 않았습니다. 각종 유명한 브랜드 사이트, 쇼핑몰 사이트를 살펴 보았고 '나중에 필요 할 수 있겠다.' 싶은 사이트들을 저장해놨으며 더 추려서 피그마에 따로 정리했습니다. Figma [ 여러 사이트를 부분 짜집기 한 시안입니다. ] 쓸만한 사이트 주소 찾아본 사이트 중에 쓸만한 사이트 주소를 저장하고, Figma에 추리기 더 추려서 피그마에 따로 풀페이지로 캡쳐를 떴습니다. 헤더, 슬라이더, 이미지, 텍스쳐, 푸터 유형을 마음에 드는것들을 골라 짜집기 했습니다. 헤더 유형 https://www.s..

자바스크립트 문자열 메서드에 대해 알아봅시다! at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 01. at( ) "문자열".at(검색값) 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. 대소문자를 구별을 안합니다. { "javascript reference".at(0); //j "javascript reference".at(1); //a "javascript reference".at(2); //v "javascript reference".at(-1); //e "javascript reference".at..

자바스크립트 테스트 ( 7 ) 오답노트 정보처리기사, 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) } 정답: 129 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,..

패럴랙스 Skrollr 라이브러리를 이용하여 사이트 만들기! 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다. [ Skrollr 를 이용하여 만든 사이트 입니다. ] Skrollr란? Skrollr는 웹 개발에서 사용되는 JavaScript 라이브러리 중 하나입니다. 이 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다. 스크롤에 따라 요소들의 위치, 크기, 회전, 투명도 등을 변경하거나 CSS 클래스를 추가/제거하여 요소의 스타일을 변경할 수 있습니다. 이를 통해 사용자에게 더욱 동적이고 인터랙티브한 경험을 제공할 수 있습니다. Skrollr는 다양한 브라우저와 기기에서 호환되며, 다양한 프레임워크와 라이브러..

MYSQL PHP html연동해서 회원가입, 로그인 사이트 만들기 html과 php를 연동하여 회원가입, 로그인 하는 사이트를 만들어 보겠습니다. 우선 인덱스 화면 입니다. 이 사이트의 목적은 회원가입을 데이터베이스를 관리할 수 있고 로그인을 할 수 있는 사이트를 만드는 것입니다. 메인화면을 보겠습니다. 큰 제목아래 회원가입, 로그인, 게시판, 블로그 목록들이 있습니다. 회원가입을 하기전 데이터베이스와 테이블을 만드셔야합니다. 그 전에 웹페이지와 연동할 수 있는 php를 만들어 주겠습니다. //connect.php 그 다음 위에 connect.php에서 db를 phpcalss라고 써놨으니 phpclass란 데이터 베이스가 필요합니다. 콘솔창에서 하나 만들어 줍니다. 그 후 테..

패럴랙스 (parallax) 이펙트 ( 1 ) pageYOffset,scrollY,scrollTop 패럴랙스 이펙트를 이용해 사이트 스크롤에 효과를 줬습니다. VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 S..

자바스크립트 문제 풀기 (JSON,fetch,location.reload()) 명언, 배경화면 랜덤으로 출력하기 명언과 배경화면을 랜덤으로 불러와 출력해보겠습니다. 명언과 배경화면을 랜덤으로 표시해 보세요. 무작위 수를 사용해 명언과 배경화면을 가져온 후 에 표시합니다. click HTML 에서 "say", "name", "button" 클래스를 가진 요소들을 JavaScript에서 선택합니다~ random 변수에 0부터 30까지의 랜덤한 정수를 저장합니다! fetch() 함수를 사용해서 "dummy01.json" 파일을 읽어옵니다. .then() 메소드를 사용해서 응답(Response) 데이터를 JSON 변환합니다. 변환된 JSON 객체에서는 "quotes" 배열에 명언 데이터가 저장되어 있습니다. 이..

자바스크립트 문제 풀기 (set(),펼침연산자,forEach) 로또 번호만들기 set() 함수를 이용하여 로또 번호 랜덤만들기를 해봤습니다. 문제 1 자바스크립트를 사용해서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하세요. 번호는 중복되면 안되므로 Set() 함수를 이용 하고, 숫자는 1~45 범위안, 6개의 숫자를 무작위 추출 로또 번호 생성기 생성 document.querySelectorAll(".num")은 HTML 문서 내에 클래스 이름이 "num"인 모든 요소를 선택합니다. 이렇게 선택된 요소들은 num이라는 이름으로 배열 형태로 저장됩니다. document.querySelector("#wrap button")은 HTML 문서 내에 id가 "wrap"인 요소 내에서 button 요소를 선..

자바스크립트 문제 풀기 (JSON,fetch) 명언json에서 랜덤으로 배경화면과 명언 랜덤 출력하기 json 에서 데이터와 배경사진을 랜덤으로 불러와 출력해보겠습니다. 1번 문제 JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요. 가져온 데이터가 어떤 구조로 이루어져 있는지 살펴보는 것이 목표입니다. fetch("json/dummy01.json") .then((res)=> res.json()) .then((obj) => { console.log(obj); }); json 데이터를 콘솔창에 띄운 모습입니다. 2번 문제 JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요. 무작위 수를 사용해 명언을 가져온 후 명언과 말한 사람을 나눠서 화면에 표시합니다. click HTML 에..

슬라이드 이펙트 사용해보기 ( 7 ) 버튼, 썸네일 만들기 슬라이드 이펙트를 버튼이나 썸네일을 누르면 이동하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이스(버튼, 썸네일 만들기) 1 2 3 4 5 6 7 prev next ehcjswo1@gmail.com 이 코드는 자바스크립트를 사용하여 이미지 슬라이더를 만드는 코드입니다. 슬라이더는 주어진 영역 안에서 이미지를 보여주고, 다음/이전 버튼을 클릭하거나 썸네일을 클릭하여 이미지를 전환할 수 있습니다. .slider__wrap: 슬라이더 영역을 감싸는 가장 바깥 div입니다. position: absolute와 transform 속성을 사용하여 중앙 정렬을 합니다. .slide..

슬라이드 이펙트 사용해보기 ( 6 ) 버튼,닷 슬라이드 슬라이드 이펙트를 버튼이나 닷을 누르면 이동하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect03 슬라이드 이펙트 : 이미지 슬라이스(버튼, 닷 만들기) 1 2 3 4 5 6 7 prev next 화면 밑에 누를 수 있고 현재 화면을 표시하는 닷(dot) 을 만들었습니다. slider__dot 이라는 클래스를 만들었고 이미지 갯수만큼 닷 갯수를 만들기 위해 스크립트 안에서 dot을 만듭니다. function init(){ //이미지 갯수만큼 닷 메뉴 생성 slider.forEach(() =>dotIndex += "이미지"); sliderDot.innerHTML = dotIndex; //첫번째 닷 메뉴한테 활성화..

슬라이드 이펙트 사용해보기 ( 5 ) 하 슬라이드 연속성 GSAP, jQuery 슬라이드 이펙트를 이용해 사진이 하로 무한 슬라이드 하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect05 슬라이드 이펙트 : 하로 움직이지(연속적) 1 2 3 4 5 6 ehcjswo1@gmail.com 이미지 크기값이 바뀔 수 있으니 sliderHeight 라는 변수를 만들었습니다. slider[0].offsetHeight : slider[0]의 height값을 가져 옵니다. 슬라이드를 끊기지 않고 돌려야 하기 때문에 첫사진을 맨 뒷사진 다음에 나오게 하기 위해 sliderClone 변수를 만들었습니다. sliderInner.firstElementChild.cloneNode(true..

슬라이드 이펙트 사용해보기 ( 4 ) 좌 슬라이드 연속성 GSAP, jQuery 슬라이드 이펙트를 이용해 사진이 좌로 무한 슬라이드 하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이지(연속적) 1 2 3 4 5 6 ehcjswo1@gmail.com 이미지 크기값이 바뀔 수 있으니 sliderWidth 라는 변수를 만들었습니다. slider[0].offsetWidth : slider[0]의 width값을 가져 옵니다. 슬라이드를 끊기지 않고 돌려야 하기 때문에 첫사진을 맨 뒷사진 다음에 나오게 하기 위해 sliderClone 변수를 만들었습니다. sliderInner.firstElementChild.cloneNode(true): ..

슬라이드 이펙트 사용해보기 ( 3 ) 상하 슬라이드 슬라이드 이펙트를 이용해 사진이 상하로 슬라이드 하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect03 슬라이드 이펙트3 1 2 3 4 5 ehcjswo1@gmail.com 슬라이드 영역이 상하로 바뀌기 때문에 .slider__inner 클래스의 width값과 height 값이 달라졌습니다. 또 상하로 움직여야 하기 때문에 .slider__inner 클래스에 display를 없앴습니다. javascript setInterval() 함수는 일정한 간격으로 함수를 반복 실행하는 함수입니다. 이 코드에서는 sliderInterval 변수에 저장된 시간 간격으로 currentIndex와 sliderInner 요소를 조작하..

슬라이드 이펙트 사용해보기 ( 2 ) 좌우 슬라이드 슬라이드 이펙트를 이용해 사진이 좌우로 움직이는 사이트를 만들어 보겠습니다. SliderEffect02 Javascript Slider Effect02 슬라이드 이펙트2 1 2 3 4 5 ehcjswo1@gmail.com 코드 상단에서 GSAP( GreenSock Animation Platform) 라이브러리를 로드합니다. 이 라이브러리는 웹 애니메이션을 제작하는 데 사용되며, 매끄러운 애니메이션을 만들기 위해 사용됩니다. 그리고 setInterval() 함수를 사용하여 일정한 간격으로 이미지 슬라이더를 이동시키는 기능을 구현합니다. 이전 코드와 마찬가지로 currentIndex 변수는 현재 슬라이드의 인덱스를 저장하고, sliderCount 변수는 총..

슬라이드 이펙트 사용해보기 ( 1 ) 슬라이드 이펙트를 이용해 사진이 바뀌는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 ehcjswo1@gmail.com 이 코드는 겹쳐진 여러 사진을 순서대로 보여주는 코드입니다. setInterval 함수를 이용하여 처음 사진을 보여주고 시간이 지나면 처음사진을 opacity = "0"; 을 해주어 투명하게 만들어 안보이게 만든뒤, 그 다음 보여질 사진을 opacity = "1"; 처리 해줘서 다음 사진이 보이게 만들어 줍니다. .slider:nth-child(1) {z-index: 5;} .slider:nth-child(2) {z-index: 4;} .slider:nth-child(3) ..

웹디자인 기능사 필기 오답노트! 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? 1. 명도대비 2. 색상대비 3. 보색대비 4. 채도대비 정답 : [1] 정답률 : 57% 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. ex) 흰바탕에 회색 점/검은바탕에 회색 점 동시대비 중 가장 예민하게 작용함. 색의 3속성은 색상, 명도, 채도이다. 3속성 중 고르라고 하였으니 일단 3번 보색대비는 제외해야 한다. 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? 1. 균형을 가장 많이 고려하여 구성해야 한다. 2. 부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. 3. 조형을 구성하는 모든 단..

2011년 2회 정보처리기능사 필기 기출문제 오답노트 오답노트 입니다. 11. 연관 기억장치의 구성요소에 해당하지 않는 것은? 1. 검색 자료 레지스터 2. 마스크 레지스터 3. 일치 지시기 4. 인덱스 레지스터 정답 : [4] 정답률 : 44% 인덱스 레지스터는 기본 레지스터로 기준이 되는 값과 주소를 더하거나 빼서 자료의 위치를 찾는 것을 말함 12. 다음과 같은 계산에 의해 주소를 지정하는 방식은? 1. 색인 주소 지정 2. 상대 주소 지정 3. 베이스 주소 지정 4. 절대 주소 지정 정답 : [2] 정답률 : 57% 프로그램 카운터 다음에 수행할(명령레지스터로 가져올)명령어가 있는 번지를 기억 20. 주소 부분에 있는 값이 실제 데이터가 있는 실제 기억 장치 내의 주소를 나타내며 단순한 변수 등을..