한번 해보자 코딩

자바스크립트 패럴랙스 이펙트 _애니메이션 💜 패럴랙스 이펙트 코드 보기 / 완성 화면 scrollTop scrollTop값을 먼저 구해줘야 합니다. script 스크롤에 따라 요소를 애니메이션 하는 라이브러리 skrollr을 불러오는 스크립트 태그를 사용해 작업해줍니다. let a = skrollr.init() Skroll라이브러리를 초기화 하여 s 라는 변수에 할당합니다. window.addEventListener("scroll", () => {}) 윈도우의 스크롤 이벤트를 감지하고 콜백 함수를 실행합니다. let scrollY scrollTop 변수에 스크롤의 상단위치를 저장 window.pageYOffset은 IE에서 사용되는 스크롤 위치 속성이고, window.scrollY는 다른 브라우저에서 사..

PHP 회원가입, 로그인 페이지 만들기 PHP - 서버 측에서 동작하는 스크립트 언어로, 웹 개발에 널리 사용되는 프로그래밍 언어입니다. PHP는 PHP:HyperText Preprocessor의 약자로 초기에는 Personal Home Page의 약자였습니다. PHP 는 HTML 과 같이 웹 페이지를 동적으로 생성하는데 사용되며, 웹 서버에서 PHP 스크립트를 실행해 동적인 웹 콘텐츠를 생성하고 처리할 수 있습니다. PHP를 사용해 회원가입 페이지와 로그인 페이지를 만들어봤는데요 정리를 해보겠습니다. PHP에서 MySQL 데이터베이스에 접속 PHP에서 MySQL 데이터베이스에 접속 우선 PHP에서 MySQL 데이터베이스에 접속하는 코드로 연결해줍니다. $를 사용해 데이터베이스 접속에 필요한 변두르을 선..

자바스크립트 패럴랙스 이펙트 01_메뉴효과 💜 parallax Effect01 코드 보기 / 완성 화면 HTML 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 기회는 문을 두드리지 않는다. 우리가 문을 열..

Unsplash 이미지 랜덤으로 사진 불러오기 모던자바스크립트 마무리 문제 1 명언랜덤표시 모던자바스크립트 마무리 문제 1 명언랜덤표시 오늘은 모던자바스크립트 책의 p.520 마무리문제를 만들어보도록 하겠습니다. 명언 js파일을 불러와 화면에 보여주게 합니다. 추가적으로 10초에 mi-1119.tistory.com 바로 전에 했던 모던 자바스크립트 마무리 문제였던 명언 json파일 가져와 랜덤으로 보여주기에 추가적으로 unsplash의 이미지를 랜덤으로 불러와 명언과 같이 배경 이미지도 10초마다 바뀌게 설정해줬습니다. 💜 명언 코드 보기 / 완성 화면 HTML HTML은 이렇게 마무리해줬습니다. script 저번에 했던 명언과 작가 이름을 가져오는 코드에 Unsplash 에서 이미지를 가져와 페이지의 ..

모던자바스크립트 마무리 문제 2 로또번호뽑기 자바스크립트를 사용해 자동으로 복권 번호를 생성해주는 프로그램 작성하기 - 중복되지 않게 set을 사용 - 1~45까지의 범위 - 6개를 무작위로 💜 로또번호 뽑기 코드 보기 / 완성 화면 HTML 로또 번호를 받아가세요! 클릭! 👆 클릭하면 번호가 나옵니다. 클릭버튼과 번호가 나올 구역을 정해줍니다. style btn을 hover 했을때 버튼의 크기가 약간 커지도록 transform:scale 속성을 사용했습니다. script Btn.addEventListener("click", () => {} ); 요소에 클릭 이벤트가 발생하면 화살표 함수를 실행 numvers 변수에 Set 객체를 할당하고 빈 집합으로 초기화 While(numbers.size < 6) 집..

