천사님 밥 친구해요

(내꺼) 첫 작품입니다..아직 몸뚱이랑 팔,다리 꼬리는 무리네요. HTML 삽입 미리보기할 수 없는 소스 흐흐 처음으로 만들어본 재 작품이네요. 몸뚱이까지는 시간이 좀 걸릴 듯 하네요. 흐음... 오늘 조별과제 PHP 넣어서 할려고 했지만. 비동기식으로는 끝났는데.. 조에서 동기식으로 하자고 해서... 학원에서 배우다 만 동기식 넣으니간 잘 안되네요. 그래서 에라이하고 만든 CSS 애니메이션 첫 작품입니다. 학원 선생님이 열심히 하셔서 그런지 수업이 잘 이해가 되네요.. 이제 배운지 꼴랑 3개월인데. 이정도까지 끌어 올려주실지 몰랐네요.

참고 사이트 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jsy930609&logNo=221389876987 사각형 #tetragon { wiwdth: 100px; height: 100px; background-color: #000; } 직사각형 모양 #tetragon { width: 200px; height: 100px; background-color: yellow; } 다이아몬드 모양 #tetragon { width: 0px; height: 0px; border: 50px solid transparent; border-bottom-color: #000; position: relative; top: -50px; } #tet..

index.html 코드 코드설명 1.해당 코드는 기본적인 HTML 구조를 가지고 있으며, React 애플리케이션을 렌더링하기 위한 준비를 하는 역할을 합니다. 2.은 HTML 문서의 유형을 지정하는 선언문입니다. 이 경우, HTML5를 사용하고 있음을 나타냅니다. 은 HTML 문서의 언어를 한국어로 설정하고 있습니다. 3.lang 속성은 스크린 리더나 검색 엔진 등에서 문서를 이해하는 데 도움을 주는 정보를 제공합니다. 4. 요소는 문서의 메타데이터와 스타일 시트 파일, 스크립트 파일 등의 외부 리소스를 정의하는 부분입니다. 5. 요소는 문서의 메타데이터를 지정합니다. 예를 들어, charset 속성은 문서의 문자 인코딩을 UTF-8로 설정하고, 6.http-equiv 속성은 브라우저가 호환성 모드로 ..

HTML 삽입 미리보기할 수 없는 소스 음.. 이번 애니메이션은 다른 사람거를 퍼왔습니다. 계속 애니메이션을 공부 해볼려고 하였지만. 애니메이션이 상당히 어렵더라고요. html, css, js 등등 섞어서 만들어서 초보인 저에게 이해가 안가더라고요. 학원에서 선생님 홈페이지에 가니간 다양한 애니메이션이 많더라고요. html,css만 있는 애니메이션을 먼저 공부하고 js를 도전해보고 싶네요.

오늘은 리액트를 드디어 하네요. 학원에서 PHP로 데이터베이스로 주고 받는 것부터 해야 리액트가 쉽다고 3달이 되어서야 하네요. 리액트가 나오게 된 이유 리액트(React)는 페이스북(Facebook)에서 개발된 자바스크립트 라이브러리입니다. 1. 가상 돔(Virtual DOM): 리액트는 가상 돔(Virtual DOM) 개념을 도입하여 성능을 최적화하였습니다. 2. 컴포넌트 기반 접근 방식: 리액트는 컴포넌트 기반 아키텍처를 채택하여 개발자들이 재사용 가능한 UI 컴포넌트를 작성할 수 있게 합니다. 3. 단방향 데이터 흐름: 리액트는 단방향 데이터 흐름을 강조합니다. 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 흐르며, 자식 컴포넌트에서는 직접 데이터를 변경할 수 없습니다. 4. 재렌더링 최적화: ..

완성된 화면 HTML 삽입 미리보기할 수 없는 소스 이번에 배운 패럴렉스는 메뉴를 클릭하면 해당 브라우저의 scroll의 위치로 이동을 하는 것을 배웠습니다. HTML+CSS코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다. 더 나은 미래를 향해 나아가려면 불확실성과 위험을..

게임 메인 화면 만들기2 주소 https://skadldldl123.tistory.com/94 간단한 게임 만들기 음악 리스트 페이지 꾸며보기 2 / 5 최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 만들었던 메인페이지 제작을 완료 한 뒤에 음악 리스트 페이지를 만들었습니다. 음악리스트 넣은 모습 JAVASCRIPT코드 const musicWrap = docu skadldldl123.tistory.com 메인화면 만들기 3번은 게임 메인화면 만들기 2번에서 만들었던 재생목록 창에다가 효과를 넣어주는 것을 해봤어요. 재생 목록, 반복 듣기, 1번만 듣기, 자동 재생 HTML코드 뮤직 리스트 코드 설명 재생 목록, 반복 듣기, 1번만 듣기, 자동 재생 JAVASCRIPT코드 const mu..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 배웠던 마우스 효과입니다. 이번거는 마우스가 특정 영역에서만 작동되게 만들었습니다. HTML+CSS코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Do not seek fancy things. What matters is your talent and the amount of love you pour into your actions. 화려한 일을 추구하지 말라. 중요한 것은 스스로의 재능이며, 자신의 행동에 쏟아 붓는 사랑의 정도이다. mailto:skadldldl123@gmail.com 코드 설명 1. div태그 중 .mouse__wrap은 "마우스를 따라다니는 div태그 2개와" /..

