숨만쉬어도 귀여운타입:D

패럴랙스효과를 나타내기 전체 소스는 요기 css 소스는 요기 body를 볼게요 ! 01 02 03 04 05 06 07 08 09 위처럼 body영역엔 이미지만 넣어줬어요 ! 따로 css를 전부 빼서 작업했어요 script 부분을 볼게용 가로값 = 세로값으로 세팅하여 세로값이 바뀔때 가로로 스크롤하게 하였습니다 ! 아래는 세로>>가로>>세로 효과를 볼거에요 ! 01 02 03 04-1 04-2 04-3 05 06 07 08 09 구조는 위처럼 만들었구요 가로스크롤하는부분은 sec4div에 3개의 화면이 보이게 했어요 전체 세로 길이값에서 4번째div의 높이에 온다면 gsap를 이용해서 가로로 이동시켜 줍니다 이게 왜 되냐면 가로로 스크롤을 한다고 생각을 하지만 실제로는 section은 세로가 400vh이..

https://www.hellomonday.com/ Hello Monday Hello Monday is a creative studio in New York, Copenhagen, and Aarhus that handcrafts digital (and magical) products, brands, and experiences. www.hellomonday.com 마우스 커스가 돋보이는 사이트 ! https://wantedfornothing.com/ Wanted For Nothing | Top Rated Web Design Agency Los Angeles Wanted for Nothing is a Los Angeles based tactical design agency that focuses on UX..

