Claude Code 설치 방법 (윈도우 & 맥)
정말 처음 사용하는사람도 따라 할 수 있는 Windows와 Mac 설치 방법
Claude Code란?
Claude Code는 터미널에서 실행하는 AI 코딩 도우미입니다.
프로젝트 폴더에서 Claude에게 자연스럽게 질문하거나 코드를 작성해 달라고 요청하면 AI가 작업을 도와줍니다.
Windows에서 Claude Code 설치하기
1단계. Claude Code 설치 페이지 접속
먼저 아래 공식 사이트를 열어주세요.
2단계. Windows Terminal 설치
Claude Code는 Windows Terminal에서 실행하는 것이 가장 편리합니다.
아직 설치되어 있지 않다면 Microsoft Store에서 설치해주세요.
설치가 끝나면 Windows Terminal을 실행합니다.
3단계. Claude Code 설치
Windows Terminal을 열고 아래 명령어를 그대로 입력한 뒤 Enter를 누릅니다.
winget install Anthropic.ClaudeCode
잠시 기다리면 Claude Code가 자동으로 설치됩니다.
4단계. Claude Code 실행
설치가 끝났다면 터미널에서 아래처럼 입력합니다.
claude
처음 실행하면 로그인 화면이 나타납니다.
안내에 따라 Claude 계정으로 로그인하면 바로 사용할 수 있습니다.
Mac(macOS)에서 Claude Code 설치하기
맥에서는 설치 방법이 조금 더 간단합니다.
방법 1. 공식 설치 방법(추천)
터미널을 실행한 뒤 아래 명령어를 입력합니다.
curl -fsSL https://claude.ai/install.sh | bash
설치가 완료될 때까지 잠시 기다립니다.
방법 2. Homebrew를 사용하는 경우
Homebrew를 사용하고 있다면 아래 명령어로 설치할 수도 있습니다.
brew install --cask claude-code
설치 완료 후 실행
설치가 끝나면 터미널에서 아래 명령어를 입력합니다.
claude
처음 실행 시 Claude 계정으로 로그인하면 바로 사용할 수 있습니다.
설치가 제대로 되었는지 확인하기
터미널에서 아래 명령어를 입력했을 때 Claude가 실행되면 설치가 정상적으로 완료된 것입니다.
claude
로그인 화면이 나오거나 Claude가 실행된다면 성공입니다.
요약
Claude Code 설치
- Windows → Windows Terminal 설치 → winget install Anthropic.ClaudeCode
- Mac → 터미널에서 설치 명령어 실행
- 설치 후 claude 입력
- Claude 계정으로 로그인하면 바로 사용 가능
------------------------------------------------------------------------------------------------------------------------
2. CSS
CSS _선택자와 연결 방법
HTML이 집의 뼈대를 만드는 역할이라면, CSS는 집을 예쁘게 꾸미는 인테리어라고 생각하면 됩니다.
즉, 글자의 색을 바꾸거나, 크기를 키우고, 위치를 옮기는 등 화면을 보기 좋게 꾸며주는 언어가 CSS입니다.
🏗 HTML = 집의 뼈대 만들기
- < > 사용
- 제목, 문단, 이미지, 버튼 등을 만든다.
🎨 CSS = 집 꾸미기
- { } 사용
- 색, 크기, 위치, 여백 등을 꾸민다.
CSS는 무엇을 할 수 있을까요?
CSS를 사용하면 다음과 같은 꾸미기가 가능합니다.
- 글자 색 변경
- 글자 크기 변경
- 배경색 넣기
- 테두리 만들기
- 여백 조절하기
- 글자 가운데 정렬하기
쉽게 말하면 "웹페이지에 옷을 입혀주는 역할"이라고 생각하면 됩니다.
CSS 문법은 아주 간단합니다.
예를 들어 아래 코드를 살펴보겠습니다.
h1 {
color: red;
}
이 코드에는 3가지 중요한 요소가 있습니다.
① 선택자(Selector)
h1
누구를 꾸밀 것인지 선택하는 부분입니다.
여기서는 <h1> 태그(큰 제목)를 선택했습니다.
② 속성(Property
color
무엇을 바꿀지 정하는 부분입니다.
여기서는 글자 색(color) 을 변경합니다.
③ 값(Value)
red
속성을 어떻게 바꿀지 정하는 값입니다.
여기서는 글자를 빨간색으로 바꾸라는 의미입니다.
! 세미콜론 (;) 도 꼭 작성하세요.
color: red;
속성이 끝날 때마다 세미콜론(;) 을 붙여야 합니다.
세미콜론이 없으면 다음 코드가 제대로 실행되지 않는 경우가 있으므로 꼭 작성하는 습관을 들이는 것이 좋습니다.
CSS 파일은 따로 작성합니다.
보통 HTML 안에 CSS를 모두 작성하지 않고 별도의 파일로 관리합니다.
예를 들어 아래와 같은 구조를 많이 사용합니다.
01/
├── index.html
└── styles/
└── main.css
- index.html → 웹페이지의 내용
- main.css → 웹페이지 꾸미기
이렇게 분리하면 코드가 깔끔하고 관리하기 쉽습니다.
HTML에서 CSS 연결하기
CSS 파일을 사용하려면 HTML의 <head> 안에 아래 코드를 추가합니다.
<link rel="stylesheet" href="styles/main.css">
이 한 줄이
"main.css 파일을 불러와서 이 페이지에 적용해 주세요."
라는 의미입니다.
HTML 예제
<h1>CSS 첫걸음</h1>
<p>모든 p는 초록</p>
<p class="special">이 줄만 주황</p>
<ul>
<li>사과</li>
<li><em>바나나</em>는 보라</li>
</ul>
CSS 예제
h1 {color: red;}
p {color: green;}
.special {color: orange;}
li em {color: purple;}ㄴ선택자는 무엇일까요?
선택자는 "어떤 부분을 꾸밀지 선택하는 방법" 입니다.
가장 많이 사용하는 선택자는 3가지입니다.
1. 요소 선택자
h1 {
color: red;
}
모든 <h1> 태그에 적용됩니다.
결과
- 모든 제목이 빨간색으로 표시됩니다.
2. 클래스 선택자
HTML
<p class="special">이 줄만 주황</p>
CSS
.special {
color: orange;
}
앞에 점(.) 을 붙이면 클래스 선택자가 됩니다.
class="special"이 붙은 요소만 선택합니다.
결과
- 이 문장만 주황색으로 표시됩니다.
- 다른 <p> 태그는 영향을 받지 않습니다.
3. 자손 선택자
li em {
color: purple;
}
뜻은
li 안에 들어있는 em 태그만 선택하세요.
입니다.
예를 들어
<li><em>바나나</em>는 보라</li>
에서는 '바나나' 글자만 보라색으로 바뀝니다.
핵심
✔ HTML은 내용을 만드는 역할
✔ CSS는 화면을 꾸미는 역할
✔ 선택자는 "누구를 꾸밀지" 선택하는 방법
✔ 속성은 "무엇을 바꿀지" 정하는 것
✔ 값은 "어떻게 바꿀지" 정하는 것
✔ HTML과 CSS는 보통 별도의 파일로 작성하고 <link> 태그로 연결한다.
한 줄 요약
CSS는 "누구를 선택해서(선택자), 무엇을 어떻게 꾸밀지(속성과 값)를 정하는 언어"입니다.
HTML이 웹페이지의 뼈대라면, CSS는 그 뼈대를 보기 좋게 꾸며주는 디자인 도구라고 생각하면 이해하기 쉽습니다.
'성남 프론트엔드' 카테고리의 다른 글
| 6일차 _JavaScript 기초 (0) | 2026.07.06 |
|---|---|
| 5일차 _CSS : Position, 가상요소, CSS 리셋 (0) | 2026.07.05 |
| 4일차 _CSS : 3D카드 뒤집기 / 애니메이션 @keyframes (0) | 2026.07.02 |
| 2일차_HTML_Class , Id (0) | 2026.06.30 |
| 1일차_VS Code, HTLM (0) | 2026.06.30 |