조별 작업 이번에는 피그마로 작업한 것들을 모아서 좋은 내용물들을 골라서 작업을 했습니다. 오늘은 HTML, CSS로 만들고 반응형까지 만들었어요. 반응형이 갑자기 할려니간 잘 안됐네요 position: absolute와 transform 떄문에 안되는지도 몰랐네요. html,css로 메인, 모달창은 만들기가 끝났네요.

완성된 모습 ㄴ글쓰기 게시판에 있는 총 갯수를 표현했습니다. ㄴ게시판 검색결과에 있는 게시글 총 갯수를 표현했습니다. ㄴ제목, 내용, 등록자로 검색을 할 수 있게합니다. ㄴ제목, 내용, 등록자로 검색하여서 맞는 게시판이 있으면 보여주게 합니다. ㄴ조회수도 증가하게 만들어봤습니다. board.php코드 과거의 실수보다는 미래의 가능성에 집중하여 끊임없이 성장하고 발전하는 모습을 보여드리겠습니다. 마지막으로 사용자의 니즈를 고려한 창의적이고 혁신적인 아이디어를 실현시켜, 가치 있는 기술을 제공하겠습니다. 회원 게시판 웹디자이너, 웹퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번..

여태까지 배운걸 응용해서 간단한 애니메이션을 해봤어요.ㅎ_ㅎ HTML 삽입 미리보기할 수 없는 소스 내일은 좀 더 새로운걸 해볼 예정입니다. 신기하네요