모던자바스크립트 마무리 문제 1 명언랜덤표시 오늘은 모던자바스크립트 책의 p.520 마무리문제를 만들어보도록 하겠습니다. 명언 js파일을 불러와 화면에 보여주게 합니다. 추가적으로 10초에 한번씩 명언이 바뀌게 해주겠습니다. - fetch와 then, catch를 사용해 URL에서 자료 가져오기 - 가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그 중에 명언과 말한 사람 정보를 가져오기 - 무작위로 명언 보여주기 - 10초에 한번씩 명언 바꾸기 💜 명언 코드 보기 / 완성 화면 HTML HTML은 이렇게 마무리해줬습니다. script 우선 선택자를 만들어주고, const dataresult = () => {} dataresult 함수를 정의하고 JSON 데이터를 가져와Quote와 Aut..

슬라이더 이펙트 썸네일 슬라이드(버튼, 썸네일) 💜 슬라이더 이펙트 07 코드 보기 / 완성 화면 슬라이드 이펙트 7번째 썸네일 입니다. head 07. 슬라이더 - 썸네일 css 파일을 링크로 연결시켜줘 따로 작업했습니다. reset.css와 slider.css는 전에 했던 파일과 동일합니다 확인을 원하시면 아래 링크를 통해 확인해주세요 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 이미지 슬라이드 형식 3가지 방법에 대해 정리해보겠습니다! 우선 기본 설정입니다. css연결 01. 슬라이더 타이틀 제목을 작성해주고 cs mi-1119.tistory.com style slider__img 는 이미지 슬라이더의 이미지를 감싸는 컨테이너이다 이..

슬라이더 이펙트 : 이미지 슬라이드 (버튼, 닷메뉴) 💜 슬라이더 이펙트 06 코드 보기 / 완성 화면 버튼을 눌러 이미지를 바꿀 수 있게 작업해줬습니다. style 가로와 세로 크기를 정해두고 overflow 속성으로 이미지를 감춥니다. sliderInner 이미지가 움직이는 영역을 감사는 부모 요소에 대한 스타일을 정의 해당 요소는 가로 4800px, 세로 450px 크기로 설정 display속성으로 flexbox 레이아웃을 사용 개별적인 이미지의 크기를 정해주고 position 속성으로 상대적인 위치를 지정 버튼에 대한 스타일을 지정 hover시에는 배경색과 테두리 모양이 변경되게 해줬습니다. 개별적인 페이지 닷에 대한 설정도 해주고 애니메이션효과도 추가해줬습니다. HTML Javascript Sl..

슬라이드 이펙트 - 위로 움직이기 💜 슬라이더 이펙트 05 코드 보기 / 완성 화면 style 위로 움직이게 하기 위해선 display:flex와 flex-wrap:wrap을 없애줘야합니다. script // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지 let curre..

슬라이드 이펙트 - 좌로 움직이기(연속적) 💜 슬라이더 이펙트 04 코드 보기 / 완성 화면 style 이미지가 보이는 영역, 이미지가 움직이는 영역 = 전체 이미지를 감싸고 있는 부모, 총 이미지, 개별적인 이미지에 대한 css입니다. body Javascript Slider Effect04 04. 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 hunmi961119@gmail.com body 안에 사진을 넣어주고 작업합니다. script 슬라이드 이미지의 width값을 구하는 offsetWidth sliderClone을 이용해 첫번째 이미지 복사 sliderClone 요소를 sliderInner 변수의 마지막 자식 요소로 추가 이를 통해 마지막 이미지에서 다시 첫 번째 이미지로 이..

웹디자인기능사 실기 연습_슬라이더 이펙트 위로 움직이기 기본 세팅 정보는 아래 링크를 통해 확인해주세요~! 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 이미지 슬라이드 형식 3가지 방법에 대해 정리해보겠습니다! 우선 기본 설정입니다. css연결 01. 슬라이더 타이틀 제목을 작성해주고 cs mi-1119.tistory.com 💜 슬라이더 이펙트 03 코드 보기 / 완성 화면 이번엔 위로 움직이게 작업해줬습니다. style 우선 css에서 slider__inner에 display:flex와 flex_wrap: wrap을 빼줘야 합니다. script sliderInner.style.transition = "all 0.6s"; setInterv..

