다른 페이지로 이동.

→ AI에게: “이 텍스트를 클릭하면 example.com으로 가도록 해줄래”

8.

,
• : 목록

• 글머리 기호 목록 (bullet points)

예:
– 사과
– 바나나
– 오렌지

9.

: 폼

여러 입력 요소를 묶어서, “제출” 버튼과 함께 처리.

10.

,

• header: 상단 (로고, 네비게이션)
• nav: 메뉴
• footer: 하단 (연락처, 저작권)

→ AI에게: “상단에 헤더를 추가해줄래. 로고와 메뉴가 있어야 해”

CSS 필수 개념 5개

CSS는 “웹페이지의 색칠”입니다.

1. 색상

• 배경색: background-color
• 글자색: color

→ AI에게: “배경색을 파란색 (#3498db)으로 바꿔줄래”

2. 크기

• 너비: width
• 높이: height
• 여백 안쪽: padding
• 여백 바깥쪽: margin

→ AI에게: “이 박스를 200px 넓게 해줄래”

3. 배치 (Flexbox)

요소들을 가로/세로로 정렬.

→ AI에게: “카드들을 가로로 3개씩 배열해줄래”

4. 폰트

• 크기: font-size
• 모양: font-family
• 굵기: font-weight

→ AI에게: “제목을 20px, 굵게 해줄래”

5. 반응형 (모바일)

화면 크기에 따라 자동으로 조정.

→ AI에게: “모바일에서도 깔끔하게 보이도록 반응형으로 만들어줄래”

AI에게 명확하게 말하기

나쁜 설명

“웹사이트를 예쁘게 만들어줄래”

→ “예쁘다”는 주관적. AI가 뭘 원하는지 몰라서 추측만 함.

좋은 설명

“헤더에 파란색 배경을 깔고, 가운데 흰색 글씨로 로고를 넣고, 우측에 네비게이션 메뉴를 가로로 배열해줄래. 모바일에서는 메뉴가 접혔다 펼쳐지도록”

→ 정확함. AI가 정확하게 구현 가능.

태그 vs 클래스 vs ID

태그: 요소의 종류

<p>단락</p>
<button>버튼</button>

클래스: 여러 요소에 같은 스타일

<div class="card">카드 1</div>
<div class="card">카드 2</div>

→ AI에게: “class=’card’인 모든 박스에 음영 효과를 주고, 테두리를 둥글게 해줄래”

ID: 유일한 요소

<div id="header">헤더</div>

→ 거의 안 쓰므로 무시해도 됨.

자주 하는 질문

Q: 모든 HTML을 외워야 하나?

A: 아니요. 10개 태그만 알면 충분. 나머지는 필요할 때 AI가 알려줍니다.

Q: CSS의 “Flexbox” “Grid”는?

A: 고급 개념. AI가 자동으로 처리. 당신은 “가로로 배열해줄래” 말하면 됨.

Q: 코드를 수정할 수 있어야 하나?

A: 아니요. 하지만 “폰트 크기 20px” “색상 파란색” 같은 수치를 알면, AI에게 더 명확하게 말할 수 있습니다.

실제 사용 사례

사례 1: 포트폴리오 웹사이트

당신: “포트폴리오 웹사이트를 만들어줄래?
– 상단: h1으로 이름, p로 소개글
– 중간: 프로젝트를 div 박스 3개, 가로로 배열
– 하단: footer에 연락처”

→ AI가 완벽하게 구현

사례 2: 사진 갤러리

당신: “사진 갤러리를 만들어줄래?
– img 태그로 사진 표시
– 가로로 4개씩 배열 (Flexbox)
– 마우스 호버하면 커지도록”

→ AI가 “이건 Flexbox와 CSS hover 효과가 필요해” 알아서 처리

CSS 색상 코드

자주 쓰는 색상의 코드 (HEX):

→ AI에게: “배경을 #3498db으로 바꿔줄래”

단위 이해하기

px (픽셀)

화면의 가장 작은 단위.
– 20px = 약 5mm
– 보통 p 태그: 16px
– 제목 h1: 32px 이상

%

부모 요소의 비율.
– width: 100% = 부모 너비와 같음
– width: 50% = 부모의 절반

다음 단계

이 10개 태그 + 5개 개념만으로:

1. Claude Code에 명확하게 요청하기
2. AI가 만든 코드 이해하기 (수정 시)
3. 피드백 전달하기

“앗, 아이콘이 너무 커” → “img 태그의 width를 16px으로 줄여줄래”

완벽한 이해가 아니어도 괜찮습니다.
당신은 설계자입니다. AI는 개발자입니다.

더 궁금한 게 있으신가요?
바이브코딩·AI 활용에 대해 직접 소통하고 싶다면 아래로 연락 주세요.