지난 글에서는 챗GPT로 온라인 이력서를 웹페이지로 만들 수 있는 html 소스를 만들어 보았는데요. (아래 이전 발행글 참고)
[AI 활용법] 챗GPT로 개인 웹페이지 만들기 (1) 온라인 이력서
오늘은 html 소스를 간단하게 웹페이지로 만드는 방법에 대해 알아보겠습니다.
먼저 이전 발행글에서 챗GPT를 통해 생성한 html 소스를 아래와 같이 붙여 넣기를 해 보겠습니다.
챗GPT에게 경력, 프로젝트 중심의 기획자 이력서를 만들어 달라고 요청해서 나온 html 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이력서</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
background-color: #007bff;
color: white;
padding: 20px 0;
text-align: center;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.section {
background: white;
margin: 20px 0;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
color: #007bff;
}
ul {
list-style: none;
padding: 0;
}
ul li {
padding: 10px 0;
}
.contact-info {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.contact-info div {
flex: 1;
}
.contact-info div:first-child {
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<h1>기획자 이력서</h1>
</header>
<div class="container">
<section class="section">
<h2>소개</h2>
<p>안녕하세요! 저는 기획자로서 다양한 프로젝트를 성공적으로 이끌어온 경험이 있습니다. 창의적인 문제 해결과 효율적인 팀 협업을 통해 뛰어난 성과를 달성했습니다.</p>
</section>
<section class="section">
<h2>경력</h2>
<ul>
<li>
<h3>회사 A (20XX-20XX)</h3>
<p>프로젝트 매니저로서 다양한 프로젝트를 기획 및 관리. 주요 성과로는 XYZ 프로젝트 성공적 완료.</p>
</li>
<li>
<h3>회사 B (20XX-20XX)</h3>
<p>시니어 기획자로서 팀 리드 및 신규 사업 기획. ABC 프로젝트에서 주요 역할 수행.</p>
</li>
</ul>
</section>
<section class="section">
<h2>프로젝트</h2>
<ul>
<li>
<h3>프로젝트 1</h3>
<p>XYZ 프로젝트는 기획 단계부터 출시까지 전 과정을 총괄. 사용자 요구 분석 및 기능 기획.</p>
</li>
<li>
<h3>프로젝트 2</h3>
<p>ABC 프로젝트에서는 프로젝트 매니저로서 팀을 이끌며 주요 기능을 기획 및 구현.</p>
</li>
</ul>
</section>
<section class="section">
<h2>연락처</h2>
<div class="contact-info">
<div>
<h3>Email</h3>
<p>your.email@example.com</p>
</div>
<div>
<h3>Phone</h3>
<p>010-1234-5678</p>
</div>
<div>
<h3>LinkedIn</h3>
<p><a href="https://linkedin.com/in/yourprofile" target="_blank">linkedin.com/in/yourprofile</a></p>
</div>
</div>
</section>
</div>
</body>
</html>
이 코드를 복사해어 HTML 파일로 저장하면 웹 브라우저에서 개인 웹페이지로 확인할 수 있는데요.
웹페이지로 저장하는 방법은 다음과 같습니다.
1. 텍스트 편집기 열기
- 메모장(Notepad), VS Code, Sublime Text, Atom 등 텍스트 편집기를 엽니다.
2. 코드 복사 및 붙여넣기
- 제공된 HTML 코드를 텍스트 편집기에 복사하여 붙여넣습니다.
3. 파일로 저장하기
- 파일 이름을 `index.html`로 지정합니다.
- 파일 형식을 "모든 파일" 또는 "All Files"로 선택합니다.
- 인코딩을 "UTF-8"로 선택합니다.
- 저장 위치를 원하는 폴더에 지정합니다.
※ 예시 (메모장을 사용하는 경우)
- 파일 메뉴에서 "다른 이름으로 저장(Save As)"을 클릭합니다.
- 파일 이름을 `index.html`로 입력합니다.
- 파일 형식을 "모든 파일"로 선택합니다.
- 인코딩을 "UTF-8"로 선택합니다.
- 저장 버튼을 클릭합니다.
4. 웹 브라우저에서 열기
- 저장한 `index.html` 파일을 찾아 더블 클릭하거나, 웹 브라우저 창으로 드래그 앤 드롭합니다.
- 웹 브라우저에서 파일이 열리며 웹 페이지가 표시됩니다.
이 단계를 따라 하시면 작성된 HTML 코드를 웹 페이지로 확인할 수 있어요.
참 쉽죠? ^^
다음에는 HTMl 파일을 웹페이지 주소와 연결하기 위한 방법에 대하 소개하겠습니다.
오늘도 슬기로운 AI 생활로 행복하세요.
감사합니다.