전체 글570 클로드 코드 비주얼스튜디오에서 시작하기 (VS Code 확장 설치부터 첫 사용까지) Claude Code는 터미널에서 쓰는 도구로 알려져 있지만, 개발할 때 늘 켜 두는 Visual Studio Code(VS Code) 안에서도 바로 쓸 수 있습니다. 공식 확장 프로그램을 설치하면 편집기 옆에 Claude Code 창이 열리고, 열어 둔 폴더의 파일을 읽고 수정하는 과정을 화면으로 확인하면서 작업할 수 있습니다. 이 글에서는 확장 설치부터 Claude Code 창을 열고 로그인 방식을 고르는 단계까지, 실제 화면 캡처로 정리했습니다. 💡 "비주얼스튜디오"라고 부르지만여기서 말하는 것은 무료 편집기 Visual Studio Code입니다. 이름이 비슷한 통합 개발 환경 Visual Studio(보라색 아이콘)와는 다른 프로그램이니, 파란색 아이콘의 VS Code를 준비하세요. 준비물VS.. 2026. 10. 27. AI 네이티브 시작 : 클로드 코드 설치 및 로컬 엑셀 테스트 클로드 앱은 대화만 하는 도구인 줄 알았는데, Claude Desktop 앱의 Code 모드에서는 내 컴퓨터의 작업 폴더를 지정해 파일을 읽게 하거나, 허용한 범위 안에서 수정까지 맡길 수 있다. 이번 글은 앱 설치부터 로컬 엑셀 파일에서 숫자 하나를 찾아보는 간단한 테스트까지의 기록이다. ✅ 결과 먼저test.xlsx의 Sheet1!A5(5행 A열)에서 숫자 5 셀 1건을 찾았고, 문자로 저장된 "5"는 0건이었다. 첫 시도는 권한 확인 단계에서 멈췄고, 다시 실행했을 때 Claude Code가 실제로 파일을 읽어 결과를 돌려줬다. 💡 용어 정리: Claude Code vs Claude Desktop의 Code 모드Claude Code는 원래 터미널에서 쓰는 Anthropic의 코딩 도구 이름이다. .. 2026. 10. 27. 구글 시트 중복 값 색깔로 표시하기 (조건부 서식 + COUNTIF) 명단이나 주문 목록에 같은 이름이 두 번 들어가 있으면 나중에 집계가 틀어집니다. 행이 몇 개 안 되면 눈으로 찾을 수 있지만, 수백 줄이 되면 놓치기 쉽죠. 구글 시트의 조건부 서식에 COUNTIF 수식 한 줄을 넣으면 중복된 값만 자동으로 색칠할 수 있습니다. 값을 새로 입력해도 바로 반영됩니다. 1. 범위 선택 → 서식 → 조건부 서식중복을 찾을 범위를 선택합니다. 예제에서는 "이름" 열의 A2:A11을 선택했습니다. 그다음 ① 서식 → ② 조건부 서식을 클릭합니다. 2. 맞춤 수식 입력하고 색 고르기오른쪽에 조건부 서식 규칙 패널이 열리고, 범위에는 A2:A11이 들어가 있습니다. 다음의 경우 셀 서식 지정 목록을 열고 맨 아래의 맞춤 수식을 고릅니다.값 입력란에 아래 수식을 입력합니다.서식 .. 2026. 10. 25. 구글 시트 드롭다운 목록 만들기 (색상 지정, 수정·삭제 방법까지) 구글 시트로 업무 진행 상황을 관리하다 보면 같은 칸에 "완료", "완료됨", "끝" 처럼 사람마다 다르게 적는 일이 생깁니다. 이렇게 되면 필터나 집계가 제대로 되지 않죠. 드롭다운을 만들어 두면 정해진 값 중에서 클릭으로 고르기만 하면 되고, 값마다 색까지 입힐 수 있어서 한눈에 상태를 볼 수 있습니다. 1. 드롭다운을 넣을 범위 선택 → 삽입 → 드롭다운드롭다운을 넣을 셀 범위를 먼저 선택합니다. 예제에서는 "상태" 열의 C2:C11을 선택했습니다. 그다음 상단 메뉴에서 ① 삽입 → ② 드롭다운을 클릭합니다. 2. 항목 입력하고 색 고르기오른쪽에 데이터 확인 규칙 패널이 열립니다. 범위에 적용: 앞에서 선택한 범위(시트1!C2:C11)가 자동으로 들어가 있습니다.기준: "드롭다운"으로 되어 있는.. 2026. 10. 25. CSS Grid fr 단위란? 1fr 뜻과 계산 방법, %와의 차이까지 정리 CSS Grid 코드를 보다 보면 1fr이라는 단위가 자주 나옵니다. px이나 %는 익숙한데 fr은 처음 보면 헷갈리죠. 이 글에서는 fr이 무엇인지, 어떻게 계산되는지 예제 화면으로 정리했습니다. fr = fraction(몫)"남는 공간을 몇 대 몇으로 나눌지"를 정하는 CSS Grid 전용 단위입니다. 1. 기본: 남는 공간을 비율로 나누기아래 예제의 그리드 상자는 모두 너비 900px입니다. 각 칸에 실제로 계산된 너비를 표시했습니다. 1fr 1fr 1fr: 900px을 3등분해서 300px씩입니다.2fr 1fr: 2:1로 나눠 600px, 300px입니다.200px 1fr: 고정 너비 200px을 먼저 빼고, 남은 700px을 1fr이 모두 가져갑니다. 즉 브라우저는 고정 너비(px 등)를 먼저.. 2026. 10. 22. CSS Grid repeat(auto-fill, minmax(240px, 1fr)) 완벽 정리: 미디어 쿼리 없이 반응형 카드 만들기 카드 목록을 만들 때 화면이 넓으면 4칸, 좁으면 2칸, 휴대폰에서는 1칸으로 바뀌게 하고 싶을 때가 많죠. 보통은 미디어 쿼리를 여러 개 쓰는데, CSS Grid에서는 단 네 줄이면 됩니다. .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;} 이 코드가 어떻게 동작하는지 예제 페이지를 직접 만들어 캡처했고, 값을 바꾸면 무엇이 달라지는지도 하나씩 비교해 봤습니다.1. 예제 코드: HTML과 CSSHTML구조는 단순합니다. 바깥 상자(.grid) 안에 카드(.card)를 원하는 만큼 넣으면 됩니다. 카드 1 카드 2 카드 3 카드 4 카드 5 카드 6 카드 7 카.. 2026. 10. 22. 이전 1 2 3 4 ··· 95 다음
