slice(), splice() slice() slice()메서드는 배열 요소를 다른 요소로 변경하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.slice(2); document.querySelector(".sample08_N1").innerHTML = "1"; document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample08_M1").innerHTML = "arrNum.slice(2)"; document.querySelector(".sample0..
reduce(), reduceRight() 2. reduce() / reduceRight() reduce()메서드와 reduceRight()메서드는 배열 요소를 하나로 정리하여 결과값을 반환합니다. 둘의 차이점은 reduceRight() 메서드가 배열의 끝에서부터 시작합니다. 배열이 숫자라면 합을 구할 수 있고, 문자라면 결합하여 반환합니다. 번호 기본값 메서드 리턴값 js //01. reduce const arrNum1 = [100, 200, 300, 400, 500]; const arrReduce1 = arrNum1.reduce(element => element); document.querySelector(".sample07_N1").innerHTML = "1"; document.querySelect..
concat() concat() concat()메서드는 배열의 요소를 결합하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600]; const arrConcat = arrNum1.concat(arrNum2); document.querySelector(".sample06_N1").innerHTML = "1"; document.querySelector(".sample06_Q1").innerHTML = "[100, 200, 300], [400, 500, 600]"; document.querySelector(".sample06_M1").innerHTML = "arrNum1.concat(arrNum..
reverse(), sort() 2. reverse() / sort() reverse()메서드는 배열 요소의 순서를 반대로 정렬하여 배열로 반환하고, sort() 메서드는 배열 요소를 정렬하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 js //01. reverse() const arrNum1 = [100, 200, 300, 400, 500]; const arrNumReverse = arrNum1.reverse(); document.querySelector(".sample05_N1").innerHTML = "1"; document.querySelector(".sample05_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector("...
unshift(), shift() 1. unshift() / shift() unshift()메서드는 배열 처음 요소에 추가하여 숫자로 반환하고, shift() 메서드는 배열 처음 요소 삭제해 삭제한 요소를 반환합니다. 번호 기본값 메서드 리턴값 결과값 js // 01.unshift() const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_N1").innerHTML = "1"; document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.queryS..
eye moving 이미지 카드, 카드 속의 눈이 움직이는 애니메이션 HTML HTML를 이용하여 진행 ABCDE CSS CSS를 이용하여 진행, transform-style: preserve-3d; z축을 만들기 위해서 만들어줍니다. * { 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: abs..
loading 작은 원 10개가 돌면서 loading 화면 처럼 보이는 애니메이션을 만들어봅시다. HTML 원을 여러개 만들어줍니다. CSS reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다. transform 속성을 이용해 요소에 이동 효과(X , Y축으로 각각 -50%씩)를 부여하면, 시각적으로 가운데에 위치 body{ background-color: rgb(105, 54, 199); } .loader { position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%); width:100px; height:..
마우스 이펙트 - 이미지효과 마우스의 움직임에 따라서 안에 중앙에 있는 이미지가 미세하게 움직이는 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html 중앙에 떠있을 이미지를 넣어줍니다. figcaption으로 이미지 안에 글자를 넣어줍니다. 마우스의 위치 값들이 나타나도록 mouse__info를 넣어줍니다. 코드보기 Only I can change my life. No one can do it for me. 나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수 없다. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px css 마우스 오버시의 효과를 만들어줍니다. 코드보기 /* mouseType */ .mouse__wrap ..
마우스 이펙트 - 조명효과 마우스가 움직이면서, 뒤에 있는 어두운 배경에 밝게 조명을 비추는 듯한 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html 커서 하나가 움직이면서 커서가 위치하는 곳을 밝게 보이는 것처럼 효과를 주기 위해서 mouse__cursor 커서를 만들어줍니다. 코드보기 The gratification comes in the doing, not in the results. 만족은 결과가 아니라 과정에서 온다. css 커서의 움직임에 따른 효과를 주는 작업을 진행합니다. 커서 안에 뒤의 배경 이미지와 같은 이미지를 넣어줍니다. background-size: cover;, background-position: center;를 사용하여 이미지의 위치를 잡아줍니다. background-..
growing box 박스가 늘어나는 애니메이션 HTML HTML를 이용하여 진행 Untitled CSS CSS를 이용하여 진행, transform-style: preserve-3d; z축을 만들기 위해서 만들어줍니다. body { background-color: #888; 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);..
Text Wave 글자가 웨이브 HTML HTML를 이용하여 진행 c o d e p e n CSS CSS를 이용하여 진행합니다. top을 20px를 주고, @keyframes으로 top을 -20px로 부여하여 움직임을 줍니다. nth-child로 각 글자마다 딜레이를 만들어줍니다. 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: #f..
비구조화 할당 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식 { const obj = { a: 100, b: 200, c: "javascript" } const {a, b, c} = obj; document.write(a); document.write(b); document.write(c); } 결과보기 객체구조분해할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 { const obj = { a: 100, b: 200, c: "javascript" } const {a: name1, b: name2, c: name3} = obj; document.write(name1); document.write(name2)..
객체 : 데이터 불러오기 : 펼침연산자 - 복사 배열 혹은 객체에 포함된 항복을 그대로 복사해 목록으로 만듭니다. const obj = { a: 100, b: 200, c: "javascript" } const spread = { ...obj } document.write(spread.a) document.write(spread.b) document.write(spread.c) 결과보기 객체 : 데이터 불러오기 : 펼침연산자 - 추가 복사한 항목 뒤에 항목을 추가합니다. const obj = { a: 100, b: 200, c: "javascript" } const spread = { ...obj, d: "jquery" } document.write(spread.a); document.write(spre..
내부함수 : 스코프, 클로저 함수 안에 또 다른 함수를 선언한 것이 내부함수입니다. 스코프는 어느 범위(전역, 지역)까지 참조되는지를 뜻합니다. 클로저는 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 합니다. function func() { function funcA() { document.write("함수가 실행되었습니다.") }; funcA(); function funcB() { document.write("함수가 실행되었습니다.") }; funcB(); } func(); 결과보기
콜백함수 : 다른 함수에 인수로 넘겨지는 함수 콜백함수는 하나의 함수가 실행되고 두 번째 함수를 실행하는 함수입니다. function func() { document.write("함수가 실행되었습니다.2") } function callback(str) { document.write("함수가 실행되었습니다.1") str(); } callback(func); 결과보기 콜백함수 : 반복문 콜백함수를 반복문을 사용해 반복하는 방법입니다. function func(index) { document.write("함수가 실행되었습니다." + index); } function callback(num) { for (let i = 1; i { // console.log("funcA가 실행되었습니다."); // }, 1000..
클래스 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다 class study { constructor(num, name, job) { this.num = num; this.name = name; this.job = job; } result() { document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.") } } const info1 = new study("1", "웹쓰", "웹퍼블리셔"); const info2 = new study("2", "웹스토리보이", "프론트앤드 개발자"); info1.res..
Mouse Hover Effect 마우스를 올리고 내렸을때 움직임이 생기는 효과를 만들어봅시다. HTML hover__wrap 안에 hover__updown, hover__leftright등 구조를 만들어줍니다. Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS perspective = 원근감 수치를 작게 입력할 수록 가깝게 transform-style: preserve-3d; 입력하면 z축 부여가능 @font-face { font-family: 'LocusSangsang'; font-weight: normal;..
패럴렉스 이펙트 - 이질감 효과 이질감 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html parallax__info를 추가합니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는 영원히 남는다. 07 section7 희망을 품지 않은 자는 절망도 할 수 없다. 08 section8 뭔가를 위해 시도조차하려는 용기가 없..
VScode SCSS(sass) 사용하기 VScode SCSS(sass) 사용하기 위한 설정 방법을 알아봅시다. 설치 프로그램 SCSS를 사용하기 위해서는 설치해야하는 확장 프로그램이 있습니다. 검색 Extensions에서 확장프로그램으로 Live Sass Compiler, Sass를 검색합니다. 설치 Install을 눌러서 설치를 합니다. Watch Sass 하단에서 Watch Sass가 나오는지 확인합니다. 실행시키기 설치를 했지만, 제대로 동작하지 않습니다. 설정을 진행합시다 Preference Open User Setting(JSON) F1으로 JSON파일에 접속을 합니다. json json 파일을 검색해서 파일의 내용을 수정합니다. 코드를 넣어주어서 문제를 해결합니다. 코드 하단의 코드를 넣어봅..
슬라이드 이펙트 - 이미지 슬라이드(버튼) 버튼을 눌러서 이전과 다음 이미지로 슬라이드 되는 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 코드보기 prev next css 생성한 버튼에 대한 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_..
패럴렉스 이펙트 - 나타나기 스크롤하면서 섹션이 효과와 함께 나타납니다. 원본 소스 보기 원본 사이트 html 섹션들만 남겨둡니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는 영원히 남는다. 07 section7 희망을 품지 않은 자는 절망도 할 수 없다. 08 section8 뭔가를 위해 시도조차하려는 용기가 없다면 삶..
마우스 이펙트 - 마우스 따라다니기 (GSAP) 포인터의 좌표값에 따라서 마우스의 움직임과 효과가 있는 마우스 이펙트를 GSAP를 이용하여 만들어 봅시다. (GSAP 라이브러리를 스크립트에 추가해서 진행합니다.) 원본 소스 보기 원본 사이트 html 두개의 원을 만들어줄것이기에, mouse__cursor, mouse__cursor2를 생성합니다. 코드보기 Victory belongs to the most persevering. 승리는 가장 끈기있는 자에게 돌아간다. css 커서의 크기와 효과 등을 부여. pointer-events: none = 요소가 포인터 이벤트의 대상이 되지 않습니다. user-select: none = 사용자가 텍스트를 선택할 수 없게 지정합니다. 코드보기 /* mouseType ..
사이트 - 반응형 지금까지 다양한 유형의 사이트를 만들었습니다. 여러 유형을 합친 사이트를 만들고, 반응형으로 만드는 작업을 해보았습니다. 스와이퍼 프리코드를 이용해서 슬라이더를 작업했습니다. Swiper는 다양한 방식의 슬라이더 코드가 공개되어있습니다. Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. HTML 소스 header, footer 외의 유형들은 메인으로 묶어서 진행하였으며, 지금까지 진행한 유형들은 모은 코드입니다. 슬라이드 유형의 경우 swiper를 사용함에 따라 코드를 수정하였습니다. HTML 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가지 카드 영역 바로가기 배터 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바..
MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스로 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafe24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. MySQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP 의 약어이자 솔루션 스택이다. https://www.mamp.info/en/downloads/ MySQL 실행 윈도우 : cd ..
COOKIT 사이트 웹디자인 기능사 실기 연습 원본 소스 보기 원본 사이트 1-1 코드보기 HTML COOKIT 소개 sub-menu1 sub-menu1 sub-menu1 sub-menu1 COOKIT 메뉴 sub-menu2 sub-menu2 sub-menu2 sub-menu2 리뷰 sub-menu3 sub-menu3 sub-menu3 sub-menu3 이벤트 sub-menu4 sub-menu4 sub-menu4 sub-menu4 MY쿡킷 sub-menu5 sub-menu5 sub-menu5 sub-menu5 우리집도 COOKIT 배송이 되나요? 배송이 가능한지 알려드려요 배송지 검색 7월 30일(화)에 받을 수 있어요 오전 7시까지 주문하시면 다음날 배송됩니다. 63:28:32 남은 시간 실시간 베스트..
롯데월드 사이트 웹디자인 기능사 실기 연습 원본 소스 보기 원본 사이트 1-1 코드보기 HTML 즐길거리 요금/무대혜택 참여프로그램 이용가이드 소통서비스 fff css /* reset */ * { margin: 0; padding: 0; } li { list-style: none; } /* 지정된 지정색이 333 */ a { color: #333; text-decoration: none; } /* clearfix 외워두기 (height 0되는 것 막기 위해 header, ul .clearfix) */ .clearfix::before, .clearfix::after { display: block; content: ""; clear: both; } /* layout */ #wrap { width: 1000p..
패럴렉스 이펙트 - 숨김 메뉴 / 탑 버튼 메뉴를 아래로 스크롤하면 안보이게 하고, 위로 올리면 나타나게 하였습니다. 페이지의 제일 하단에 도달하면 TOP버튼이 나타나서 위로 상단으로 올라가게 하였습니다. 원본 소스 보기 원본 사이트 html TOP버튼을 추가하기 위해서, 이전의 방식에서 parallax__top를 추가해줍니다. 코드보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가..
패럴렉스 이펙트 - 사이드 메뉴 메뉴를 사이드로 배치하여 봅시다. 원본 소스 보기 원본 사이트 html 이전의 방식에서 parallax__nav이었던 것을 parallax__dot으로 변경해줍니다. 클릭하면 각 섹션으로 이동할 수 있도록 링크를 부여해 줍니다. 코드보기 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 ..
