jonbeo 님의 블로그

VS Code 테마와 글꼴 바꾸기! (나만의 코딩 환경 만들기)

1. 왜 테마와 글꼴을 바꿔야 할까?코딩을 오래 하다 보면 눈에 편한 화면이 정말 중요해요.내가 좋아하는 스타일로 꾸미면 작업할 때 기분도 더 좋아져요!실력보다 먼저 나만의 개발 환경부터 만들어보는 재미도 쏠쏠해요 😄2. 테마 변경하는 방법🔹 명령 팔레트로 변경하기Ctrl + Shift + P (Mac: Cmd + Shift + P)“Color Theme” 입력 후 Enter원하는 테마 선택🔹 톱니바퀴 메뉴로 변경하기좌하단 톱니바퀴 클릭Color Theme 선택 후 테마 지정3. 추천 테마 몇 가지Dark+ (기본 다크 테마)Monokai: 따뜻한 색감Dracula: 진한 퍼플 계열, 인기 최고One Dark Pro: 많은 개발자들이 사용하는 VS Code 인기 테마4. 글꼴(Font) 바꾸는 방법..

협업에서 유용한 GitHub 기능들

🤝 협업에서 유용한 GitHub 기능들– 팀워크를 빛나게 해주는 작은 마법들🌱 들어가며혼자서 프로젝트를 할 땐 괜찮지만,팀 프로젝트를 시작하면 협업이 핵심이 되죠?그럴 때 GitHub의 다양한 기능들이우리의 협업을 훨씬 더 빠르고, 깔끔하고, 효율적으로 만들어줘요!이번 포스팅에선 협업에 유용한 GitHub 기능들을 쏙쏙 정리해볼게요!1️⃣ Collaborator 초대하기 – 함께 일할 사람 추가하기✅ 저장소 Settings → Collaborators에서 팀원을 초대할 수 있어요!초대한 사람은 write 권한 이상이 생겨요함께 코드 수정, 커밋, Push 등 가능2️⃣ Issue – 할 일과 버그를 깔끔하게 정리새로운 기능 제안, 버그 제보, 질문 등을 남길 수 있어요마치 프로젝트 게시판 같은 역할!..

.gitignore 파일이란?

