본문 바로가기

개발자182

Parallax Effect 07 패럴랙스 이펙트 07 페럴랙스 이펙트 일곱 번째 시간입니다. 이번 시간에는 스크롤을 내릴때 리빌(reveal) 효과를 줬습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 data-delay와 class에 reveal을 추가했습니다. { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 s.. 2022. 10. 11.
배열 메서드 총정리 배열 메서드 총정리 배열 메서드를 총정리 하는 시간을 가지겠습니다. 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 배열의 길이를 구하기 위해서 length 속성을 사용한다. 번호 기본값 매서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 ['a''b''c''d''f'] length 5 3 [1, 2, ['a', 'b']] length 3 { //01 const arrNum = [100, 200 ,300, 400, 500]; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "[100, 200 ,300, 400.. 2022. 10. 10.
startsWith() / endsWith() startsWith() / endsWith() startsWith() / endsWith()메서드에 대해 알아보는 시간을 가지도록 하겠습니다. startsWith() / endsWith() startsWith() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린( true,false)으로 반환합니다. endsWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWith(검색 문자열); "문자열".startsWith(검색 문자열, 위치값); "문자열".endsWith(검색 문자열; "문자열".endsWith(검색 문자열, 시작 위치값); { const str1 = "javscript reference"; const currentStr1.. 2022. 10. 10.
함수 유형 03 함수 유형 03 함수유형 3번째 시간입니다. 난이도 높은 함수가 슬슬 등장합니다. 01. 즉시 실행 함수 { (() =>{ document.write("함수실행"); })(); } 결과보기 함수실행 02. 파라미터함수 { // 파라미터함수 function func(str = "함수가 실행"){ document.write(str); } func(); } 결과보기 함수가 실행 03. arguments 함수 { // auguments함수 function func(a, b){ document.write(arguments[0]) document.write(arguments[1]) } func("함수가실행", "함수가 실행"); } 결과보기 함수가실행 함수가 실행 04. 재귀함수 : 자기 자신을 호출 { // 23.. 2022. 10. 10.
펼침 연산자 / 객체 구조, 비구조 할당 펼침 연산자 / 객체구조, 비구조 할당 펼침 연산자와 객체구조, 비구조 할당에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 펼침연산자란? 배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다. 마침표 세개(...)로 표시합니다. 펼침 연산자는 단독으로 쓰일 수 없습니다. 배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야합니다. 변수에 담을 시 에러가 발생합니다. 01-1. 펼침연산자 : 복사 { // 복사 { const obj = { a: 100, b: 200, c: "javascript" } const spread = { ...obj } document.write(spread.a) document.write(spread.b) document.write(spread.c) } 결.. 2022. 10. 10.
Javascript 오답 노트 03 Javascript 오답노트 03 Javascript 오답노트 정리 세 번째 시간입니다. 2022년 10월 6일 간단하게 10문제 쪽지시험을 봤습니다. 01. 다음의 결괏값을 작성하시오. { function q1(num) { let answer = 0; while(num) { answer += num % 10; num = parseInt(num / 10); } return answer; } console.log(q1(1996)); } while문에 대한 문제입니다. 1996을 대입해주고 시작합니다. true이니 아래로 갑니다. 1996 % 10 = 6 이 나오고, 1996/10 =199.9가나오므로 parseInt에 의해서 199로 반환됩니다. 다시 위로 올라가서 199 % 10 = 9 , 199 / 1.. 2022. 10. 6.
Javascript 오답 노트 02 Javascript 오답노트 02 Javascript 오답노트 정리 두 번째 시간입니다. 첫 번째 보다는 2배 많이 맞았지만 간발의 차이로 틀리고.. 아직 갈길이 멉니다. 틀린 문제를 잘 정리해서 다음에는 더 많이 맞추도록 합시다! 01. 다음의 결괏값을 작성하시오. { function func(){ let i = 10, hap = 0; while(i > 1){ if( i % 3 == 1){ hap += i; } i-- } document.write(hap); } func(); } while문에 대한 문제입니다. 10>1는 true이니 다음으로 넘어갑니다. 10를 3으로 나눈 나머지 값이 1이 되어 조건에 맞으므로 i값 10을 hap에 더해줍니다. if문 밖으로 나가니 i--가 있으니 i값은 9가 되고 .. 2022. 10. 2.
Javascript 오답 노트 01 Javascript 오답 노트 01 Javascript 오답노트 정리 첫 번째 시간입니다. 맞은 문제가 거의 없어서 쓸게 너무 많네요 ㅠㅠ.. 틀린 문제를 잘 정리해서 다음에는 많이 맞추도록 합시다! 01. 다음의 결과값을 작성하시오. { function func(){ for( i =1; i 2022. 10. 2.
Search Effect 05 Search Effect05 이번 시간에는 filter()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 별을 클릭하면 중요도와 함께 속성 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 보기 { filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 찾은 속성 갯수 : 0 } 02. CSS 코드 보기 { /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid #223547; border-radius: 20px; .. 2022. 9. 30.
Parallax Effect 06 패럴랙스 이펙트 06 페럴랙스 이펙트 여섯번째 시간입니다. 이번 시간에는 스크롤을 내릴때 텍스트를 한자씩 쪼개서 나타나도록 효과를 줬습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 content__item__desc에 split클래스를 추가해줬습니다. { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 .. 2022. 9. 30.
Mouse Effect 06 마우스 이펙트 마우스 이펙트 여섯번째 시간입니다. 마우스 이펙트 06 오늘은 마우스 커서를 따라서 텍스트가 중앙을 기준으로 양쪽으로 왔다갔다 하는 텍스트 효과를 줘보겠습니다. + 텍스트에 커서를 갖다대면 커서크기가 커집니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 구조를 크게 바꿔서 왼쪽 오른쪽으로 나눴습니다. { Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. } 02. CSS 코드 좌우로 꾸며주고 커서에 반전효과를 줍니다. { .mouse__wrap { color: #fff; width: 100%; height: 100vh; cursor: none; } .mouse__img { position: absol.. 2022. 9. 30.
Search Effect 04 Search Effect04 이번 시간에는 find()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 속성을 검색하면 설명이 나옵니다. +속성박스를 클릭하면 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML 스크립트로 불러오기 위해서 search__list를 삭제했고 search__desc가 추가되었습니다. 코드 보기 { find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 화면이 표시됩니다!!! 전체 속성 갯수 : 0 } 02. CSS 박스와 돋보기에 대한 CSS가 추가 되었습니다. 코드 보기 { /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; .. 2022. 9. 29.
Mouse Effect 05 마우스 이펙트 마우스 이펙트 다섯번째 시간입니다. 마우스 이펙트 05 오늘은 마우스의 움직임에 따라 기울기 효과와 글씨 반전 효과를 줘보겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 mouse__img를 추가하고 그 안에 figrue를 넣어 구조를 조금 바꿨습니다. { Life is a choice 인생은 선택이다. mousePageX : 0pxpx mousePageY : 0pxpx centerPageX : 0pxpx centerPageY : 0pxpx maxPageX : 0pxpx maxPageY : 0pxpx anglePageX : 0pxpx anglePageY : 0pxpx } 02. CSS 코드 mix-blend-mode: difference와 transform-style: p.. 2022. 9. 28.
애니메이션 만들기 09 애니메이션 09 애니메이션 만들기 아홉번째 시간입니다. 오늘은 좀 복잡한 코드가 들어간 애니메이션을 만들어보겠습니다. 사진의 눈동자가 마우스를 따라서 움직입니다. 01. HTML { 안녕 } 02. CSS { *{ margin: 0; padding: 0; box-sizing:border-box; } html, body { height: 100%; overflow:hidden; } .wrapper { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: 369px; height: 547px; transform-style: preserve-3d; } .me { position: absolute; width: 369px; h.. 2022. 9. 26.
간단한 애니메이션 08 간단한 애니메이션 08 간단한 애니메이션 만들기 여덟번째 시간입니다. 뱅글뱅글 돌아가는 로딩 애니메이션을 만들어보겠습니다. 01. HTML { } 02. CSS { body { background-color: rgb(105,54,199); } .loader { position: absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; a.. 2022. 9. 25.
Mouse Effect 04 마우스 이펙트 마우스 이펙트 네번째 시간입니다. 마우스 이펙트 04 중앙의 이미지내에서 마우스 커서를 따라 조금 흔들리는듯한 이미지 효과를 줬습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 좌표값을 실시간으로 확인할 수 있도록 mouse__info값을 추가 해줬습니다. { Experience is the best teacher. 경험은 최고의 스승이다. mousePageX : 0pxpx mousePageY : 0pxpx centerPageX : 0pxpx centerPageY : 0pxpx } 02. CSS 코드 이미지 크기를 110%로 늘려주고 트랜스폼 효과를 줬습니다. { .mouse__wrap { width: 100%; height: 100vh; display: flex; align.. 2022. 9. 22.
Mouse Effect 03 마우스 이펙트 마우스 이펙트 세번째 시간입니다. 마우스 이펙트 03 마우스 커서를 따라서 비춰주는 조명효과를 주었습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { Resolve to perform what your ought, perform without fail what you resolve 해야할 일은 과감히 하라, 결심한 일은 반드시 실행하라. } 02. CSS 코드 커서포인터의 배경이미지를 배경과 같은이미지로 해주고 중앙으로 맞춰줍니다. { .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: .. 2022. 9. 22.
간단한 애니메이션 07 간단한 애니메이션 07 간단한 애니메이션 만들기 일곱번째 시간입니다. 회전하면서 길쭉하게 늘어났다가 줄어드는 상자를 만들어보겠습니다. 01. HTML { 코딩대원 } 02. CSS { body { background-color: #0B2C81; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotat.. 2022. 9. 22.
간단한 애니메이션 06 간단한 애니메이션 06 간단한 애니메이션 만들기 여섯번째 시간입니다. 팔딱팔딱 뛰는 글자를 만들어보겠습니다. 01. HTML { w e b s t o r y a } 02. CSS { html,body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; color: #fff; position:relative; top: 20px; display: inline-block;.. 2022. 9. 21.
간단한 애니메이션 05 간단한 애니메이션 05 간단한 애니메이션 만들기 다섯번째 시간입니다. 수업시간에 배운 마우스오버 효과를 이용해서 예제를 만들어보겠습니다. 01. HTML { Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Left Mouse Hover Effect 마우스 내리면 to Right } 02. CSS { @font-face { font-family: ‘LocusSangsang’; font-weight: normal; font-style: normal; src: url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot’); src.. 2022. 9. 20.
Parallax Effect 05 패럴랙스 이펙트 05 이번에는 페럴랙스 이펙트 다섯번째 시간입니다. 이번 시간에는 이질감 효과를 자연스럽게 줘보도록 하겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 section7 말을 많이 하는 것과 말을 잘하는 것은 다르다. .. 2022. 9. 20.
SCSS 설치 및 작동 방법 VScode SCSS 설치 및 설정방법 VScode SCSS 설치 및 설정방법에 대해 알아보겠습니다. 01. SASS 설치 Extensions 탭에서 Sass를 검색해서 설치해줍니다. 02. Live Sass compiler 설치 Live Sass compiler를 설치해줍니다. 03. watch sass 확인 하단에 watch가 나오는지 확인해줍니다. 04.settings.json 왼쪽 아래에 톱니바퀴 버튼을 클릭 -> setiings 클릭 -> 검색창에 json 입력 -> Edit in settings.json을 클릭 -> 입장해줍니다 . 05. 코드 붙여넣기 04번에서 입장한 셋팅창에 아래의 코드를 붙여넣어주면 셋팅 완료입니다. { "liveSassCompile.settings.generateMap.. 2022. 9. 19.
간단한 애니메이션 04 간단한 애니메이션 04 간단한 애니메이션 만들기 네번째 시간입니다. 웨이브 애니메이션을 만들어보겠습니다. 01. HTML Pug를 컴파일시켰습니다. 너무 길어서 접어놓겠습니다. 결과보기 { } 02. CSS SCSS를 컴파일 시켰습니다. { body { display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient(45deg, #00DBDE 0%, #FC00FF 100%); } .row { display: flex; } .row .circle { width: 10px; height: 10px; border-radius: 50%; margin: 5px 10px; backgr.. 2022. 9. 19.
Mouse Effect 02 마우스 이펙트 마우스 이펙트 두번째 시간입니다. 이번 시간에는 GSAP를 이용한 마우스 이펙트 대해 알아보겠습니다. 마우스 이펙트 02 1번 유형과 크게 달라진게 없으며 움직임이 더욱 부드러워졌습니다. 메뉴바와 메인단어와 소스 보기에 transform효과를 적용하였습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기(GSAP) 1 2 3 4 5 6 7 Better the last smile than the first laughter. 처음의 큰 웃음보다 마지막의 미소가 더 좋다. } 02. CSS 코드 { /* mouseType */ .mouse__wrap { width: 100%; height: 100vh;.. 2022. 9. 18.
Parallax Effect 04 패럴랙스 이펙트 04 이번에는 페럴랙스 이펙트 네번째 시간입니다. 섹션별로 그림과 텍스트가 나타나며 짝수와 홀수로 나누어서 효과를 줍니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 section7 말을 많이 하는 것과 말을 잘하는 것은.. 2022. 9. 18.
Slider Effect 04 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 슬라이드(버튼) 효과에 대해 알아보겠습니다. 슬라이드 04 좌우로 버튼을 누르면 이미지가 미끄러지듯 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { prev next } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있.. 2022. 9. 18.
종합형 + 반응형 01 사이트 만들기 종합형 지금까지 공부한 다양한 유형들을 한데 모아서 사이트를 만들어보고자 합니다. + 반응형도 추가해줍니다. 01. Figma Figma로 전체적인 틀을 잡아줍니다. 02. HTML 헤더, 슬라이드, 이미지, 이미지/텍스트 카드, 배너, 텍스트, 푸터 순으로 배치합니다. 소스가 길어서 접어놓았습니다. 코드 보기 { 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 헤더 영역 간식박스 에너지 보충 영양식 24시간 식사 키친 박스 간식박스 설치 온라인 주문하기 문의하기 슬라이드 영역 SNACKBOX 에너지가 필요할 때 에너지가 부족한 당신!! 식사를 하기에는 애매하고 출출.. 2022. 9. 15.
MySQL 알아보기 01 MYSQL MYSQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터 베이스라고 부릅니다. MYSQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS) 입니다. MYSQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스로 개발된 무료 프로그램 입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, 카페24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. MYSQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MYSQL, PHP의 약어이자 솔루션 스택이다. https://www.mamp.info/en/downloads/ MYSQL 실행 윈도우 : cd .. 2022. 9. 14.
Parallax Effect 03 패럴랙스 이펙트 03 이번에는 페럴랙스 이펙트 세번째 시간입니다. 1,2번 유형과 대체로 비슷하고 하단에 상단으로 한번에 이동하는 top 메뉴와 메뉴바 숨김 기능이 추가되었습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 secti.. 2022. 9. 13.
Parallax Effect 02 패럴랙스 이펙트 02 이번에는 페럴랙스 이펙트 두번째 시간입니다. 1번 유형과 비슷하고 메뉴바가 사이드로 빠진 형태입니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 section4 과거를 지배하는 자가 마래를 지배하며 현재를 지배하는 자가 과거를 지배한다. 05 section5 세상은 고통으로 가득하지만 한편 그것을 이겨내는 일로도 가득차 있다 06 section6 가장 하기 힘든 일은 아무 일도 안하는 것이다 07 sec.. 2022. 9. 13.

HTML
CSS

JAVASCRIPT

자세히 보기