본문 바로가기

전체 글27

[js] setInterval 정복하기 💥 ⏳ setInterval이 뭐야?setInterval은 "이 일을 계속 반복해!" 라고 컴퓨터에게 시키는 함수야.🛠 비유:👉 setTimeout은 "3초 후에 한 번만 실행해!"👉 setInterval은 "3초마다 계속 실행해!"즉, setTimeout은 한 번만 실행,setInterval은 계속 반복해서 실행! 🔹 setInterval 사용법setInterval(할_일, 몇_밀리초_마다);할_일 → 반복할 함수 (또는 코드)몇_밀리초_마다 → 몇 밀리초(ms)마다 실행할지 정함.1000ms = 1초, 2000ms = 2초, 3000ms = 3초 ✅ 예제 1: 2초마다 "안녕!" 출력하기setInterval(function() { console.log("안녕! 👋");}, 2000); 📌 설.. 2025. 3. 9.
[js] setTimeout 정복하기 💥 ⏳ setTimeout이 뭐야?setTimeout은 "조금 있다가 실행해!" 라고 컴퓨터에게 시키는 함수야.🛠 비유:👉 알람 시계를 설정한다고 생각해 봐!👉 "3초 뒤에 알람 울려줘!" 라고 하면, 3초 후에 알람이 울리지?👉 setTimeout도 똑같아! "몇 초 후에 어떤 일을 해!" 라고 하는 거야. 🔹 setTimeout 사용법setTimeout(할_일, 몇_밀리초_후);할_일 → 나중에 실행할 함수 (또는 코드)몇_밀리초_후 → 몇 밀리초(ms) 후에 실행할지 정함.1000ms = 1초, 2000ms = 2초, 3000ms = 3초 ✅ 예제 1: 3초 후에 "안녕!" 출력하기setTimeout(function() { console.log("안녕! 👋");}, 3000); 📌 설명:.. 2025. 3. 9.
[js] class 정복하기 💥 🔷 클래스(Class)란?클래스는 비슷한 것들을 찍어내는 설계도야!🛠 비유:👉 햄버거 가게에서 "햄버거 만드는 법"(클래스)이 있으면, 똑같은 햄버거(객체)를 여러 개 만들 수 있지?👉 자동차 공장에서 "자동차 설계도"(클래스)를 만들면, 진짜 자동차들(객체)이 만들어지겠지?자바스크립트에서 class는 비슷한 것들을 쉽게 만들기 위한 설계도야!  1️⃣ 클래스 만들기자, 이제 햄버거 만드는 설계도를 만들어보자!class Hamburger { constructor(bread, patty) { this.bread = bread; // 빵 종류 this.patty = patty; // 패티 종류 } describe() { console.log(`이 햄버거는 ${this.brea.. 2025. 3. 8.
[C++] 파일 시작하기 js응애의 C++ 정복기.. (ノ*・ω・)ノ (C도 모르는 저예요) 산술연산자를 학습하던 중.. cpp 파일을 선언 하는 것에 대한 의문이 생겼다..! 교수님께서 따라하라 하셔서 따라했는데 기억이 나지 않아버림.. (⊙_⊙)? #include using namespace std; int main() { int a = 1; a -= 1; cout 2023. 9. 21.
[패스트캠퍼스] 웹퍼블리싱 강의 - 8주차 학습내용 [내일배움카드] x [패스트캠퍼스] - 8주차 학습내용 [JavaScript를 활용한 응용 예제 2] 드디어 마지막 8주차가 되었습니다-!!! 💪💪 이론 후에는 계속 실습을 진행했어서 만족스러웠는데, 실습 또한 다양하게 진행되었다.. (∩^o^)⊃━☆ 파트는 총 3파트! Chapter 4. (실전) 인터랙티브 뮤직 플레이어 (난이도 중상) Chapter 5. (실전) SVG를 활용한 세로형 슬라이더 Chapter 6. (실전) 마스크를 활용한 풀스크린 동영상 갤러리 중에서 오늘은 'Chapter 5. (실전) SVG를 활용한 세로형 슬라이더'만 작성하려고 한다. 이번 실습은 말 그대로 세로형 슬라이드를 사용하여 svg 효과주기-! 이번에는 플러그인을 사용하는게 아니라 직.접 스크립트를 짜서 슬라이드 구현.. 2023. 7. 19.
[패스트캠퍼스] 웹퍼블리싱 강의 - 7주차 학습내용 [내일배움카드] x [패스트캠퍼스] - 7주차 학습내용 [JavaScript를 활용한 응용 예제 1] 드디어 끝이 보인다-!!! 이번 실습 부터는 js를 사용하는 실습이 진행된다. 파트는 총 3파트! Chapter 1. (실전) 자동 정렬 기능의 반응형 갤러리 (난이도 중) Chapter 2. (실전) 시간에 따라 자동으로 변하는 반응형 웹 (난이도 중) Chapter 3. (실전) 마우스 움직임에 따른 시퀀스 모션 (난이도 중) 중에서 오늘은 'Chapter 1. (실전) 자동 정렬 기능의 반응형 갤러리 (난이도 중)'만 작성하려고 한다. 이번 실습에서는 isotope는 플러그인을 사용한다. 갤러리 같은 레이아웃 반응형을 손쉽게 할 수 있는 플러그인이다. 매번 swiper나 slick으로 또는 pure.. 2023. 7. 19.
[패스트캠퍼스] 웹퍼블리싱 강의 - 6주차 학습내용 [내일배움카드] x [패스트캠퍼스] - 6주차 학습내용 [JavaScript의 인터렉티브 UI 제어] 이번에야 말로.. 정말 하차할 뻔 했다. 자바스크립트 너모 어렵다요 .·´¯`(>▂ 2023. 7. 17.
[패스트캠퍼스] 웹퍼블리싱 강의 - 5주차 학습내용 [내일배움카드] x [패스트캠퍼스] - 5주차 학습내용 [Sass, Git, Github 활용 예제] 우와~ 이번 한 주는 정말 힘들었다.. github 강의 듣는데 강의와 다른방향으로 흘러가는 내 vscode... 포기하고 뒷부분 듣다가 이해를 다 해버린 나예요... 😁🤣 미뤄왔던 강의를 다시 듣는다....☆ 핵심만 요약했으니 언제든 따라하기 쉬울 것이다. git 업로드 빠른 설명 !! 1. vscode(에디터)로 터미널을 연다. 2. git init 2023. 7. 15.
[패스트캠퍼스] 웹퍼블리싱 강의 - 4주차 학습내용 [내일배움카드] x [패스트캠퍼스] - 4주차 학습내용 [Sass를 활용한 효율적인 CSS관리] css로 연맹하던 나,이제 scss를 피할 수가 없다.이번 강의부터는 scss를 배우게 되었다.sass와 scss는 약간의 차이가 존재한다.이번 강의에서는 scss 위주로 배우게 된다. [SCSS 연결방법] 1. scss폴더를 만든다. 2. scss폴더 안에 style.scss 파일을 만들어준다. 3. vscode(작업 에디터)에서 터미널을 연다. 4. 'sass --watch scss/style.scss css/style.css' 를 입력 : scss폴더에서 scss.scss 파일을 찾아서 css폴더 내 style.css로 만들어줘 라고 설정하면 간단하게 끝-! scss 사용 시 css와 마찬가지로 @cha.. 2023. 7. 15.