웹디자인기능사 실기 연습_슬라이더 이펙트 좌로움직이기 기본 세팅 정보는 아래 링크를 통해 확인해주세요~! 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 이미지 슬라이드 형식 3가지 방법에 대해 정리해보겠습니다! 우선 기본 설정입니다. css연결 01. 슬라이더 타이틀 제목을 작성해주고 cs mi-1119.tistory.com 💜 슬라이더 이펙트 02 코드 보기 / 완성 화면 기본 세팅은 위의 링크정보와 같습니다. 이번 포스팅에서는 달라진 점만 정리해보도록하겠습니다. main 우선 사진이 전체적으로 움직이게 해줘야 하기 때문에 slider__inner를 만들어 그 안에 img를 넣어줬습니다. style overflow:hidden으로 지정된 ..

웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 이미지 슬라이드 형식 3가지 방법에 대해 정리해보겠습니다! 우선 기본 설정입니다. css연결 01. 슬라이더 타이틀 제목을 작성해주고 css파일을 각자 만들어 연결해줍니다. reset css @import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css'); @import url('https://webfontworld.github.io/tmon/Tmon.css'); @import url('https://webfontworld.github.io/daegu/DalseoDarling.css'); @import url('https://webfontworld.github.io/suseong/Suseo..

웹디자인 기능사 오답노트 2015년01~2016년07 2013년 10월 12일 필기 모의고사 11. 데 스틸(De stijl)에 관한 설명으로 틀린 것은? ① 네덜란드를 중심으로 한 신조형 운동으로 요소주의라고도 불리운다 ② 도스부르크, 몬드리안, 리트벨트 등이 주요인물이다. ③ 아르누보의 조형사상에 큰 영향을 주었다. ④ 현대의 조형 활동은 인공세계를 상징하고 표현하는데 중점을 두어야 한다고 생각하였다. ✨ 정답보기 3번 📑 풀이 데 스틸(신조형주의) 일체화, 기하학적 형태 삼원색과 흑,백, 회색만을 사용 추상예술 그룹이며, 신조형주의 운동 기하학적이며 단순화된 평면구성 피에트몬드리안 19. 색광에서 Red, Blue가 혼합될 때 그 결과 색은? ① Cyan ② Yellow ③ Magenta ④ Whi..

웹디자인 기능사 오답노트 2013년 10월 12일 필기 기출문제 04.디자인 형태의 개념에 조화를 이루는 법칙과 거리가 먼 것은? ① 균형 ② 대비 ③ 통일 ④ 색상 ✨ 정답보기 4번 색상 📑 풀이 균형, 대비, 통일, 유사, 균일, 강약, 변화 05. NICS 표색계에 대한 설명으로 옳은 것은? ① 색상환은 노랑(Y), 빨강(R), 파랑(B), 초록(G)으로 구분되어 있다. ② 기본 6색 중 흰색과 검정은 포횜되지 않는다 ③ 20% 흰색도와 30%의 유채색도를 표시하고 90%는 노랑색도를 지닌 백색이다. ④ 색자각 양의 합은 100이며, 이것은 명도, 채도, 색상의 합이다. ✨ 정답보기 1번 04. 선(Line)의 종류에 따른 의미로 틀린 것은? ① 사선 - 움직임이 있는 확력 있는 운동감, 불안정한 ..

