Cursor로 HTML 페이지 만들기

이제 Cursor AI의 도움을 받아 실제 웹 페이지를 만들어봅시다!

프로젝트 폴더 만들기

컴퓨터에 새 폴더 만들기 (예: my-website)
Cursor 실행
File > Open Folder 클릭
방금 만든 폴더 선택

AI에게 페이지 만들어 달라고 하기

Ctrl + L (AI 채팅 열기)
다음처럼 요청하기:

자기소개 웹페이지 만들어줘.
포함할 내용:
- 이름
- 사진 (플레이스홀더 이미지 사용)
- 간단한 자기소개 (3-4줄)
- 좋아하는 것 3가지 (리스트로)
- 이메일 주소
- 소셜 미디어 링크 (GitHub, LinkedIn)

디자인:
- 깔끔하고 현대적인 느낌
- 중앙 정렬
- 파스텔 톤 색상
- 반응형 (모바일에서도 잘 보이게)

AI가 생성한 코드를 복사

파일 만들고 코드 붙여넣기

탐색기에서 우클릭 > “New File”
파일명: index.html
AI가 준 코드를 붙여넣기
Ctrl + S로 저장

브라우저에서 열어보기

Windows

파일 탐색기에서 index.html 찾기
파일을 더블클릭

Mac

Finder에서 index.html 찾기
파일을 더블클릭

AI로 수정하기

페이지가 마음에 안 드나요? AI에게 수정 요청하세요!

색상 변경

배경색을 연한 파란색으로 바꿔줘

레이아웃 변경

사진을 왼쪽에, 텍스트를 오른쪽에 배치해줘

애니메이션 추가

페이지 로드 시 부드럽게 나타나는 효과 추가해줘

실전 예제: 회사 소개 페이지

AI에게 이렇게 요청해보세요:

맑은소프트 회사 소개 페이지 만들어줘.

섹션:
1. 헤더
   - 회사 로고 (텍스트로)
   - 네비게이션 (회사소개, 서비스, 연락처)

2. 메인 배너
   - "혁신적인 소프트웨어 솔루션"
   - 간단한 설명 문구
   - "자세히 보기" 버튼

3. 서비스 카드 3개
   - 웹 개발
   - 모바일 앱
   - 클라우드 솔루션

4. 푸터
   - 연락처 정보
   - 소셜 미디어 아이콘

디자인:
- 전문적이고 깔끔한 느낌
- 파란색 계열
- 그림자 효과
- 반응형

팁: 단계별로 만들기

복잡한 페이지는 한 번에 요청하지 말고 단계별로:

1단계: HTML 구조만

회사 소개 페이지의 HTML 구조만 만들어줘.
섹션: 헤더, 메인, 서비스, 푸터

2단계: CSS 추가

방금 만든 HTML에 CSS 추가해줘.
파란색 계열, 현대적인 느낌

3단계: 반응형 추가

모바일에서도 잘 보이게 반응형으로 만들어줘

흔한 문제 해결

한글이 깨져요

파일 인코딩을 UTF-8로 설정하거나, HTML에 이 줄을 추가:

<meta charset="UTF-8">

이미지가 안 보여요

이미지 파일이 HTML 파일과 같은 폴더에 있는지 확인하거나, 임시로 플레이스홀더 이미지 사용:

<img src="https://via.placeholder.com/300" alt="이미지">

CSS가 적용 안 돼요

브라우저 새로고침 (F5 또는 Ctrl+R)

이미지와 링크 추가하기

이미지 추가 방법

AI에게 이렇게 요청하세요:

이미지를 추가하고 싶어.

