jonbeo 님의 블로그

Visual Studio Code(이하 VS Code)는 가볍고 빠르면서도 자유롭게 커스터마이징할 수 있는 게 최대 장점입니다.자주 쓰는 단축키를 바꾸거나, 나만의 코드 스니펫을 만들어두면 개발 생산성이 확 올라가요!이번 포스팅에서는 다음 세 가지를 초보자도 따라하기 쉽게 설명드릴게요:테마 변경단축키 바꾸기나만의 코드 스니펫 만들기 🎨 1. VS Code 테마 바꾸기 (다크 모드부터 레트로 테마까지!)Ctrl + K → Ctrl + T 누르기 (또는 상단 메뉴 → 보기 → 명령 팔레트)Color Theme 입력 후 선택기본 테마 또는 확장 프로그램으로 테마 설치 가능✅ 인기 테마 추천:One Dark Pro (모던하고 세련됨)Dracula Official (감성 다크 테마)Night Owl (눈에 편한..

코딩을 하다 보면, 들쑥날쑥한 들여쓰기나 일관성 없는 따옴표 때문에 코드가 지저분해지는 경우가 많습니다.이럴 때 Prettier와 ESLint를 함께 설정하면, 저장만 해도 자동으로 코드가 예쁘게 정리됩니다.이번 글에서는 Prettier + ESLint를 VS Code에 통합 설정하는 방법을 단계별로 차근차근 알려드릴게요.웹 개발자라면 무조건 세팅해두면 좋은 조합입니다! ✅ Prettier vs ESLint? 차이점 먼저 짚고 가요!Prettier: 들여쓰기, 줄바꿈, 세미콜론 등 “코드 스타일”을 정리해줌ESLint: 문법 오류, 불필요한 변수 등 “문법 검사와 규칙 위반”을 알려줌이 둘을 함께 쓰면 예쁘고 안정적인 코드를 작성할 수 있어요. 1️⃣ 확장 프로그램 설치하기 VS Code 좌측 확장 탭에..

Visual Studio Code(이하 VS Code)의 가장 큰 장점 중 하나는 **확장 프로그램(Extensions)**을 설치해서 내 개발 환경을 마음껏 꾸밀 수 있다는 점입니다.하지만 확장 프로그램이 너무 많아서 어떤 걸 써야 할지 모르겠는 경우도 많죠.그래서 오늘은 2025년 기준으로 많은 개발자들이 실제로 사용하는 인기 확장 프로그램 TOP 10을 소개해드릴게요!웹 개발, 코드 정리, 생산성 향상까지 전방위로 도움을 줄 확장 프로그램만 골랐습니다 💡 ✅ 1. Prettier – Code formatter역할: 코드 정리 자동화 (자동 줄맞춤, 들여쓰기 등)특히 HTML/CSS/JS 작성할 때 강력 추천! ✅ 2. ESLint역할: 자바스크립트 문법 오류 및 스타일 검사Prettier와 같이 ..

Visual Studio Code(이하 VS Code)는 단순한 코드 편집기를 넘어서, Git과 GitHub도 통합해서 쓸 수 있는 강력한 툴입니다.특히 Git 명령어가 아직 익숙하지 않은 초보자 분들에게는 VS Code에서 버튼 클릭만으로 GitHub에 연결하고 푸시하는 과정이 정말 편리하죠.이 글에서는 Git과 GitHub 계정이 이미 준비된 상태에서, VS Code로 어떤 설정을 하면 바로 버전 관리를 시작할 수 있는지 단계별로 알려드릴게요! 1️⃣ VS Code에 Git이 연동되어 있는지 확인하기VS Code는 설치만 하면 자동으로 Git을 감지하지만, Git이 PC에 먼저 설치되어 있어야 합니다. ✅ Git이 설치되어 있는지 확인하는 방법:VS Code 왼쪽 하단에 소스 제어 아이콘이 보이는지 ..

이제까지 배운 position, flex, z-index, 반응형 레이아웃 등을 한꺼번에 실전에서 적용해볼 시간입니다.이번 포스팅에서는 간단한 카드형 UI를 하나 따라 만들어보며,CSS 구조를 어떻게 잡는지, 어떤 순서로 스타일링하는지 복습해보겠습니다. ✅ 목표 UI 구성이번에 만들 UI는 아래와 같은 구조입니다:카드 컨테이너카드 안에는 썸네일 이미지, 제목, 설명, 버튼이 포함됨 ✅ HTML 구조 먼저 만들기 제목입니다 설명 텍스트가 들어갑니다. 자세히 보기 ✅ CSS로 스타일 입히기 .card { width: 300px; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; box-shadow: 0 4px..

웹사이트를 만들다 보면 화면 크기에 따라 메뉴 구조를 바꿔야 할 때가 있습니다.예를 들어, PC 화면에서는 가로로 펼쳐진 메뉴를 보여주고모바일 화면에서는 햄버거 버튼을 눌러야 메뉴가 펼쳐지도록 만드는 방식이죠.이번 포스팅에서는 HTML과 CSS만으로간단한 반응형 네비게이션을 만드는 방법을 알아보겠습니다.✅ 기본 구조 설계 (HTML) MySite 홈 소개 서비스 문의 ☰ ✅ 기본 스타일링 (CSS).nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #333; color: white;}.menu { display: flex..

단독으로 사용해도 강력한 transition과 animation하지만 두 속성을 잘 조합하면 더 유연하고 세련된 UI 연출이 가능해집니다.이번 포스팅에서는 실제로 많이 쓰이는 예제를 통해 두 속성을 같이 활용하는 팁을 알려드리겠습니다. ✅ 기본 개념 먼저 짚고 가기transition→ 사용자의 행동에 반응하는 애니메이션 (hover, focus 등)animation→ 페이지 로딩과 동시에 자동으로 동작하는 애니메이션👉 두 속성은 동시에 선언 가능하지만, 작동 조건이 다르기 때문에 구분해서 써야 해요 ✅ 예제: 페이지 진입 시 fade-in + hover 시 scale-up.card { animation: fadeIn 1s ease-in; transition: transform 0.3s ease;}...

이전 포스팅에서는hover, focus 같은 사용자 행동에 따라 부드럽게 반응하는 transition을 알아봤습니다.이번에는 자동으로 움직이는 애니메이션 효과,즉 animation 속성만으로 구현하는 다양한 활용법을 다뤄보겠습니다. ✅ animation 기본 문법animation: [이름] [지속시간] [타이밍함수] [지연시간] [반복횟수] [방향] [모드]; 조금 길어 보이지만, 자주 쓰는 건 아래 정도예요:.box { animation: moveBox 2s ease-in-out infinite alternate;}@keyframes moveBox { 0% { transform: translateX(0); } 100% { transform: translateX(200px); }} ✅ anima..

웹사이트에서 버튼을 누를 때 색이 부드럽게 바뀌는 것,슬라이드 메뉴가 천천히 열리는 것처럼사용자가 편안하게 느끼는 변화에는 항상 transition이 숨어 있어요.이번 포스팅 에서는 transition 속성 하나로도어떤 효과까지 줄 수 있는지 실습 중심으로 소개해보겠습니다. ✅ transition 기본 문법transition: [속성] [지속시간] [타이밍함수] [지연시간]; 예를 들어:button { background-color: #f00; transition: background-color 0.3s ease-in-out;}속성: 어떤 CSS 속성에 효과를 줄 건지지속시간: 얼마나 천천히 바뀔지 (ex. 0.3초)타이밍 함수: 속도가 일정한지 가속되는지 등지연시간: 몇 초 뒤에 시작할지 (선택 사..

웹사이트에서 버튼을 눌렀을 때 부드럽게 색이 바뀌거나, 배너가 좌우로 움직이는 걸 본 적 있죠?이런 자연스러운 움직임을 만드는 데 쓰이는 두 가지 핵심 속성이 바로 transition과 animation입니다.이번 포스팅에서는 이 둘의 차이점과 각각 어떻게 사용하는지 예시와 함께 차근차근 살펴볼게요! ✅ transition이란?transition은 "변화가 일어날 때 부드럽게 전환되도록" 만들어주는 속성이에요.어떤 스타일 속성이 바뀔 때, 그 변화가 천천히, 자연스럽게 일어나게 하는 거죠..box { width: 100px; height: 100px; background-color: tomato; transition: all 0.3s ease;}.box:hover { background-colo..