웹디자인 기능사 문제 풀어보기 사이트(+오답노트) 다음주에 시험 보는 웹디자인 기능사! 오늘 학원에서 시험을 보고 틀린 문제들을 정리해보려고 한다! 💜 기능사 시험보기 코드 보기 / 완성 화면 위 사이트는 수업시간에 만든 기능사 문제들을 풀어볼 수 있는 사이트입니다. 랜덤으로 나와서 공부하고 나서 풀어보기 더 좋습니다! 들어가서 풀어보세요~! 2015년 07월 19일 필기 기출문제 오답 1.색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? ①명도대비 ②색상대비 ③보색대비 ④채도대비 ✨ 정답보기 ①명도대비 해설 -명도대비 : 명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주의 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. 11. 자연에서 쉽게 찾을 수 있고, 온..

오늘은 코딩이 아닌 일러스트로 하루를 보낸날 먼저 연습해본 토끼 쌤이 주신 사진으로 펜툴로 선따고 이미지화 시켜서 색입혀줬다 펜툴만 써보고 이렇게 색입히는건 처음이라 신기 연습끝났으니 마음에 드는 사진 골라서 다시 선따기! 거의 완성..! 다음엔 색도 입히고 이걸 이제 코딩으로 작업해준다고했던거같은데..

자바스크립트 퀴즈 사이트 만들기 OMR 유형 (3) OMR유형 추가된 부분을 정리해보려고 합니다. 타이머 넣기(+10초 미만부터 앞에 0 붙여주기) 이름 입력해주면 해당이름 뜨게 하기 점수 결과 표시하기 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 타이머 넣기 let questionTime = ""; let questionTimeRemain = "3600"; -변수 선언 변수들의 초기값세팅 const startQuiz = () => { //시간 설정 questionTime = setInterval(reduceTime, 1000); } -함수 선언 reduseTime 함수를 1초마다 반복해서 실행하는 setlnterval() 메서드를 사용해 questionTime 변수에 할당 setlnterval() ..

자바스크립트 퀴즈 이펙트 7 OMR(2) 오늘은 바로 어제 올렸던 자바스크립트 퀴즈 이펙트의 7번째 OMR유형에 더 추가된 내용을 정리해보겠습니다! 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 시험 시작 전 창 띄우기 기능사 시험 도전하기 정보처리기능사 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회 정보처리기능사..

자바스크립트 퀴즈 이펙트 7 OMR카드 형식 만들어보기 오늘은 수업시간에 한 자바스크립트 퀴즈 사이트 만들기 OMR형식에 대해 정리해보겠습니다. 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 head 우선 header부분에 css를 연결해주고 파비콘도 만들어 넣어줬습니다. body Quiz 객관식 확인 OMR카드 형식 1 2 3 4 5 6 7 web 2020년 1회 정보처리 기능사 기출문제 59분 10초 제출하기 수험자 : 땡떙땡 전체 문제수 : 60문항 남은 문제수 : 59문항 그 다음 body안에 header, main, footer로 영역을 나누어 레이아웃작업을 해줬습니다. 원래작업했던 것들은 여기 안에서 문제정보와, OMR카드 작업을 해주었는데 이번에는 밑에 script부분에서 작업해줄거기때문에..

오늘은 학원에서 했던 웹디자인 기능사 연습 문제를 정리해보겠습니다. 💜웹디자인 기능사 연습 코드 보기 / 완성 화면 주어진 완성 화면을 보고 만들었습니다. 사진은 포토샵으로 자르기를 사용해 하나씩 잘라내고 저장해서 사용했습니다. body 즐길거리 요금/우대혜택 참여프로그램 이용가이드 소통서비스 롯데월드 소식 | 뉴스, 공지 그럴싸진관 미라클23.03.19 드림스테이지 '힘내 소중한 너'23.03.19 '힘내 소중한 너'음원 발매23.03.19 이용 요금 조정 안내23.03.19 더보기 특별한 경험 연간회원안내 프리미엄투어 공연참여프로그램 단체프로그램 서울특별시 송파구 올림픽로 240 호텔롯데월드 | 대표자:박동기 사업자등록번호:219-85-00014 | 통신판매업신고번호 : 송파 제 5513호 COPYT..

자바스크립트 시험 4(재시험) 오답 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

자바스크립트 연습문제 마우스 포인터를 올려놨을때 이미지가 바뀌는 효과 💜마우스 포인터 효과 코드 보기 / 완성 화면 우선 body 안에 mouse 태그를 만들어 class를 지정해줍니다. 그리고 아래 script안에 이미지 선택자를 만들어주고 mouseover와 mouseout으로 마우스를오버했을때 나오는 사진과 마우스를 뺐을때 나오는 사진을 넣어줘 효과를 줍니다. 클릭하면 메뉴나오는 효과 💜마우스 클릭 효과 코드 보기 / 완성 화면 메뉴 Javascript Typerscript Node.js body안에 button태그와 nav 태그 안에 각각의 메뉴를 지정해줍니다. 그리고 style안에 css를 설정해줍니다. script 안에 버튼을 클릭했을때의 효과를 설정해줍니다. 선택자를 먼저 만들어주고 버튼을 ..

자바스크립트 문자열 접근하기 문자열을 다루는 방법에 대해 살펴보겠습니다. 💜 원시 유형과 객체 단순히 값만 가지고 있을 경우 원시 유형이고 프로퍼티와 메서드를 가지고 있을 때는 객체 라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열을 만들때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용해보세요 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉 숫자는 Number객체, 문자열은 St..

사이트 만들기1 오늘은 사이트 만들기를 했던 각각의 영역들을 합쳐서 하나의 사이트로 만들어보는 작업에 대해 정리해보겠습니다. 💜커피 사이트 만들기 코드 보기 / 완성 화면 커피에 대한 사이트를 만들었습니다. 이미지타입, 이미지 텍스트타입, 카드타입, 베너타입, 텍스트타입, 푸터타입 이렇게 나눠서 작업을 해줬었는데요 이제 이걸 한 페이지에 다 나오게 합쳐보는 작업을 했습니다. 우선 사이트 폴더를 따로 만들어준다음, assets, css, ico, img, js파일을 각각 만들어줍니다. css폴더에 각각의 css폴더도 만들어줍니다. index파일을 만들어 여기로 하나로 합쳐주는 작업을 할겁니다. 우선 head에 파비콘과 css파일을 만들어 연결시켜줍니다. style.css @import url("header..

자바스크립트 퀴즈 이펙트 6 슬라이드 형식 오늘은 퀴즈 이펙트 6번째 유형을 정리해보겠습니다! 💜 퀴즈 6번째 코드 보기 / 완성 화면 완성화면입니다. 이번엔 슬라이드 형식으로 한문제를 풀면 다음 문제로 넘어가는 형식입니다. 우선 head 에 css링크를 넣어줍니다. head reset.css @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after..

자바스크립트 시험 4(재시험) 오답 01. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refercence", 0); str.indexOf("refercence", 11); str..

자바스크립트 콜백함수, 리턴, 연산자 정리 자바스크립트 관련 문제들을 풀어봤었는데요. 자바스크립트 시험 4 오답 자바스크립트 시험 4 오답 01. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } ✨ 정답보기 1, 3, true mi-1119.tistory.com 틀린문제들이 많아서 문제풀이를 하면서 아직 잘 모른다고 생각하는 부분들을 정리하면서 다시 공부해보려고 합니다! callback() retrun 함수 변수에 새로..

자바스크립트 퀴즈 이펙트 5 💜 퀴즈 5번째 코드 보기 / 완성 화면 자바스크립트를 이용해 만든 퀴즈 이펙트 5번을 정리해보겠습니다. 문제는 정보처리 기능사 문제를 따왔습니다. header 부분에 link 태그를 이용해 css를 연결해줍니다. 폰트정보와 그리드 배경에 대한 css와 사이트 디자인 css를 따로 설정해뒀습니다. 폰트, 기본 디자인 CSS @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); * { margin: 0; padding: 0; box-sizing: bor..

애니메이션 만들어보기 See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen.