mirabo01 님의 블로그

모든 프로그램의 핵심은 “상황에 따라 다르게 행동하고,특정 동작을 반복하는 것”이다. 자바스크립트에서는 이 두 가지를조건문(Condition Statements) 과 반복문(Loops) 으로 제어한다. 이번 편에서는 if, switch, for, while, for...of, for...in 💡 1. 조건문의 기본 구조 “조건이 참일 때만 실행되는 코드 블록” if (조건식) { // 실행문 } else { // 조건이 거짓일 때 실행 } 예시 👇 let age = 20; if (age >= 19) { console.log("성인입니다."); } else { console.log("미성년자입니다."); } ✅ 조건식은 항상 true/false 로 평가된다.✅ 비교 연산자(>..

자바스크립트를 배우다 보면+, ==, ===, &&, ||, ? : 같은 기호들이 수도 없이 등장한다.이게 단순히 ‘계산하는 도구’가 아니라, 논리와 흐름을 제어하는 핵심 문법이다.이번 편에서는 모든 연산자의 구조와 작동 원리,그리고 실무에서 자주 마주치는 헷갈리는 비교 상황까지 한 번에 정리한다.💡 1. 연산자란?“연산자는 값을 계산하거나 비교하거나 논리를 제어하는 기호다.”let sum = 10 + 5; // 산술 let check = sum > 10; // 비교 let result = check && true; // 논리 자바스크립트에는 수십 가지 연산자가 있지만,핵심은 다음 5가지 그룹으로 정리할 수 있다 👇🔢 2. 산술 연산자 (Arithmetic)연산자 의미 예시 결과+더하기5 + 27-..

자바스크립트의 모든 데이터는 “자료형(Data Type)” 으로 구분된다.자료형을 정확히 알아야 변수를 올바르게 선언하고,비교·연산·함수 호출 시 예측 가능한 결과를 얻을 수 있다. 이번 글에서는 자바스크립트의 기본형(Primitive) 과 참조형(Reference) 을 완벽히 구분하고,각 자료형의 동작 원리를 예제 중심으로 이해해보자. 💡 1. 자바스크립트 자료형의 두 가지 분류 분류 자료형 특징 🧱 기본형 (Primitive) string, number, boolean, null, undefined, symbol, bigint 값 자체가 저장됨 📦 참조형 (Reference) object, array, function 등 메모리 주소를 참조함 💬 기본형은 값 자체를 복사하고,참..

프로그래밍에서 변수(variable) 는 데이터를 저장하는 상자다.하지만 자바스크립트에서는 변수 선언 방식이 세 가지나 있다.👉 var, let, const단순히 “새로운 문법이니까 let, const 쓰면 된다” 수준이 아니다.이 세 가지는 스코프(Scope) 와 호이스팅(Hoisting),그리고 값 변경 가능성까지 다르게 작동한다.이번 편에서는 그 차이를 한눈에, 완벽히 정리해보자.💡 1. 변수란 무엇인가?“변수는 데이터를 저장하기 위한 이름 있는 공간이다.”let name = "기범"; let age = 25; name, age는 각각 “변수 이름(식별자)”이고,"기범", 25는 그 안에 담긴 값(Value) 이다.📦 2. var, let, const의 기본 차이 요약구분 var let con..

자바스크립트(JavaScript)는웹 페이지에 생명과 상호작용을 부여하는 언어다.HTML이 ‘뼈대’, CSS가 ‘옷’이라면, 자바스크립트는 ‘행동과 뇌’라고 할 수 있다.단순히 버튼을 클릭했을 때 문구를 바꾸거나,입력값을 검증하는 정도가 아니라이제는 전체 웹 애플리케이션을 움직이는 중심축이다.💡 1. 자바스크립트의 역할구분 설명🧱 HTML구조(Structure)🎨 CSS디자인(Style)⚙️ JavaScript동작(Behavior)즉, HTML + CSS + JS 세 가지가 함께 작동해우리가 보는 모든 웹사이트를 만든다.🌍 2. 어디에서 동작할까?과거엔 브라우저 전용 언어였다.하지만 지금은 서버, 데스크톱, 모바일, 심지어 IoT까지 영역이 확장됐다.환경 설명💻 브라우저Chrome, Edge, ..

한 번쯤 이런 상황 겪어봤을 거다 👇“z-index: 9999를 줬는데도 왜 안 올라오지?”이게 바로 단순한 숫자 문제가 아니라‘쌓임 맥락(Stacking Context)’ 때문이다.이번 글에서는 z-index의 동작 원리부터브라우저가 요소를 어떤 순서로 겹치는지 완벽히 이해하도록 정리했다.💡 1. z-index란 무엇인가?“요소가 화면의 앞/뒤 중 어디에 위치할지를 결정하는 속성”HTML 요소들은 화면 위에 층(layer) 처럼 쌓인다.이때 어떤 요소가 위로, 어떤 요소가 아래로 갈지를 정하는 것이 z-index..box1 { position: relative; z-index: 1; } .box2 { position: relative; z-index: 2; } ✅ .box2가 .box..

Flex, Grid까지 배웠다면 이제 요소의 “정확한 위치”를 컨트롤하는 기술이 필요하다.바로 그 역할을 하는 게 position 이다.버튼을 오른쪽 아래에 고정시키고 싶다거나,배지 뱃지를 아이콘 오른쪽 위에 살짝 띄우고 싶거나,스크롤해도 계속 붙어 있는 헤더를 만들고 싶다면position: relative / absolute / fixed / sticky 를 이해해야 한다.이번 글에서 이 네 가지를 한 번에 정리해보자.💡 1. position이 하는 일 한 줄 정리“position은 요소를 어디를 기준으로 어떻게 배치할지 결정하는 속성이다.”기본값은 static이고, 나머지가 우리가 흔히 쓰는 네 가지다.position: static; /* 기본값 */ position: relative; posi..

최근 UI 트렌드에서 빠질 수 없는 키워드가 바로 Glassmorphism(글래스모피즘) 이다.마치 유리판 위에 요소가 떠 있는 듯한 반투명 + 블러 효과로,현대적이고 고급스러운 웹 디자인을 완성할 수 있다.이번 글에서는 CSS만으로 구현 가능한 글래스모피즘의 핵심 개념부터실전 예제와 반응형 적용법까지 모두 정리했다.💡 1. 글래스모피즘(Glassmorphism)이란?“반투명한 유리 질감과 부드러운 블러 효과를 결합한 디자인 스타일”글래스모피즘은 Apple, Windows, macOS, iOS 등대부분의 최신 UI에서 사용되는 시각적 트렌드다.✅ 핵심 특징반투명 배경 (rgba or hsla)뒷배경 흐림 효과 (backdrop-filter: blur)부드러운 그림자 (box-shadow)은은한 경계선 ..

이전까지의 CSS는 “하드코딩된 색상과 크기”로 구성되어 있었다.하지만 지금의 CSS는 변수(Variable) 를 통해테마 변경, 유지보수, 다크모드 지원까지 손쉽게 구현할 수 있다. 이번 글에서는 CSS 변수의 문법, 실무 활용법,그리고 다크모드(Dark Mode) 구현까지 단계별로 정리했다. 💡 1. CSS 변수(Variable)란? “반복되는 값을 변수로 선언해 어디서든 재사용할 수 있는 기능” 예전에는 색상이나 폰트 크기를 매번 하드코딩했지만 👇 button { background: #007bff; } 이제는 변수로 선언하고 사용할 수 있다 👇 :root { --primary-color: #007bff; } button { background: var(--primary-c..

웹사이트가 단순히 ‘보여주는 공간’이 아니라‘사용자와 상호작용하는 공간’으로 바뀌는 핵심 기술이 바로 CSS 애니메이션이다. 이번 글에서는 트랜지션(transition) 과 애니메이션(animation) 의 차이부터버튼 호버 효과, 로딩 스피너, 페이드인 효과 등실무에서 자주 쓰이는 예제 중심으로 완벽 정리했다. 💡 1. 트랜지션(transition) vs 애니메이션(animation) 구분 트랜지션 애니메이션 정의 상태 변화에 따른 자연스러운 전환 시간에 따라 반복적으로 변하는 동작 트리거 이벤트 발생 시 (hover, focus 등) 자동 또는 반복 실행 가능 선언 방식 transition: 속성 시간; @keyframes 정의 후 animation으로 적용 예시 버튼에 마우스를 ..