jonbeo 님의 블로그

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;..

웹사이트나 앱을 만들 때,바로 개발에 들어가지 않고 **와이어프레임(Wireframe)**과 **프로토타입(Prototype)**을 먼저 제작합니다.이 과정은 프로젝트의 사용자 경험(UX) 설계, 화면 흐름 정의, 팀 커뮤니케이션에 핵심적입니다.🧾 1. 와이어프레임 vs 프로토타입와이어프레임 (Wireframe)👉 흑백 또는 단순한 박스 형태로 화면의 기본 구조를 잡는 단계 (기능 중심)프로토타입 (Prototype)👉 실제 서비스처럼 클릭, 이동이 가능한 시뮬레이션 (UX 중심)📌 정리하면, 와이어프레임은 설계도, 프로토타입은 **체험 가능한 목업(Mockup)**입니다.🖌️ 2. 대표 도구 비교✅ Figma (가장 인기 있는 도구)클라우드 기반 → 설치 필요 없음무료 요금제도 강력협업 기능 ..

안녕하세요 😊웹에서 텍스트를 강조할 때 흔히 자바스크립트를 이용해 애니메이션을 넣곤 합니다.하지만 요즘은 CSS만으로도 충분히 세련된 애니메이션 효과를 줄 수 있습니다.오늘은 초보자도 따라 할 수 있는 반짝이는 글자 애니메이션을 만들어 보겠습니다.📍 1. 기본 아이디어반짝이는 효과를 주기 위해서는 크게 두 가지 기법을 사용할 수 있습니다.linear-gradient + background-clip:text → 빛이 지나가는 효과text-shadow 애니메이션 → 글자 주위가 번쩍이는 효과이 두 가지를 조합하면 다양한 스타일의 반짝임을 표현할 수 있습니다.📍 2. 빛이 스쳐 지나가는 반짝임 Shiny Text.shine { font-size: 3rem; font-weight: bold; colo..

안녕하세요 😊CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.📍 1. CSS 변수란?CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능--변수명 형식으로 선언, var(--변수명)으로 사용변수의 스코프(범위) 설정 가능📍 2. 기본 문법:root { --main-color: #4CAF50; --font-size-lg: 20px;}h1 { color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에 변수를 적용하는 전역 범위변수명은 ..

안녕하세요 😊UI/UX 디자인 도구인 Figma는 다양한 플러그인을 통해 기능을 확장할 수 있습니다.올바른 플러그인을 선택하면 작업 속도와 효율이 크게 향상됩니다.이번 글에서는 실무에서 자주 쓰이는 Figma 플러그인 5개를 추천드리겠습니다.📍 1. Unsplash – 고품질 무료 이미지 삽입기능: Unsplash의 무료 스톡 이미지를 바로 Figma에 삽입장점: 상업적 이용 가능, 검색 기능 제공활용 예시: 목업 제작, 배너 디자인, 프레젠테이션 시안📌 설치: Figma → Plugins → "Unsplash" 검색📍 2. Iconify – 100,000개 이상의 아이콘 라이브러리기능: 다양한 스타일의 아이콘을 검색·삽입 가능장점: Material Icons, Font Awesome 등 통합 제..

Figma는 웹 기반의 UI/UX 디자인 툴로, 디자이너와 협업자 모두에게 직관적인 인터페이스를 제공합니다.그중에서도 Clipping Mask(클리핑 마스크)는 이미지나 요소를 특정 도형 안에 가두거나 잘라서 표현하고자 할 때 매우 유용하게 사용되는 기능입니다.이번 포스팅에서는 Clipping Mask의 개념과 만드는 방법, 그리고 실전 활용 예제를 차례대로 정리해보았습니다.Clipping Mask란 무엇인가요?Clipping Mask는 지정된 도형의 영역 안에 콘텐츠를 가두는 기능입니다.Photoshop의 레이어 마스크와 유사한 개념으로, 사용자가 선택한 도형 안에서만 콘텐츠가 표시되도록 도와줍니다.예를 들어 원형 도형을 기준으로 사진을 원형으로 잘라서 보여주고 싶을 때, Clipping Mask를 적..