Winnie The Pooh Bear '분류 전체보기' 카테고리의 글 목록 (2 Page)
반응형

분류 전체보기 137

자바스크립트 패럴랙스 리빌 효과

자바스크립트 패럴랙스 리빌 효과 💜 parallax Effect07 코드 보기 / 완성 화면 01 Section1 네가 믿을 수 있다면, 넌 이미 반 이긴 것이다. 02 Section2 성공의 비결은 시작하는 것이다. 03 Section3 불가능은 무엇인가? 단지 미래의 가능성을 아직 발견하지 못한 것일 뿐이다. 04 Section4 계획이 없다면 실패를 계획한 것이다. 05 Section5 내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라. 06 Section6 기회는 문을 두드리지 않는다. 우리가 문을 열어야 한다. 07 Section7 성공은 무엇보다 인내와 노력을 요구한다. 08 Section8 어려움은 성장의 씨앗이다. 09 Section9 가장 큰 모험은, 우리가 꿈꾸는 세상을 만들기 ..

코딩테스트 연습문제 풀어보기_사칙연산

코딩테스트 연습문제 풀어보기_사칙연산 1.두 수의 합 문제설명 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. 제한사항 -50,000 ≤ num1 ≤ 50,000 -50,000 ≤ num2 ≤ 50,000 입출력 예 num1 num2 result 2 3 5 100 2 102 입출력 예 설명 num1이 2이고 num2가 3이므로 2 + 3 = 5를 return합니다. num1이 100이고 num2가 2이므로 100 + 2 = 102를 return합니다. 문제풀이 function solution(num1, num2) { var answer = num1+num2; return answer; } 2. 두 수의 차 문제 설명 정수 num1과..

코딩테스트 2023.05.16

자바스크립트 패럴랙스 효과 03_숨김메뉴, 탑버튼