1. 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 2. 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); 답: 50 10 3. function func(begin, diff, n){ cnt = 1; ret = begin; while(0){ cnt += 1; ..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 만들었던 메인페이지 제작을 완료 한 뒤에 음악 리스트 페이지를 만들었습니다. 음악리스트 넣은 모습 JAVASCRIPT코드 const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArtist = musicWrap.querySelector(".music__control .title p"); const musicView = musicWrap.querySelector(".music__view .image img"); const musicAudio = mu..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 오늘은 어제에 이어서 만든 게시판에 또 내용을 추가했어요 닷버튼을 PHP로 만들고 게시글들을 정리를 하였습니다. 다시 또 미션이네요 1. page가 범위 밖으로 넘어갔을때 "마지막 버튼"과 "다음 버튼"을 숨기라는 미션이네요 변경 전 위에 저렇게 "처음으로, 이전, 닷버튼, 다음, 마지막으로" 버튼이 나오네요 page가 범위 밖으로 넘어갔을때 "처음으로, 이전"으로만 나오게 하라는 미션입니다. 변경 후 ㅎ_ㅎ 게시판 PHP 코드

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 HTML로 만든 게시판을 학원에서 PHP로 바꾸어서 글쓰기, 수정하기, 삭제하기로 만들었습니다. 그리고 다시 미션이 주어졌네요 1.게시판 글을 클릭하면 id값 가져올 것 2. 확인 / 취소 버튼 중에서 취소버튼 클릭시 아무일도 일어나지 않아야 함. 3.수정하기 버튼을 클릭할떄 해당하는 유저여야 할 것 4.수정하기 버튼을 클릭할떄 쓴사람==비밀번호가 같아야 함 (저는 실력이 후달려서 3번이 끝이네요.) PHP게시판 코드 게시글 수정 하기 웹디자이너, 웹퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! 게시글 작성하기 저장하기 코드 설명 1. if($_SESSION['memberID']) {} else { ..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 테트리기나 지렁이 게임을 만들기 전에 메인 페이지를 만드는 작업을 했습니다. 그리고 학원에서 다시 미션을 주네요. -_-; 1.시간 구현 2 OS 크기 구현 3. 아이콘 클릭 + 해더 배경 체인지 4. 현재 뮤직듣기를 클릭했습니다. HTML코드 WEBS GAME WORLD 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920X760입니다. 코드 설명 1.div태그 .cursor은 화면에서 움직이는 마우스 모양이 들어갑니다. 2.div태그 #header에는 로고, 드래그시 메시지, 현재 시간이 나옵니다. 3.div태그 .icon__box은 4개의 이미지 파일이 들어갑니다. 4.footer태그 #foot..

시안 제작 완료 HTML 삽입 미리보기할 수 없는 소스 헬스와 관련된 사이트를 제작할 예정이라 헬스와 관련된 사이트를 찾아서 마음에 드는 것들을 추가해봤습니다. 시안 작업을 위해 여러 곳을 봤지만 헬스장이 어마어마하게 망했더라고요. 그리고 디자인도 다 똑같고요. 그 중에서 약간 다른 곳만 모아서 시안 작업을 해봤습니다. 사이트 참고 사이트 참고에서는 일반 헬스장 사이트와는 약간 다른 디자인을 갖고 있어서 참고를 해봤습니다. 1.https://jamaicaseoul.modoo.at/

1.at() at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. at() 메서드의 존재가 대괄호 표기법을 부정하는 것은 아닙니다. 예를 들어 array[0]은 문제 없이 배열의 첫 요소를 반환합니다. 그러나 맨 마지막 요소를 가져오고 싶을 때 length 속성을 사용해 array[array.length - 1]을 하는 대신, 짧게 array.at(-1)을 사용할 수 있습니다. 배열에서 반환할 요소의 인덱스(위치). 음수 값을 지정할 경우 배열의 마지막을 기준으로 한 인덱스입니다. 즉, 배열 앞 대신 끝에서부터 위치를 계산합니다. 주어진 인덱스에 위치한 배열 요소. 주어진 인덱스..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 학원에서 피그마로 만든 게시판을 혼자서 만들어 보라는 숙제를 받았습니다. 하다가 테이블과 관련된 명령어 중 여백제거와 가로,세로 여백을 몰라서 찾아서 해봤습니다.~ HTML코드 헤더 영역 바로가기 컨텐츠 영역 바로가기 푸터 영역 바로가기 메인으로 Developer Blog 회원가입 회원가입 로그인 게시판 블로그 회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다. 총 1111건의 게시물이 등록되어 있습니다. 검색 글쓰기 번호 제목 등록자 등록일 조회수 1 게시판 영역입니다. 아직 제목이 없어요.! 안교남 2023-04-20 50 2 게시판 영역입니다. 아직 제목이 없어요.! 안교남 2023-04-20 50 3 게시판 영역입니다. 아..

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

오늘도 시험을 보고 많이 틀렸네요.(불합격) 1.다음의 결괏값을 작성하시오 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 2.다음의 결괏값을 작성하시오 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); 답: 50, 10 3.다음의 결괏값을 작성하시오. funct..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 패럴렉스 2단계는 닷버튼을 클릭하면 애니메이션 효과를 부여합니다. 브라우저에서 scroll을 하면 scroll값을 갖고와서 그 값으로 애니메이션을 부여합니다. HTML코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다...

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 스크롤 API를 활용해서 포트폴리오 첫번째를 만들어 봤습니다. 다음부터는 API를 안쓰고 코드로 만들어 본다고 하네요. HTML코드 CHEER HEALT 세상은 나만의 무엇인가를 찾아야 하는 이들에게 보다 더 많은 것을 제공한다. In the middle of every difficulty lies opportunity." - Albert Einstein 코드설명 1.div태그 .s1-img1-1 / .s1-img1-2 / .s1-img1-3 / .s1-img1-4 / .s1-img1-5를 만듭니다. 총 5개의 효과입니다. 2.data-숫자는 이제 스크롤바를 내릴때마다 해당 위치에서 효과를 넣어줄 요소들입니다. (data-숫자를 사용하는 ..

학원에서 배운 PHP 로그인 화면입니다. 배우면서 많이 안되는 부분이 있어서 답답했던적이 많았네요. 그래도 그덕에 학원 수업을 이해를 많이하게 된 것 같아요. 로그인.php코드 로그인 로그인을 하시면 게시글 및 댓글 작성이 가능합니다. 회원가입을 하면 로그인이 가능합니다. admin@admin.com/1234 로그인 영역 이메일 비밀번호 로그인 회원가입을 하지 않았다면 회원가입을 먼저 해주세요! 회원가입 아이디가 기억이 나지 않는다면! 아이디 찾기 비밀번호가 기억이 나지 않는다면! 비밀번호 찾기 코드설명 1.form이 중요하니간 form부터 보는게 좋을 것 같습니다. 2. form의 action에다가 경로를 입력하면 버튼 클릭시 그 경로로 이동을 합니다. 3. input에다가 내용을 입력하고 button..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 포트폴리오 준비도 할겸. 사이트를 만들때 효과를 더 주기 위해서 패럴렉스 고정된 방식을 배웠습니다. HTML코드+CSS코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다. 더 나은 미래를 향해 나아가려면 불확실성..

최종 완성된 모습 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로 잘..