mirabo01 님의 블로그

프로그래밍에서 변수(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으로 적용 예시 버튼에 마우스를 ..

스마트폰, 태블릿, 데스크톱…모든 디바이스에서 자연스럽게 보이는 웹을 만드는 기술,그게 바로 반응형 웹 디자인(Responsive Web Design) 이다. 이번 글에서는 CSS 미디어쿼리(Media Query) 의 핵심 개념부터그리드(Grid)와 플렉스(Flex)를 활용한 실전 반응형 설계법까지단계별로 완전히 정리했다. 💡 1. 반응형 웹 디자인이란? “하나의 웹페이지가 다양한 화면 크기에 맞춰 자동으로 레이아웃을 바꾸는 기술” 예전에는 모바일용, PC용 페이지를 따로 만들었다.하지만 지금은 하나의 HTML로 다양한 기기를 대응하는 시대다. ✅ 반응형의 핵심 요소 유연한 레이아웃 (Flexible Layout) 유동적인 이미지 (Fluid Images) 미디어쿼리 (Media Query) ..

Flexbox로 가로·세로 정렬이 쉬워졌지만,Grid Layout은 그 이상의 세계를 열었다.이번 글에서는 CSS Grid의 핵심 문법과 실전 활용법을한눈에 이해할 수 있도록 정리했다.Grid를 마스터하면, 디자인 툴처럼 정교한 웹 레이아웃을 코드로 구현할 수 있다.💡 1. CSS Grid란?“Grid는 행(Row)과 열(Column) 기반으로 요소를 배치하는 2차원 레이아웃 시스템이다.”Flexbox는 한 줄(row 또는 column) 정렬에 탁월하지만,Grid는 행과 열을 동시에 제어할 수 있다.✅ 즉,웹 전체 구조 설계대시보드, 포털, 미디어 페이지 등정교한 배치에 적합하다.🧱 2. 기본 구조 1 2 3 4 .grid-container { display: grid; gri..

예전엔 박스를 가로 정렬하려면 float, inline-block, position 등을 조합해야 했다.하지만 이제는 단 한 줄로 가능하다 👇display: flex; 이번 글에서는 Flexbox(플렉스박스) 의 핵심 개념부터정렬, 배치, 간격, 비율 조절까지 실무 중심 예제로 완벽 정리한다.💡 1. Flexbox란?“Flexbox는 요소를 가로·세로로 유연하게 정렬하기 위한 CSS 레이아웃 시스템이다.”기존 레이아웃 문제들:가운데 정렬이 복잡함요소 크기가 제각각일 때 간격이 어긋남반응형 레이아웃 구성 어려움💬 Flexbox는 이런 문제를 한 번에 해결한다.🧱 2. 기본 구조Flexbox는 부모(container) 와 자식(item) 구조로 동작한다. 1 2 3 .container {..