자바스크립트 패럴랙스 효과 03_숨김메뉴, 탑버튼 💜 parallax Effect03 코드 보기 / 완성 화면 이번 패럴랙스 효과는 스크롤했을 때 사라지는 메뉴바와 아래로 다 스크롤 했을 때 나타나는 탑버튼입니다. HTML Top 클릭하면 화면 상단의 header부분으로 넘어갈 수 있게 Top버튼을 만들어줍니다. script window.addEventListener("scroll", () => { let scrollTop = window.pageXOffset || window.scrollY; if (scrollTop > document.body.scrollHeight - 1000) { document.querySelector(".parallax__top").classList.add("show"); } ..

PHP 사이트 만들기 회원가입 유효성검사 jquery

PHP 사이트 만들기 회원가입 유효성검사 jquery HTML 회원가입 회원가입을 위해 아이디와 비밀번호를 등록해주세요. 회원가입 영역 성별 선택 남 여 회원가입 완료 회원가입을 위한 코드입니다. form요소는 실제 회원가입 양식을 담고 있습니다. action 속성은 양식을 제출할 때 보낼 URL 을 지정합니다. name 속성은 양식을 식별하는 데 사용됩니다. mathod 속성은 양식을 제출할 때 사용할 HTTP메소드를 지정합니다. fieldset 요소는 관련된 입력 요소들을 그룹화하고 그룹에 대한 설명을 제공합니다. legend 요소는 fieldset 요소에 대한 설명을 제공합니다. 유효성 검사 아이디, 비밀번호, 비밀번호 확인, 이름, 연락처, 닉네임, 생년월일에 대한 유효성 검사를 하나씩 해줬습니다..

배움기록/PHP 2023.05.15

정보처리 기능사 실기 문제풀어보기

정보처리 기능사 실기 문제풀어보기 1. 데이어베이스에서 아직 알려지지 않았거나 모르는 값으로, 정보의 부재를 나타내기 위해 사용하며 아무 것도 없는 특수한 데이터를 의미하는 용어를 쓰시오. ✨ 정답보기 NULL 2. 윈도우 10에서 가상 테스크탑 만들기와 가상 테스크탑 닫기 단축키를 각각 적으시오. 가상 데스크탑 만들기 : 윈도우 키 + CTRL + ( ① ) 가상 데스크탑 닫기 : 윈도우 키 + CTRL + ( ② ) ✨ 정답보기 1=D 2=F4 3. 원도우 운영체제에서 시스템 매개변수 및 프로세스 종류 등을 기록한 저장소로 하드웨어, 운영체제 소프트웨어 등에 대한 정보와 설정이 들어 있는 것을 뜻하는 단어는 무엇인지 작성하시오. ✨ 정답보기 레지스트리(Ragistry) 4. UNIX 내에서 소유자, ..

배움기록 2023.05.15

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴) 💜 웹디자인 기능사 실기 연습문제 코드 보기 / 완성 화면 HTML 산업대학교 대학소개 총장인사말 학교소개 홍보관 캠퍼스안내 입학안내 수시모집 정시모집 편입학 재외국민 정보서비스 대학정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 미래를 이끄는 열정 산업대학교 미래를 이끄는 학교 열정h2> 학교 미래를 이끄는 학교 열정 학교 산업대학교 새로운 소식 2023년 신입생 모집중2023.05.10 융합 전공 멘토링 및 튜터링 학생 모집2023.05.10 학과 및 학년별 장기자랑 대회2023.05.10 미래 작업 워크숍 및 박람회2023.05.10 우리학교 풍경 산업대학교 2023 체육대전 바로가기 개인정보 처리방침 정보 공개 ..

웹디자인 기능사 실기 연습문제_강원천문대

웹디자인 기능사 실기 연습문제_강원천문대 💜 웹디자인 기능사 실기 연습문제 코드 보기 / 완성 화면 웹디자인 기능사 실기 연습문제인 강원천문대 홈페이지를 만들어봤습니다. HTML 강원천문대 강원천문대 천문대소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 예약취소 천문과학교육관 시설 소개 영상강의실로 놀러오세요! 천문과학교육관 이용 안내 어린이를 위한 천문 과학관 별을 보는 고요한 정상 강원 천문대로 놀러오세요! 공지사항 갤러리 강원천문대 2023년 휴관일 안내2023.05.01 강원천문대 2023년 온라인 예매 안내2023.05.02 강원천문대 휴관일 및 이벤트 안내2023.05.03 강원천문대 주차장 이용 및 숙박 안내20..

블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한

블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한 블로그 만들기를 하면서 CSS로 레이아웃 틀을 미리 만들어놓고 HTML에서 입력만 해주면 바로 레이아웃이 바뀌도록 작업해줬는데요 정리를 한번 해보겠습니다. HTML Javascript Topic 지속적인 학습과 개발 IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. 더보기 팀워크와 소통 능력 향상 개발자는 혼자서 일하는 경우가 드뭅니다. 대부분의 경우 팀을 이루어 프로젝트를 수행하게 됩니다. 따라서, 팀원과의 원활한 소통과 협력이 필수적입니다. 더보기 코드 가독성 및 유지보수성 고려 개발자가 작성한 코드는 다른 개발자들이 이해하고 유..

배움기록/CSS 2023.05.11

REACT_컴포넌트, props

REACT_컴포넌트, props https://nodejs.org/ko 전에도 한번 정리를 했었는데요 이번에 다시 한번 REACT 기초부터 정리를 해보겠습니다. REACT 설치 우선 리액트를 사용하려면 먼저 Node.js를 설치해야 합니다. https://nodejs.org/ko 설치는 여기서 하면 됩니다. 설치를 완료 했다면 터미널을 열어 dir로 (저장할)경로를 찾고 npx create-react-app react3 을 입력해 react 파일을 만들어줍니다. 그럼 이렇게 자동으로 파일이 만들어집니다. We suggest that you begin by typing: cd react3 npm start Happy hacking! npm notice npm notice New minor version o..

배움기록/REACT 2023.05.10

PHP사이트 만들기_이용약관 체크하고 넘어가기

PHP사이트 만들기_이용약관 체크하고 넘어가기 HTML 이용약관 1 2 3 제1조 (목적) 본 약관은 [서비스 제공자] (이하 "회사")가 제공하는 인터넷 관련 서비스 (이하 "서비스")의 이용과 관련하여 회사와 회원의 권리와 의무 및 책임사항을 규정함을 목적으로 합니다. 제2조 (용어의 정의) "서비스"라 함은 회사가 제공하는 모든 인터넷 관련 서비스를 의미합니다. "회원"이라 함은 서비스를 이용하기 위하여 회사와 이용계약을 체결한 자를 의미합니다. "아이디(ID)"라 함은 회원의 식별과 서비스 이용을 위하여 회원이 정하고 회사가 승인하는 문자와 숫자의 조합을 의미합니다. "비밀번호"라 함은 회원이 부여 받은 아이디와 일치된 회원임을 확인하고 비밀보호를 위해 회원 자신이 설정한 문자 또는 숫자의 조합을..

배움기록/PHP 2023.05.09

리액트 시작하기

리액트 시작하기 REACT!? 리액트는 페이스북에서 개발된 UI(User Interface)라이브러리 입니다. 리액트는 컴포넌트 기반으로 설계되어 있으며, 각각의 컴포넌트는 독립적이고 재사용 가능합니다. 리액트는 Virtual DOM을 사용하여 UI 를 업데이트 합니다. 이는 UI를 업데이트 할 때, 전체 UI를 다시 렌더링 하는 것이 아니라 변경된 부분만 렌더링 하여 성능을 향상시킵니다. 또한, 리액트는 JSX 라는 문법을 사용하여 JavaScript 코드 안에 HTML 코드를 작성할 수 있도록 지원합니다. JSX 는 HTML과 유사하지만, JavaScript와 통합된 문법을 가지며, 컴파일러를 사용해 일반 javaScript 코드로 변환합니다. 리액트는 단독으로 사용될 수도 있지만, 다른 라이브러리나..

배움기록/REACT 2023.05.08

자바스크립트 패럴랙스 이펙트 02_사이드메뉴

자바스크립트 패럴랙스 이펙트 02_사이드메뉴 💜 parallax Effect02 코드 보기 / 완성 화면 HTML Javascript Parallax Effect02 패럴럭스 이펙트 : 사이드 메뉴 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 기회는 문을 두드리지 않는다. 우리가 문을..

사이트 만들기 1 이미지 슬라이드 (Swiper)

사이트 만들기 1 이미지 슬라이드 (Swiper) 💜 사이트만들기 1 코드 보기 / 완성 화면 Swiper 라이브러리를 사용해 자동으로 슬라이드 되는 이미지를 만들었습니다. Swiper Swiper는 모바일 및 데스크톱에서 사용할 수 있는 강력한 슬라이더 라이브러리 입니다. 이미지 갤러리, 브랜드 로고, 제품 슬라이더 등 다양한 유형의 슬라이더를 지원합니다. Swriper의 특징으로는 모바일 및 데스크톱에서 모두 작동, 다양한 슬라이드 유형, 다양한 옵션을 사용해 슬라이더를 맟춤 설정, 터치 이벤트 지원, 스와이프 이벤트 지원 등이 있습니다. Swriper는 오픈소스 라이브러리이므로 누구나 무료로 사용 가능합니다. script Swiper 라이브러리를 사용해 자동 슬라이드되는 이미지 갤러리를 만들고, 일..

카테고리 없음 2023.05.06

자바스크립트 콜백함수 종류

자바스크립트 콜백함수 종류 콜백함수 -callback function 다른 함수에 전달되어 그 함수가 어떤 이벤트가 발생했을 때 실행되는 함수 즉, 콜백함수는 다른 함수의 인자로 전달되어 호출된다. { function func(){ document.write("2. 함수 실행"); } function callback(str){ document.write("1. 함수 실행");//이게 먼저 실행 str(); } callback(func); } 결과값은 1. 함수 실행 2. 함수 실행 func()는 2. 함수 실행을 출력하고, callback은 1. 함수실행을 출력합니다. 그 이후 인자로 전달받은 함수를 호출합니다. callback(func)를 호출해 callback함수는 func 함수를 인자로 받아 호출합..

자바스크립트 게임 이펙트_음악재생(반복, 재생목록 등)

자바스크립트 게임 이펙트_음악재생(반복, 재생목록 등) 저번에 했던 음악 재생에 이어 오늘은 음악재생 목록 불러오기와 반복재생 등의 작업을 해보겠습니다 전의 작업내용이 궁금하다면 아래 링크로 확인해주세요~! 코드 보기 💜 게임 이펙트 코드 보기 / 완성 화면 HTML music 노래 제목 작가 이름 0:00 3:55 뮤직 리스트 주석된 곳의 내용을 스크립트로 작업해줍니다. 선택자 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list") const musicList = musicWrap.querySelector(".music__list");..

포트폴리오 메인페이지 만들어보기(gsap)

포트폴리오 메인페이지 만들어보기(gsap) 💜 포트폴리오 메인페이지 코드 보기 / 완성 화면 폰트CSS @font-face { font-family: 'PPNeueWorld-CondensedRegular'; font-weight: normal; font-style: normal; src: url('fonts/PPNeueWorld-CondensedRegular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'PPNeueWorld-ExtendedThin'; font-weight: normal; font-style: normal; src: url('fonts/PPNeueWorld-ExtendedThin.woff2') forma..

코딩일기

코딩일기 💜 코드 보기 / 완성 화면 수업시간 내용을 정리중인 사이트 분위기를 알록달록하게 바꾸고 싶었지만 마음에 드는게 없어서 완전 심플한걸로 바꿨다 ALL CLASS JAVASCRIPT SITE HTML 버튼 클릭시 해당 필터링 그룹과 클래스를 이용해 페이지의 요소를 필터링 해서 보여주는 코드 CLASS 클래스 클래스 CLASS CLASS 클래스 CLASS CLASS를 눌렀을때 필터링되서 나오게 되는 박스 JAVASCRIPT 자바스크립트 자바스크립트 JAVASCRIPT JAVASCRIPT 자바스크립트 JAVASCRIPT JAVASCRIPT를 눌렀을때 필터링되서 나오게 되는 박스

배움기록 2023.05.02

웹디자인 기능사 실기 슬라이드효과

💜 웹디자인 기능사 실기 슬라이드효과01 코드 보기 / 완성 화면 전체 코드는 위에 링크를 확인해주세요 첫번째는 좌로 움직이는 슬라이드입니다. HTML 일단 이미지 부분은 slider__wrap, slider__img, slider__inner, slider로 나누어줍니다. CSS .slider__wrap { width: 100%; height: 300px; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 1200px; height: 300px; overflow: hidden; } .slider__inner { /* 이미지 움직이는 영역 = 전체 이미지를 감싸고있는 부모 : 움직이는 영역 */ display: flex; flex-wrap: w..

웹디자인 기능사 실기 연습 메뉴바

💜 웹디자인 기능사 실기 메뉴바 코드 보기 / 완성 화면 로고 메뉴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 슬라이더 공지사항 배너 바로가기 로고 카피라이트 SNS 저번에 작업했던 레이아웃에 메뉴바가 들어가는 형식입니다. 마우스를 가져다댔을 때 메뉴바가 내려오게 스크립트로 작업해줍니다. jqery 를 사용해 작업해줬습니다. https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 경로에서 제공하는 jquery 라이브러리를 불러오고 선택자..

웹디자인 기능사 실기 연습

💜 웹디자인 기능사 실기 연습 코드 보기 / 완성 화면 웹디자인 기능사 실기 연습용으로 레이아웃을 짜보았습니다. 기본 레이아웃틀만 하나씩 정리해보겠습니다. A-1 로고 메뉴 이미지 슬라이드 공지사항 배너 바로가기 로고 COPYRIGHT SNS 일단 기본 틀만 만들어 정리했습니다. width값은 1200px로 가운데정렬 해주고 구조는 wrap안에 header, slider, section, footer로 나누어 작업해줬습니다. B-1 로고 메뉴 이미지 슬라이드 공지사항 배너 바로가기 로고 하단메뉴 COPYRIGHT A-1과 크게 다를 건 없습니다. 비슷하게 구역을 나눠주고 안에 container로 한번 더 구역을 잡아줘 header와 footer는 브라우저 전체 넓이인 100%가 되게 해줍니다. C-1 로..

자바스크립트 시험 오답

자바스크립트 시험 오답 01.(X) { 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 💜 풀이 1부터 10까지의 수 중에서 4로 나누었을 때 나머지가 0,1,2,인 경우에 대해 다음과 같은 연산을 수행합니다. 나머지가 0인 경우 : sum 에서 i를 뺍니다. 나머지가 1인 경우 : sum에서 i를 더합니다. 나머지가 2인 경우 : sum에 i를 곱합니다. 계산해보면 답은 190이 나옵니다. 08. (X) { let num = [1,2,3,4,5]; let sum = 1; f..

카테고리 없음 2023.04.28

자바스크립트 게임 이펙트 _음악 재생

자바스크립트 게임 이펙트 _음악 재생 💜 게임 이펙트 코드 보기 / 완성 화면 HTML music 노래 제목 작가 이름 0:00 3:55 뮤직 플레이어 구역을 추가해줬습니다. js const allMusic = [ { name: "1. Who Do You Think I Think You Are", artist: "Mini Vandals", img: "music_view01", audio: "music_audio01" }, { name: "2. The Monuments and Tunnels in Goa and Hampi", artist: "Bail Bonds", img: "music_view02", audio: "music_audio02" }, { name: "3. We Cruisin'", artist: ..

게임 이펙트 01

게임 이펙트 01 💜 게임 이펙트 코드 보기 / 완성 화면 HTML JIN GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760입니다. 헤더에 사이트 제목과 시간을 설정해줄거고, 메인에 아이콘을 설정해줄 구간을 정해줍니다. 푸터엔 OS크기를 구현해줄 위치를 잡아줍니다. script jQuery, jQuery UI, 그리고 GSAP 라이브러리를 사용해 컨테이너 내에 있는 아이콘을 드래그 가능하게 만드는 코드를 가져옵니다. jQuery 는 javascript를 기반으로 한 오픈 소스의 빠르고 가볍고 기능적으로 강력한 javascript 라이브러리 입니다. 웹 개발에서 HTML문서의 조작, 이벤트 처리,..

사이트 제작 - 디자인 시안

사이트 제작 - 디자인 시안 디자인 시안 조사 먼저 제작하고자 하는 화장품에 관련된 사이트들을 조사하고 마음에 드는 시안을 짜집기해봤습니다. 참고사이트는 아래 더보기에 첨부해뒀습니다. 더보기 빈느 https://vinne.co.kr/?gclid=Cj0KCQjwi46iBhDyARIsAE3nVrY8q0pfn2Wo8r_xxlqYafpOJ_Dc2lg7AC0TXAp9FS1073qVx2hqxzwaAvpOEALw_wcB 아리따움 https://www.aritaum.com/main.do 스키큐어 http://skincure.co.kr/ 이니스프리 https://www.innisfree.com/kr/ko/Main.do 라미화장품 https://www.lamy.co.kr/ 💜 https://theblessedmoon.co..

배움기록 2023.04.23

자바스크립트 문자열 객체 정리

자바스크립트 문자열 객체 정리 자바스크립트 문자열 객체 at() charAt() charCodeAt() codePointAt() concat() localeCompare() normalize() padEnd() padStart() repeat() at() "문자열".at(위치값); - 주어진 위치값에 해당하는 문자를 반환 - 위치값은 0부터 시작, 음수값도 허용 - 문자열의 범위를 벗어나면 undefined를 반환 "javascript refernce".at(0); //j "javascript refernce".at(1); //a "javascript refernce".at(-1); //e "javascript refernce".at(-7); //e "javascript refernce".at(-7); ..

정보처리 기능사 문제 오답정리

정보처리 기능사 문제 오답정리 1. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문의 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; ✨ 정답보기 IS NOT NULL 2. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG ✨ 정답보기 GRANT TO 3. [성적] 테이블에서 점수가 90점 이상 95점 이하인 '컴퓨터공학과' 학생의 정보를 검색한 SQL문을 작성하시오. SELECT * FROM 성적 WHERE (점수 _____ 90 _____ 95) AND 학과 = '컴퓨터공학과'; ✨ 정답보기 Between AND 4. [성적] 테이블..

카테고리 없음 2023.04.21

자바스크립트 시험 오답

자바스크립트 시험 오답 01.(X) { 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 🐾 풀이 10보다 작은 동안 반복하는 while루프를 실행합니다. 반복문이 한 번 실행될때 i의 값이 1씩 증가해 1부터 10까지의 값을 가지게 됩니다. i가 3의 배수일때마다 sum에서 i를 빼고 i를 3으로 나눈 나머지가 1일 경우 sum에 i를 더해줍니다. i를 3으로 나눈 나머지가 2일 경우 sum에 i를 곱해줍니다. 반복문이 종료된 후 최종적으로 sum의 값을 출력합니다. 02. { l..

반응형