웹디 실기 연습사이트를 만들어 봤어요 ! 캡쳐 이미지와 같은 느낌으로 만들었구요 iframe으로 가져오니 화면이 짤리네요 ㅜㅜㅜ 전체소스 보기는 요기루 오느른 스크립트만 보구 갈게용 $(function(){ let currentIndex = 0; $(".sliderWrap").append($(".slider").first().clone(true)); setInterval(function(){ currentIndex++; $(".sliderWrap").animate({marginLeft:-100*currentIndex + "%"},600); if(currentIndex == 3){ setTimeout(function(){ $(".sliderWrap").animate({marginLeft:0},0); cur..

Ajax를 이용해서 각 input 박스를 체크해봤어요 ! 모든소스는 요기에 ! 입력 양식은 이렇구요 ! 아래 이미지처럼 포커스를 out 했을때 작동하게 만들었어요 ! php 부분을 볼게요 html과 똑같아요 ! 회원가입 영역 성별 선택 남 여 회원가입 완료 위에서 각각의 id값을 각각의 input박스에 설정해줬어요 ! 각각의 인풋박스에서 포커스 아웃할때와 가입완료를 눌렀을때 실행되게 유효성체크를 했어요 ! ajax를 사용하였을때 focus를 하니까 ... sql 실행중에 tab키가 눌려 포커스가 변경되어 로직이 꼬이기도 했어요 ... 그래서 다 빼버린 ajax를 써서 체크하는 부분의 php도 보고갈게요 ! type에 따라 각각의 sql을 실행되요 !

PHP에서 Ajax를 써볼게요 아래는 PHP소스 일부분이에요 이메일 이메일 중복검사 닉네임 닉네임 중복검사 위에 onclick이벤트에서 jquery를 이용해서 ajax를 써볼거에요 ! 요렇게 $.ajax를 써서 호출을 해주구요 ajax문법을 써서 joinCheck를 호출했어요 !

2023웹디 기능사 실기문제를 만들어볼거에요 사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~' 요렇게 만들어졌구요 요 레이아웃을 보구 만들었어요 html부분 강원천문대 강원천문대 천문대 소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 천문과학교육관 시설 소개 영상강의실로 놀러오세요! 천문과학교육관 이용 안내 어린이를 위한 천문 과학관! 별을 보는 고요한 정상 강원천문대로 놀러오세요! 공지사항 | 갤러리 강원천문대 2023년 휴관일 안내2023.05.11 강원천문대 2023년 온라인 예매2023.05.10 강원천문대 휴관일 및 이벤트 안내2023.05.09 강원천문대 휴관일 안내2023.05.08 강원천문대..

2023웹디 기능사 실기문제를 만들어볼거에요 사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~' 요렇게 만들어졌구요 요 레이아웃을 보구 만들었어요 html부분 산업대학교 대학소개 총장인사말 학교소개 홍보관 캠퍼스안내 입학안내 수시모집 정시모집 편입학 재외국인 정보서비스 정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 미래를 이끄는 열정 산업대학교 미래를 이끄는 열정 산업대학교 미래를 이끄는 열정 산업대학교 공지사항 2023년 신입생 모집중2023.05.01 융합전공멘토링 학생 모집2023.05.02 학과 및 학년 별 참여2023.05.03 졸업생 취업박람회2023.05.04 우리학교풍경 산업대학교 2023 체육대전 바로가기 개인정보처리방침 정보 공개 홈페이지 운영지침 15073..

React 기본 문법을 알아봐요 ! 1. Hellow World 출력 import React from "react"; import ReactDOM from "react-dom/client"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Hello World); //Hello World 위와 같이 root에 리엑트돔을 생성해서 root에 render 시키면 출력이 됩니다. 2. JSX JSX는 React에서 사용되는 자바스크립트 문법 확장입니다. JSX는 HTML과 유사한 구문을 사용하여 UI 구성 요소를 만들 수 있게 해줍니다. 스크립트 안에 h1같은 태그도 사용을 할수 있어요 ! import React fr..

REACT를 같이 알아봐요 ! React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 컴포넌트 기반 아키텍처를 사용하며, 이를 통해 재사용 가능한 UI 요소를 만들 수 있습니다. React는 Virtual DOM을 사용하여 빠른 성능을 제공합니다. 이는 변경된 부분만을 업데이트하고 렌더링하는 방식으로 작동합니다. 이러한 접근 방식은 기존의 DOM 조작 방식에 비해 빠른 업데이트와 높은 성능을 제공합니다. React는 또한 다른 라이브러리나 프레임워크와 함께 사용할 수 있습니다. 예를 들어, React Native는 React를 사용하여 네이티브 모바일 앱을 만들 수 있습니다. React는 현재 매우 인기 있는 라이브러리 ..

php에서 html을 사용하는 방법 PHP는 서버 측 언어이기 때문에, HTML과 함께 사용되어 클라이언트에게 동적으로 생성된 웹 페이지를 제공할 수 있습니다. PHP 파일 내에서 HTML 코드를 삽입하는 가장 일반적인 방법은 다음과 같습니다. 1. echo문 사용하기 PHP에서 HTML을 출력하려면, echo문을 사용합니다. 다음은 간단한 예시입니다. 위 예시에서, PHP 코드는 사이에 삽입되며, echo문을 사용하여 "안녕하세요!"라는 텍스트를 출력하고 있습니다. 2. 단축 구문 사용하기 PHP에서 HTML 코드를 간결하게 작성하려면, 단축 구문을 사용할 수 있습니다. 다음은 위의 예시를 단축 구문을 사용하여 작성한 것입니다. 위 예시에서는 사이에 출력할 값을 삽입하면, echo문을 사용하지 않고도 ..

프론트 앤드 개발자 ? 정확히 무슨 작업을 하는지 알아봐용 프론트엔드 개발자의 업무는 대체로 다음과 같습니다. 프론트엔드 개발자(Frontend Developer)는 웹사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 합니다. 프론트엔드 개발자는 사용자가 웹 페이지나 앱을 사용할 때 보게 되는 모든 것을 디자인하고 개발합니다. 이는 HTML, CSS, JavaScript를 사용하여 구현합니다. 웹 사이트 또는 앱의 UI 디자인 구현 디자인을 시안으로 받아 UI 디자인을 HTML/CSS/JavaScript 등의 프로그래밍 언어로 구현합니다. 웹 사이트 또는 앱의 사용자 경험(UX) 개선 사용자 경험을 개선하기 위해 UI를 개선하거나 기능을 추가합니다. 반응형 웹 디자인 구현 모바일, 태블릿, 데스크..

PHPPHP + MAMP사이트 만들기 기초- 04 검색 기능 1. PHP + MAMP 설정- 01 회원가입, 로그아웃 2. PHP + MAMP 02 게시판 & 게시글보기 & 수정하기 3. PHP 03 게시판 페이지기능 php소스는 요기에 전부다 있어요 ! 게시판 검색 기능을 추가해요 ! 게시판 검색영역 제목 내용 등록자 검색 글쓰기 위 코드는 게시판 검색영역에 부분이에요 boardSearch.php로 검색버튼을 누르면 이동하게 작성이되있어요 option에 해당하는 값 & 검색어를 가지고 넘어가요 !

웹디기능사 실기 연습을 해볼게요 ! https://getgrovy.github.io/web2023/webd/index.html 웹디자인기능사 실기 레이아웃 getgrovy.github.io 요기에 들어가시면 유형별로 작업해둔걸 볼수 있어요 ! https://github.com/getGrovy/web2023 에는 소스있으니 참조 부탁드려요 !

오답문제 풀이를 해볼게요 ! 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) } i값 sum값 1 __ 1 2 __ 2 3 __ 2 4 __ -2 5 __ 3 6 __ 18 7 __ 18 8 __ 10 9 __ 19 10 __ 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[..

JAVASCRIPT로 music player를 만들어볼게요 ! 게임효과 -1 (Jquery , gsap) 전체소스보러가기 이전소스도 참조해 주세요 ! 오늘은 뮤직플레이어 기능을 추가 할거에요 재생, 정지, 다음곡, 이전곡, 진행바(duration)기능, 시간계산 요런 기능들을 추가했어요 먼저 HTML부분을 볼게요 ! Music 노래 제목 노래 작가 이름 0 1 구조는 요렇게 잡았구요 재생관련 아이콘들은 svg파일을 이용해서 이미지를 넣어줬어요 ! 스크립트 부분 볼게요 ! // control-play let musicIndex =1; //현재 음악 인덱스 // 음악재생 const loadMusic=(num)=>{ musicName.innerText = allMusic[num-1].name; //뮤직 이름 ..

PHPPHP + MAMP사이트 만들기 기초- 03 게시판 페이징 기능 1. PHP + MAMP 설정- 01 회원가입, 로그아웃 2. PHP + MAMP 02 게시판 & 게시글보기 & 수정하기 php소스는 요기에 전부다 있어요 ! 게시판 페이징 기능을 추가해요 !

PHP + MAMP사이트 만들기 기초 - 02 게시판 & 게시글보기 & 수정하기 오늘은 PHP게시판을 만들어봤어요 글목록 보기 & 클릭하여 글상세내용 보기 & 게시글 수정하기를 만들어 봤어요 오늘한걸 같이 알아보아요 ! php소스는 요기에 전부다 있어요 ! 1. 게시글 목록 보기 게시판 웹 디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 게시판입니다. 관련된 사항은 여기서 확인하세요! *총 1111건의 게시물이 등록 되어 있습니다. 게시판 검색영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

JAVASCRIPT로 GAME 효과를 줘볼게요 ! 먼저 HTML부분을 볼게요 ! grovy game word 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 JQUERY와 GSAP 스크립트를 이용하려고 하단에 추가했구요 GAME느낌을 내기위해 SVG 파일을 백그라운드에 넣었어요 ! 스크립트 부분 볼게요 ! 자바스크립트 부분을 볼게요 ! 1. 온로드시 마우스 이미지를 변경하여 따라다니게 했어요 ! window.onload = function(){ window.addEventListener("mousemove",e=>{ gsap.to(".cursor", { duration : 0.1, left : e.pageX-5, top : e.pageY-10 }); }); } 2. 시간을 우측상단에서 매초 바뀌게끔 했습니다. fun..

사이트유형 번호 사이트 국내 사이트 01 https://www.feelway.com/ 02 https://mustit.co.kr/?utm_source=linkprice&utm_medium=cps&utm_campaign=feed_pc&utm_content=linkprice&inflow=linkprice 03 https://www.balaan.co.kr/shop/main/index.php 04 https://kream.co.kr/?utm_source=google&utm_medium=cpc&utm_campaign=NEW_%EC%9E%90%EC%82%AC%EB%AA%85_PC&utm_term=%ED%81%AC%EB%A6%BC&utm_content=A.%20%EC%9E%90%EC%82%AC%EB%AA%85 05 ..

at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 객체들을 알아볼게요 ! at() at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. const array1 = [5, 12, 8, 130, 44]; let index = 2; console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`); // Expected output: "Using a..

오답풀이를 해볼게요 ! 자바스크립트 문제 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) } 2 -1 3 15 9 16 128 119 129 답은 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]; ..

패럴랙스효과주기 skrollr.js 을 이용한 iframe의 width값이 작아 잘안나와요 ㅜ 느낌만 봐주세요 ! skrollr.js 란? skrollr은 JavaScript 라이브러리로, 스크롤 이벤트를 이용하여 웹사이트에 다양한 애니메이션을 적용할 수 있습니다. 보다 쉽게 css 애니매이션효과를 쉽게 줄수있어요 공식홈페이지를 가시면 좀더 다양한 예제와 설명을 볼수 있어요 ! https://prinzhorn.github.io/skrollr/ skrollr - parallax scrolling for the masses all numeric properties width, height, padding, font-size, z-index, blah blah blah prinzhorn.github.io 전체..

PHP + MAMP사이트 만들기 기초 - 01 회원가입, 로그아웃 PHP란 ? PHP는 서버 측에서 동작하는 오픈 소스 프로그래밍 언어로, 웹 개발에 많이 사용됩니다. PHP는 동적 웹 페이지를 생성하고 데이터베이스와의 상호작용을 가능하게 합니다. PHP는 매우 널리 사용되며, 대부분의 운영 체제와 웹 서버에서 지원됩니다. MAMP란 ? MAMP를 사용하면 컴퓨터에서 PHP 웹 애플리케이션을 개발하고 테스트할 수 있습니다. MAMP는 Apache, MySQL 및 PHP를 쉽게 설치하고 구성하며, PHP 애플리케이션을 로컬에서 실행하고 디버깅하는 데 도움이 됩니다. MAMP는 개발자들이 로컬 컴퓨터에서 PHP 웹 애플리케이션을 개발하고 테스트하는 데 매우 유용합니다. MAMP를 설치하면 Apache 웹 서..

패럴랙스효과를 나타내기 전체 소스는 요기 body를 볼게요 ! Javascript Parallax Effect01 페럴랙스 이펙트 : 메뉴 효과 1 ... 9 메뉴1 ... 메뉴9 01 Section01 "성공의 비결은 실패에서 배우는 것이다." - 콜린 파월 .... scrollTop : 0px #section01 offsetTop() : 0px #section02 offsetTop() : 0px #section03 offsetTop() : 0px #section04 offsetTop() : 0px #section05 offsetTop() : 0px #section06 offsetTop() : 0px #section07 offsetTop() : 0px #section08 offsetTop() : 0px..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 슬라이드 효과 주기 - type 5 세로 무한 슬라이드 효과 주기 - type 6 버튼슬라이드 슬라이드 효과 주기 - type 7 버튼슬라이드 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect Ex01 json 명언 & unsplash 이미지 무한가져오기 1 2 3 4 5 6 7 Ex 오늘의 명언 위처럼 body영역엔 이미지만 넣어줬어요 ! 이미지3번은 한꺼번에 3장을 가져오면 2번과 같이 가져와서 script실행해서 넣어줄거에요 css영역을 볼게요 #header #..

푸드 파이트 대회! 문제보러가기 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다. 이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 더 잘 먹을 수 있게 하려고 합니다. 이번 대회를 위해 수웅이는..

로또뽑기 & 명언랜덤을 만들어봤어요 ! 전체 소스는 요기 두소스의 body부분을 볼게요 오늘의 명언 로또번호 번호뽑기 랜덤뽑기 명언 보기 스크립트를 볼게요 let quonte= document.querySelector(".wise__quote"); let author= document.querySelector(".wise__author"); let wiseAll=[]; //모든 퀴즈 정보 저장 let item =[]; const dataQuestion = () => { fetch("json/dummy01.json") //이파일을 가져올거야 .then(res => res.json()) //이파일은 json이야 객체로바꿀꺼야 .then(items=> { //객체를 한번더 변경할거야 //랜덤한 번호를 가져옴 ..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 슬라이드 효과 주기 - type 5 세로 무한 슬라이드 효과 주기 - type 6 버튼슬라이드 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top:50..

명예의 전당 (1) 문제보러가기 문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의 전당에서 내려오게 됩니다. 이 프로그램에서는 매일 "명예의 전당"의 최하위 점수를 발표합니다. 예를 들어, k =..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 슬라이드 효과 주기 - type 5 세로 무한 슬라이드 효과 주기 - type 6 버튼슬라이드 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect06 슬라이드 이펙트 : 버튼 슬라이드 1 2 3 4 5 6 7 ... prev next /*닷버튼영역*/ 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-ite..