📂 .gitignore 파일이란?– Git이 무시해야 할 파일들을 지정하는 마법의 문서!🌱 들어가며Git으로 프로젝트를 올리다 보면,"어 이 파일은 올리고 싶지 않은데?""개인 설정 파일인데, 팀원들이 보면 안 돼!"싶은 파일들이 생기죠?이럴 땐 .gitignore 파일을 사용하면 해결돼요!🧾 .gitignore란?.gitignore는 Git에게“이 파일은 추적하지 마! 무시해줘!”라고 알려주는 파일이에요.📌 무시하고 싶은 파일이나 폴더의 경로를 작성해두면,Git이 그 파일은 버전 관리를 하지 않아요.🧩 언제 필요할까?예를 들어 이런 경우에 자주 써요:IDE 설정 파일 (.vscode/, .idea/)로그 파일 (*.log)빌드 결과물 (/dist/, /build/)개인 키나 민감 정보 (.en..

Figma에서 Clipping Mask 사용법 정리 – 마스크 개념과 실전 적용

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

엑셀 실무에서 진짜 자주 쓰는 함수 TOP 10 (초보자용 예제 포함)

엑셀에 수백 개 함수가 있다지만...실제로 자주 쓰는 건 딱 10개 안팎이라는 사실!오늘은 회사에서 자주 쓰이는 필수 함수 10가지를 예제와 함께 소개하겠습니다.초보자도 따라 할 수 있게 쉬운 예제로 구성했으니 지금부터 하나씩 마스터해봐요!✅ 1. SUM범위의 합계를 계산=SUM(A1:A5)✅ 2. AVERAGE범위의 평균값 계산=AVERAGE(B2:B6)✅ 3. IF조건에 따라 결과 다르게 표시=IF(C2>=70, "합격", "불합격")✅ 4. COUNT숫자가 들어간 셀의 개수 세기=COUNT(A1:A10)✅ 5. COUNTA빈칸 제외하고 셀 개수 세기=COUNTA(A1:A10)✅ 6. VLOOKUP왼쪽 기준으로 값을 찾아 반환=VLOOKUP("홍길동", A2:C10, 2, FALSE)✅ 7. HLOO..

[CSS 기초] px, %, em, rem 차이 완전 정리! 언제 어떤 단위를 써야 할까?

🤔 단위? 그냥 px만 쓰면 안 돼요?처음 CSS를 배울 때는 대부분 px(픽셀)만 사용하죠.하지만 실제 웹사이트에서는 다양한 크기와 해상도에 대응하기 위해 %, em, rem 등의 단위를 함께 써야 해요.단위마다 특성이 다르고, 어디에 어떤 단위를 쓰냐에 따라 반응형/가독성/유지보수성까지 영향을 줍니다.✅ 단위별 의미 요약단위의미기준반응형 적합도특징px고정된 픽셀 값고정 크기❌ 낮음가장 직관적이지만 반응형에 불리함%비율부모 요소 기준✅ 좋음유동 레이아웃에 자주 사용em배수 단위부모 요소의 font-size 기준⚠️ 중간계단식으로 값이 커질 수 있음rem루트 배수 단위html의 font-size 기준✅ 안정적전역에서 일관된 스타일 유지 가능 🧪 실전 예시/* px: 고정된 크기 */h1 { font..

엑셀할 때 이건 무조건! 업무 속도 높여주는 필수 단축키 15선

엑셀 작업할 때 마우스로만 움직이면반나절 걸릴 일도 단축키 몇 개만 알면 순식간에 끝나는 경우 많죠?이번 포스팅에서는 엑셀 업무를 빠르게 처리하기 위해 꼭 알아야 할 단축키 15가지를 소개할게요.초보자도 금방 익힐 수 있는 실무 꿀팁들이니, 오늘부터 하나씩 익혀보세요!🖥 기본 편집 & 이동 단축키단축키설명Ctrl + C복사Ctrl + V붙여넣기Ctrl + Z실행 취소Ctrl + Y실행 다시하기Ctrl + X잘라내기Ctrl + Arrow 방향키데이터가 있는 영역 끝으로 이동📑 셀 관련 단축키단축키설명Ctrl + Space열 전체 선택Shift + Space행 전체 선택Ctrl + Shift + L필터 추가/해제Ctrl + ;오늘 날짜 입력Ctrl + Shift + "+"셀 삽입Ctrl + "-"셀 삭제..

[HTML/CSS 기초] 반응형 웹이란? 미디어쿼리(Media Query)로 모바일에도 잘 보이게 만들기!

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

안녕하세요 😊지금까지 HTML로 여러 가지 태그들을 알아봤습니다.이번엔 웹페이지를 보기 좋게, 정리정돈할 수 있도록 도와주는 **‘구조 태그’**를 알아보겠습니다!🧱 구조 태그가 왜 필요할까?HTML 문서는 위에서 아래로 줄줄이 작성되기 때문에,내용을 논리적으로 나누지 않으면읽는 사람도, 스타일을 입히는 사람도 혼란스러워져요!그래서 HTML에서는 구역을 나눠주는 구조 태그를 사용합니다.🔖 대표적인 구조 태그 소개 태그용도아무 의미 없는 구역 나누기용 박스문서 안의 구분되는 주제 영역독립적인 콘텐츠 (예: 뉴스 글, 블로그 글) 나의 웹사이트 홈 소개 문의 ..

지난 포스팅에서 텍스트, 제목, 이미지, 링크까지 알아봤습니다이번엔 웹페이지에 **리스트(목록)**도 만들고, **표(table)**도 만들어보고,사용자에게 입력받는 폼도 만들어보겠습니다!✅ 순서 있는 목록: + ol은 Ordered List (순서 있는 목록)이고,li는 List Item (목록 항목)을 뜻합니다. HTML 배우기 CSS 배우기 JavaScript 배우기 👉 결과는 이렇게 나와요:HTML 배우기CSS 배우기JavaScript 배우기✅ 순서 없는 목록: + ul은 Unordered List (순서 없는 목록)입니다.보통 동그란 ● 표시로 항목이 나와요. 커피 차 주스 👉 결과:커피차주스📊 표 만들기: , , , table: 표 전체tr: 한 줄(Row)th: 제목 셀(..