1. 온라인 이미지 사용 (https://via.placeholder.com/400x300)
2. 이미지 위에 텍스트 오버레이 효과
3. 마우스 오버 시 확대 효과
4. 이미지 밑에 설명 텍스트

코드를 보여줘.

내 컴퓨터 이미지 사용하기:

내 컴퓨터에 있는 이미지를 사용하고 싶어.
images 폴더에 profile.jpg 파일이 있어.
어떻게 HTML에 추가해?

링크 추가 방법

AI에게 이렇게 요청하세요:

다음 링크들을 버튼 형태로 추가해줘:

- GitHub: https://github.com/myname
- LinkedIn: https://linkedin.com/in/myname
- Email: mailto:name@email.com

디자인:
- 버튼 형태
- 아이콘 포함 (Font Awesome 사용)
- 호버 시 색상 변경
- 새 탭에서 열기

페이지 내 이동 링크:

같은 페이지 내에서 섹션 이동하는 링크 만들어줘.
클릭하면 부드럽게 스크롤되게.

링크:
- "서비스 보기" 버튼 → 서비스 섹션으로
- "연락하기" 버튼 → 연락처 섹션으로

JavaScript로 페이지에 기능 추가하기

이제 페이지에 동작을 추가해봅시다! 버튼을 클릭하면 뭔가 일어나게 만들어보세요.

버튼 클릭하면 텍스트 바꾸기

AI에게 이렇게 요청하세요:

버튼을 클릭하면 텍스트가 바뀌는 기능을 만들어줘.

버튼: "클릭하세요"
텍스트: 처음엔 "안녕하세요"
클릭 후: "반갑습니다!"

HTML과 JavaScript 코드 모두 보여줘.

숫자 카운터 만들기

버튼을 클릭할 때마다 숫자가 1씩 증가하는 카운터를 만들어줘.

- 현재 숫자 표시
- + 버튼 (증가)
- - 버튼 (감소)
- 리셋 버튼

깔끔한 디자인으로.

입력한 이름으로 인사하기

입력창에 이름을 입력하고 버튼을 누르면
"안녕하세요, [이름]님!" 이라고 표시되게 해줘.

- 입력창
- 버튼
- 인사 메시지 영역

이름을 입력하지 않으면 "이름을 입력하세요" 알림 띄워줘.

JSON으로 데이터 관리하기

여러 개의 정보를 보여줄 때는 JSON을 사용하면 편리합니다.

직원 목록 만들기

1단계: JSON 파일 만들기

AI에게 요청:

employees.json 파일을 만들어줘.

직원 3명의 정보:
- 이름
- 직책
- 이메일

JSON 형식으로.

2단계: 웹페이지에 표시하기

방금 만든 employees.json 파일을 읽어서
웹페이지에 카드 형태로 표시해줘.

각 카드에:
- 이름 (큰 글씨)
- 직책
- 이메일

3개가 가로로 나란히 배치되게.

제품 목록 만들기

products.json 파일을 만들고 웹페이지에 표시해줘.

제품 5개:
- 제품명
- 가격
- 이미지 (플레이스홀더 사용)
- 설명

그리드 레이아웃으로 보기 좋게 배치해줘.

실전 예제: 간단한 할일 목록

모든 것을 결합해서 할일 목록을 만들어봅시다.

Cursor에게 요청:

할일 목록(Todo List) 만들어줘.

기능:
1. 입력창에 할일 입력
2. "추가" 버튼 클릭하면 목록에 추가
3. 각 할일 옆에 "삭제" 버튼
4. 삭제 버튼 클릭하면 목록에서 제거

디자인:
- 깔끔한 카드 형태
- 파스텔 톤 색상
- 부드러운 애니메이션

HTML, CSS, JavaScript 모두 포함해서 작성해줘.

팁: 단계적으로 기능 추가하기

복잡한 기능은 한 번에 만들지 말고 단계별로:

1단계:
"버튼 클릭하면 alert 띄우는 코드만 만들어줘"

2단계:
"이제 alert 대신 페이지에 텍스트로 표시되게 바꿔줘"

3단계:
"텍스트에 애니메이션 효과 추가해줘"

4단계:
"CSS로 예쁘게 꾸며줘"

다음 단계

축하합니다! HTML, CSS, JavaScript, JSON을 모두 사용해서 웹페이지를 만들 수 있게 되었습니다. 이제 이 페이지를 인터넷에 배포해봅시다!