[AI 활용법] 코딩 몰라도 챗GPT로 개인 웹페이지 만들기 (2) HTML 웹페이지로 저장하는 법

카테고리 없음

[AI 활용법] 코딩 몰라도 챗GPT로 개인 웹페이지 만들기 (2) HTML 웹페이지로 저장하는 법

AI 머니 2024. 7. 16. 10:00

지난 글에서는 챗GPT로 온라인 이력서를 웹페이지로 만들 수 있는 html 소스를 만들어 보았는데요. (아래 이전 발행글 참고)

[AI 활용법] 코딩 몰라도 챗GPT로 개인 웹페이지 만들기 (1) 온라인 이력서

오늘은 챗GPT로 포트폴리오나, 개인 블로그, 온라인 이력서 등을 간단한 웹페이지 형태로 만드는 법을 소개할게요.먼저 웹페이지는 html 파일로 만들어 볼 건데요. html 코드를 몰라도 ChatGPT와 대

jobpro.tistory.com

오늘은 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 코드를 웹 페이지로 확인할 수 있어요.
참 쉽죠? ^^

비록 아주 간단한 웹페이지지만 챗gpt를 활용해서 1분 만에 온라인 프로필 페이지를 만들 수 있었는데요.
여러분들도 한번 따라 해 보세요!

웹에 대해 왕초보자도 이런 과정을 통해서 '웹페이지가 이렇게 만들어지는구나' 정도는 경험하게 되실 거예요.

그럼, 다음에는 이렇게 만든 웹페이지를 도메인 주소와 연결하는 방법에 대해 소개해 보도록 하겠습니다.

오늘도 슬기로운 AI 생활로 행복하세요.

감사합니다.

AI를 활용해서 무료 음악을 어떻게 만들 수 있는지 알아볼게요. 바로 수노 (Suno)란 AI 무료 음악 생성 사이트를 이용하면 되는데요.회원가입부터 사용방법까지 차근차근 소개해 드릴게요. 추가로

jobpro.tistory.com

유용한 무료 AI 인공지능 서비스 5가지 - AI 활용법 꿀팁 모음

대학생과 직장인은 물론 일반인들도 누구나 유용하게 사용할 수 있는 무료 AI 인공지능 서비스 5가지를 소개해 볼게요. 1. 헤이젠 : 다양한 언어로의 비디오 번역2. 릴리스 AI : 영상, 웹사이

jobpro.tistory.com

업무시간 줄여주는 유용한 무료 웹사이트

전문가가 아니더라도 전문가에게 맡긴 듯~퀄리티까지 높여주는 결과물을 만들 수 있고 북마크에 추가해 놓고 언제든 유용하게 활용하실 수 있는유용한 무료 웹사이트에 대해서 소개하겠습니다

jobpro.tistory.com

챗GPT와 AI로 스토리 글쓰기와 이미지, 영상 만드는 법

챗GPT로 스토리 제조 후 이미지를 생성해 보았는데요.챗GPT에게 4가지 키워드 '사랑, 죽음, 배신, 돈'으로 스토리를 만들어 달라고 한 후스토리에 맞는 이미지를 GPTs를 불러서 만들었고요. 생성된

jobpro.tistory.com

기획이란 무엇인가? 당신에게 기획력이 필요한 이유는? (feat. 챗GPT)

오늘은 '기획이란 무엇인지, 기획력이 왜 필요한지'에 대해서 가볍게 포스팅해 보려고 해요. 아래의 블로그 내용은 'AI로 블로그 책쓰기 GPTs' (https://chatgpt.com/g/g-VLerXOTWl-ai-beulrogeu-caegsseugi)를 불러

jobpro.tistory.com

[AI 활용법] 코딩 몰라도 챗GPT로 개인 웹페이지 만들기 (1) 온라인 이력서

jobpro.tistory.com

현재글[AI 활용법] 코딩 몰라도 챗GPT로 개인 웹페이지 만들기 (2) HTML 웹페이지로 저장하는 법

AI가 머니? 오늘 읽는 AI 요약zip~ 이 세상 AI 머니크래프트=AI로 돈버는 기술에 대해 오늘도 연구합니다~ 💸😁💰

AI 머니크래프트, AI가 머니?~♥

[AI 활용법] 코딩 몰라도 챗GPT로 개인 웹페이지 만들기 (2) HTML 웹페이지로 저장하는 법

■ 함께 보면 좋은 글

'카테고리 없음'의 다른글

티스토리툴바