jonbeo 님의 블로그

VS Code 꿀팁 모음 💡 필수 확장 + 설정으로 개발 속도 UP!

VS Code는 가볍고 확장성이 강한 에디터로, 전 세계 개발자들이 애용하고 있죠.하지만 그대로 쓰기에는 아쉬운 부분이 많습니다.확장(Extensions)과 설정(Settings)을 잘 활용하면 코드 작성 속도와 효율을 크게 끌어올릴 수 있어요.이번 포스팅에서는 실무에서 쓰는 VS Code 설정 & 추천 확장을 중심으로 정리해드리겠습니다!🔧 1. 필수 확장 추천 확장명 기능 요약 왜 유용한가 ESLint코드 스타일 & 린팅실수 없는 코드 작성Prettier코드 자동 포매팅일관성 있는 코드 스타일 유지Path Intellisense경로 자동 완성import 할 때 경로 타이핑 줄이기Bracket Pair Colorizer / Rainbow Brackets괄호 색상 구분복잡한 중첩 구조 쉽게 파악Git..

CSS에서 가독성과 생산성을 높이기 위해 단축 속성이 매우 중요합니다.특히 Flexbox와 Grid에서는 특정 속성들을 한 줄로 축약해서 작성하는 경우가 많습니다.이번 시간에는 자주 사용되는 주요 단축 속성들을 상세하게 정리해보겠습니다! 🧠📦 1. Flexbox 단축 속성✅ flexflex: [flex-grow] [flex-shrink] [flex-basis]; 예시 의미 flex: 1;1 1 0%과 같음. 남는 공간 나눔flex: 0 0 auto;기본 크기 유지, 늘어나거나 줄어들지 않음flex: 1 1 30%;기본 30%, 필요 시 늘어나고 줄어듦 🔄 flex-flowflex-flow: [flex-direction] [flex-wrap]; 예시 의미 flex-flow: row wrap;가..

CSS에서 레이아웃을 만들다 보면 "이 요소 왜 여기 있어?", "왜 고정이 안 되지?" 같은 혼란이 생기죠.그 핵심 원인은 바로 position 속성을 정확히 이해하지 못해서입니다.이번 포스팅에서는 CSS position 속성의 5가지 값인static, relative, absolute, fixed, sticky를 실제 예제와 함께 정리해드립니다. ✅ position: static (기본값)모든 요소는 기본적으로 position: static입니다.별도로 좌표를 지정해도 무시되며, HTML의 문서 흐름에 따라 배치됩니다.div { position: static; top: 20px; /* ❌ 적용되지 않음 */} ✅ position: relative기존 위치(문서 흐름)를 기준으로 상대적으로 이동합..

CSS Grid는 단순히 열을 나열하는 것뿐 아니라상황에 따라 자동으로 조정되는 반응형 레이아웃을 만들 수 있는고급 함수들도 제공합니다.이번 포스팅에서는 가장 많이 쓰이는 4가지 키워드를 정리해볼게요:repeat()minmax()auto-fillauto-fit ✅ 1. repeat()grid-template-columns: repeat(3, 1fr); → 1fr 1fr 1fr을 간단하게 줄인 형태예요.반복되는 패턴을 간단하게 작성할 수 있어요. ✅ 2. minmax()grid-template-columns: repeat(3, minmax(200px, 1fr)); → 각 열의 최소 너비는 200px, 최대는 남은 공간만큼→ 창 크기에 따라 유연하게 반응하는 열을 만들 수 있어요! ✅ 3. auto-fill..

Flexbox로 정렬을 하다 보면,가로 정렬은 잘 되는데 왜 세로 정렬은 자꾸 안 맞지?라고 생각한 적 한 번쯤 있으시죠?그럴 땐 주축이 아닌 교차축 정렬, 즉 align-items와 align-self를 확인해봐야 해요.이 두 속성이 Flexbox에서 세로 방향 정렬을 담당합니다.이번 포스팅에서는 이 두 속성의 차이와 활용법을 쉽게 정리해볼게요! ✅ align-items란?align-items는 모든 Flex 아이템들의 세로 정렬(교차축 정렬) 방식을 한 번에 지정해주는 속성이에요..container { display: flex; align-items: center;} 📦 align-items의 속성값값설명stretch기본값. 아이템 높이를 컨테이너에 맞춰 늘림flex-start위쪽 정렬 (교차..