jonbeo 님의 블로그

웹사이트에서 자주 볼 수 있는 이미지 슬라이더(캐러셀),멋진 UI 요소지만 어렵게 느껴지셨나요?이번 포스팅에서는 jQuery 없이 순수 JavaScript만으로기초적인 이미지 슬라이더를 만들어보겠습니다.코딩에 익숙하지 않으셔도 차근차근 따라오시면 완성할 수 있습니다!✅ 완성 모습 미리보기버튼 클릭 시 이미지 전환좌우 화살표 버튼간단한 스타일 적용다음에는 자동 슬라이드까지 추가 가능!🧱 1. HTML 구조 만들기 ← 이전 다음 →📌 설명:class="slide": 각각의 슬라이드 이미지class="active": 현재 보이는 슬라이드id="prev", id="next": 이전/다음 버튼🎨 2. CSS 기본 스타일 .slider { position: relative; width: 6..

SEO(Search Engine Optimization)는 단순히 구글 노출이 아니라,사용자와 검색엔진 모두가 이해할 수 있는 구조로 웹을 만드는 것입니다. React, Next.js 환경에서는 SSR(서버 사이드 렌더링) 또는 SSG(정적 생성)과 함께메타정보, OG(Open Graph), JSON-LD 등을 세팅해줘야 합니다.🧱 1. 기본 메타태그 설정 📌 필수 메타태그 3종 세트title → 검색 제목description → 검색 결과 요약robots → 검색엔진 접근 허용🪶 2. Open Graph (SNS 미리보기 설정) 📌 Open Graph는 페이스북, 카카오톡, 트위터 등 SNS 공유 썸네일 정보 💡 트위터 추가 메타태그 ⚡ 3. Next.js에서 자동 SEO 설정 (App R..

React 프로젝트에서 자연스러운 애니메이션을 구현하고 싶다면CSS transition이나 GSAP보다 먼저 고려해야 할 라이브러리, 바로 Framer Motion입니다. Next.js, CRA, Remix 등 어떤 React 환경에서도 쉽게 동작하고,상태 변화 → 애니메이션 전환을 아주 직관적으로 다룰 수 있죠.⚙️ 1. 설치 및 기본 세팅 npm install framer-motion 기본 Import: import { motion } from "framer-motion";🧩 2. 기본 애니메이션 예제 import { motion } from "framer-motion";export default function BasicBox() { return ( );} 📌 실행 흐름initial:..

다크모드는 이제 선택이 아니라 기본 옵션이 되었습니다.스마트폰, OS, 웹브라우저까지 모두 다크모드를 지원하죠. ✅ 이번 포스팅에서는CSS 변수(:root)미디어 쿼리(prefers-color-scheme)JS 토글 버튼을 조합해 실무형 다크모드 시스템을 완성해보겠습니다 ⚙️🧱 1. CSS 변수 기반 색상 시스템 만들기 :root { --bg-color: #ffffff; --text-color: #222222; --accent-color: #007bff;}body { background-color: var(--bg-color); color: var(--text-color);}a { color: var(--accent-color);} 📌 장점색상 교체가 단 1줄로 가능다크모드뿐 아니라 다른 ..

요즘 웹사이트는 모바일 사용률이 70% 이상입니다.그래서 이제는 “데스크탑 기준으로 줄여가는 방식”이 아니라👉 모바일 기준으로 확장해가는 설계 (Mobile First) 가 표준입니다.🌱 1. 모바일 퍼스트란?모바일 퍼스트(Mobile First) 는 디자인과 개발을 “가장 작은 화면”에서 시작하여,점점 화면이 커질 때마다 스타일을 확장하는 접근 방식입니다. 📌 핵심 개념:❌ “큰 화면을 줄이는 것” → ✅ “작은 화면을 확장하는 것”📏 2. 기본 단위 설계 – 뷰포트 기준 html { font-size: 16px; /* 기준 단위 */}.container { width: 100%; max-width: 1200px; margin: 0 auto;} 📌 모바일에서는 항상 100% 기반 레이아..

CSS Grid는 2차원(행 + 열) 레이아웃을 완벽하게 제어할 수 있는 강력한 도구입니다.이 포스팅에서는 단순한 정렬을 넘어서, 실무에서 자주 쓰는 패턴 예시를 소개해봅니다.🧱 1. 기본 레이아웃 패턴 (Header / Main / Aside / Footer) Header Sidebar Main Footer​ .grid-layout { display: grid; grid-template-areas: "header header" "aside main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr 60px; gap: 10px;}header { grid-area: header;..

기존 **미디어 쿼리(@media)**는 브라우저 전체 뷰포트 크기를 기준으로 반응형 디자인을 적용합니다.하지만 컴포넌트 기반 UI(React, Vue, Angular)에서는 부모 컨테이너 크기에 따라 반응형 스타일이 필요합니다.이를 해결해주는 최신 기능이 바로 @container입니다.📌 1. 기본 문법 @container (min-width: 600px) { .card { flex-direction: row; }} 👉 부모 컨테이너의 너비가 600px 이상일 때 .card 스타일 적용📌 2. 컨테이너 선언컨테이너 쿼리를 쓰려면 부모 요소에 container-type을 지정해야 합니다. .wrapper { container-type: inline-size; /* width 기준 */}?..

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.📌 1. 기본 문법 A:has(B) { ... } 👉 A 요소가 B를 포함하고 있다면 스타일 적용📌 2. 폼 검증 스타일링 /* input이 비어있으면 빨간 테두리 */form:has(input:invalid) { border: 2px solid red;} 📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능📌 3. 드롭다운 메뉴 제어 .dropdown:has(:hover) .menu { display: block;} 📌 부모에 :hover가 있으면 자식 메뉴 표시📌 4. 카드 UI – 버튼..

CSS에서 크기 단위를 어떻게 쓰느냐에 따라 반응형 디자인, 접근성, 유지보수성이 크게 달라집니다.이번 포스팅에서는 가장 많이 쓰이는 단위들을 비교하고, 실무에서의 활용 팁을 알려드립니다.🧩 1. 절대 단위 vs 상대 단위절대 단위: px (픽셀 기준 → 고정 크기)상대 단위: em, rem, %, vh, vw (상황에 따라 달라짐)📌 2. px (픽셀) .box { font-size: 16px; }고정 크기 (화면 크기와 무관)장점: 직관적, 예측 가능단점: 반응형/접근성에서 불리📌 3. em (부모 요소 기준) .parent { font-size: 16px; }.child { font-size: 2em; } /* 부모의 16px × 2 = 32px */부모 요소의 font-size 기준단점: 중..

반응형 디자인은 하나의 코드로 다양한 화면 크기를 지원하는 방법입니다.사용자가 어떤 기기를 쓰든지, 최적화된 UI/UX를 제공할 수 있도록 만드는 것이 목표입니다.🧩 1. 미디어쿼리(Media Query)📌 기본 문법 @media (조건) { /* 적용할 CSS */}예제 – 화면 크기에 따른 스타일 변경 .container { width: 100%;}@media (min-width: 768px) { .container { width: 750px; }}@media (min-width: 1200px) { .container { width: 1140px; }} 👉 화면 크기에 따라 유동적으로 레이아웃 변경 가능📱 2. 모바일 퍼스트 전략기본 스타일 = 모바일 기준큰 화면(태블릿/..