jonbeo 님의 블로그

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..

👀 이런 경험, 있지 않으셨나요?데스크톱에서는 완벽하던 웹페이지가 모바일에서는 글씨가 넘치고, 버튼이 겹치고, 이미지가 너무 작게 나오는 상황!그럴 때 필요한 것이 바로 ‘반응형 웹’과 ‘미디어쿼리(Media Query)’ 입니다.✅ 반응형 웹이란?반응형 웹(Responsive Web) 은 화면 크기나 디바이스 종류에 따라 웹사이트의 레이아웃, 글꼴, 이미지 크기 등이 유연하게 조정되는 웹 디자인 기법이에요.📱 PC, 태블릿, 스마트폰 등 어떤 환경에서도 웹페이지가 잘 보이도록 만드는 것이 목표!🧠 왜 필요할까?사용자 디바이스가 다양해짐 (예: 4.7인치 스마트폰 ~ 27인치 모니터까지!)화면 크기마다 보여주는 방식이 다르면 더 보기 편하고 터치도 쉬워요SEO(검색 최적화)에도 도움됨🎯 핵심 도구..