Day 9 : 실전 프로젝트 - 나만의 소개 페이지 만들기 🚀

by달달톡 • • 2 min read

Day 9 : 실전 프로젝트 - 나만의 소개 페이지 만들기 🚀

html day9


지금까지 배운 모든 HTML 요소와 지식을 활용하여 나만의 소개 페이지를 만들어보는 시간입니다! 🎉

| 프로젝트 개요

이번 프로젝트는 지난번 배운 모든 태그와 기술을 총동원하여 자신을 소개하는 웹 페이지를 제작하는 것입니다. 개인 정보, 기술 스킬, 관심사, 연락처 등을 포함한 완성도 높은 페이지를 만들어봅니다.

| 완성된 코드 예제

아래는 소개 페이지의 전체 HTML 코드입니다. 각 부분에 대한 설명은 코드 다음에 이어집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>홍길동의 포트폴리오</title>
    <meta name="description" content="웹 개발자 홍길동의 포트폴리오 및 소개 페이지입니다.">
    <style>
        /* 기본 스타일 */
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            color: #333;
            background-color: #f9f9f9;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 헤더 스타일 */
        header {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 40px 0;
        }
        
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
        }
        
        nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
        }
        
        nav li {
            margin: 0 15px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        
        nav a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* 섹션 스타일 */
        section {
            padding: 50px 0;
        }
        
        section h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        /* 소개 섹션 */
        #about {
            background-color: white;
        }
        
        /* 기술 스킬 섹션 */
        .skills-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 20px;
        }
        
        .skill {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            width: 250px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        progress {
            width: 100%;
            height: 20px;
        }
        
        /* 프로젝트 섹션 */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .project {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .project img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .project-info {
            padding: 20px;
        }
        
        .btn {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            margin-top: 10px;
        }
        
        /* 연락처 섹션 */
        #contact {
            background-color: white;
        }
        
        form {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        button {
            background-color: #2c3e50;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 20px;
        }
        
        .social-links a {
            color: #2c3e50;
            text-decoration: none;
            font-weight: bold;
        }
        
        /* 푸터 스타일 */
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <!-- 헤더 섹션 -->
    <header>
        <div class="container">
            <img src="profile.jpg" alt="홍길동의 프로필 사진" class="profile-img">
            <h1>홍길동</h1>
            <p>웹 개발자 | HTML 열정가</p>
            <nav>
                <ul>
                    <li><a href="#about">소개</a></li>
                    <li><a href="#skills">기술</a></li>
                    <li><a href="#projects">프로젝트</a></li>
                    <li><a href="#contact">연락처</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 소개 섹션 -->
    <section id="about">
        <div class="container">
            <h2>👋 안녕하세요!</h2>
            <article>
                <p>저는 <strong>웹 개발</strong>에 열정이 있는 신입 개발자 홍길동입니다. HTML, CSS, JavaScript를 공부하고 있으며, 사용자 친화적인 웹사이트 제작에 관심이 많습니다.</p>
                
                <h3>📚 학력</h3>
                <ul>
                    <li>웹 개발 아카데미 수료 (2024-2025)</li>
                    <li>OO대학교 컴퓨터공학과 졸업 (2023)</li>
                </ul>
                
                <h3>🌟 관심 분야</h3>
                <ul>
                    <li>반응형 웹 디자인</li>
                    <li>웹 접근성</li>
                    <li>모던 프론트엔드 프레임워크</li>
                </ul>
            </article>
        </div>
    </section>

    <!-- 기술 스킬 섹션 -->
    <section id="skills">
        <div class="container">
            <h2>🛠️ 기술 스킬</h2>
            <div class="skills-container">
                <div class="skill">
                    <h3>HTML5</h3>
                    <progress value="90" max="100"></progress>
                    <span>90%</span>
                    <p>시맨틱 태그, 폼, 미디어 요소 활용</p>
                </div>
                
                <div class="skill">
                    <h3>CSS3</h3>
                    <progress value="75" max="100"></progress>
                    <span>75%</span>
                    <p>반응형 디자인, Flexbox, Grid</p>
                </div>
                
                <div class="skill">
                    <h3>JavaScript</h3>
                    <progress value="60" max="100"></progress>
                    <span>60%</span>
                    <p>기본 DOM 조작, 이벤트 처리</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 프로젝트 섹션 -->
    <section id="projects">
        <div class="container">
            <h2>📂 프로젝트</h2>
            <div class="projects-grid">
                <article class="project">
                    <img src="blog-project.jpg" alt="블로그 프로젝트 스크린샷">
                    <div class="project-info">
                        <h3>개인 블로그</h3>
                        <p>HTML, CSS를 활용한 반응형 블로그 템플릿</p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
                
                <article class="project">
                    <img src="resume-project.jpg" alt="이력서 프로젝트 스크린샷">
                    <div class="project-info">
                        <h3>온라인 이력서</h3>
                        <p>구직에 활용할 수 있는 온라인 이력서 페이지</p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
                
                <article class="project">
                    <img src="gallery-project.jpg" alt="갤러리 프로젝트 스크린샷">
                    <div class="project-info">
                        <h3>사진 갤러리</h3>
                        <p>HTML 그리드를 활용한 반응형 이미지 갤러리</p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- 연락처 섹션 -->
    <section id="contact">
        <div class="container">
            <h2>📱 연락처</h2>
            <form action="submit_form.php" method="post">
                <div class="form-group">
                    <label for="name">이름:</label>
                    <input type="text" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="email">이메일:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <label for="message">메시지:</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                
                <button type="submit">메시지 보내기</button>
            </form>
            
            <div class="social-links">
                <a href="mailto:test@example.com">이메일</a>
            </div>
        </div>
    </section>

    <!-- 푸터 섹션 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 홍길동. All rights reserved.</p>
            <p>이 페이지는 HTML 완성 시리즈의 최종 프로젝트로 제작되었습니다.</p>
        </div>
    </footer>
</body>
</html>

결과화면
html 예제

| 코드 상세 설명

1️⃣ 문서 설정과 메타데이터

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>홍길동의 포트폴리오</title>
    <meta name="description" content="웹 개발자 홍길동의 포트폴리오 및 소개 페이지입니다.">
    <!-- 스타일 코드... -->
</head>

이 부분은 웹 페이지의 기본 설정과 메타데이터를 정의합니다:

  • <!DOCTYPE html>: HTML5 문서임을 선언
  • lang="ko": 한국어 페이지임을 명시 (검색 엔진과 스크린 리더에 중요)
  • meta charset: 문자 인코딩 설정
  • meta viewport: 모바일 기기에서의 화면 최적화
  • title: 페이지 제목 (검색 결과, 브라우저 탭에 표시)
  • meta description: 페이지 설명 (검색 결과에 표시)

2️⃣ 헤더 섹션

<header>
    <div class="container">
        <img src="profile.jpg" alt="김코딩의 프로필 사진" class="profile-img">
        <h1>홍길</h1>
        <p>웹 개발자 | HTML 열정가</p>
        <nav>
            <ul>
                <li><a href="#about">소개</a></li>
                <li><a href="#skills">기술</a></li>
                <li><a href="#projects">프로젝트</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </div>
</header>

헤더 섹션에는:

  • 프로필 이미지 (<img> 태그와 alt 속성으로 접근성 향상)
  • 이름 (<h1> 태그로 페이지의 주요 제목 표시)
  • 짧은 소개 (<p> 태그 사용)
  • 내비게이션 메뉴 (<nav>, <ul>, <li>, <a> 태그로 구성)

앵커 링크(href="#id")를 사용하여 페이지 내 다른 섹션으로 빠르게 이동할 수 있게 했습니다.

3️⃣ 소개 섹션

<section id="about">
    <div class="container">
        <h2>👋 안녕하세요!</h2>
        <article>
            <p>저는 <strong>웹 개발</strong>에 열정이 있는 신입 개발자 김코딩입니다.</p>
            <!-- 학력 및 관심 분야 -->
        </article>
    </div>
</section>

소개 섹션에서는:

  • <section> 태그와 id 속성으로 페이지의 구조적 영역 정의
  • <article> 태그로 독립적인 콘텐츠 블록 표시
  • <strong> 태그로 중요 키워드 강조
  • <ul> 및 <li> 태그로 목록 형태의 정보 제공

4️⃣ 기술 스킬 섹션

<section id="skills">
    <div class="container">
        <h2>🛠️ 기술 스킬</h2>
        <div class="skills-container">
            <div class="skill">
                <h3>HTML5</h3>
                <progress value="90" max="100"></progress>
                <span>90%</span>
                <p>시맨틱 태그, 폼, 미디어 요소 활용</p>
            </div>
            <!-- 다른 기술 스킬들 -->
        </div>
    </div>
</section>

기술 스킬 섹션의 특징:

  • <progress> 태그: HTML5에서 도입된 태그로 수치를 시각적으로 표현
  • value와 max 속성으로 진행률 설정
  • 요소들을 <div>로 그룹화하여 스타일링 용이하게 함

5️⃣ 프로젝트 섹션

<section id="projects">
    <div class="container">
        <h2>📂 프로젝트</h2>
        <div class="projects-grid">
            <article class="project">
                <img src="blog-project.jpg" alt="블로그 프로젝트 스크린샷">
                <div class="project-info">
                    <h3>개인 블로그</h3>
                    <p>HTML, CSS를 활용한 반응형 블로그 템플릿</p>
                    <a href="#" class="btn">자세히 보기</a>
                </div>
            </article>
            <!-- 다른 프로젝트들 -->
        </div>
    </div>
</section>

프로젝트 섹션에서는:

  • 각 프로젝트를 <article> 태그로 표현하여 독립적인 콘텐츠임을 명시
  • 그리드 레이아웃을 위한 컨테이너 구조
  • 이미지와 텍스트 정보 조합
  • <a> 태그에 클래스를 적용하여 버튼 스타일링

6️⃣ 연락처 섹션

<section id="contact">
    <div class="container">
        <h2>📱 연락처</h2>
        <form action="submit_form.php" method="post">
            <!-- 폼 요소들 -->
            <button type="submit">메시지 보내기</button>
        </form>
        
        <div class="social-links">
            <!-- 다른 소셜 링크들 -->
        </div>
    </div>
</section>

연락처 섹션의 주요 요소:

  • <form> 태그로 사용자 입력 양식 생성
  • action 속성으로 폼 제출 위치 지정, method로 전송 방식 결정
  • <input>, <textarea> 태그로 다양한 입력 필드 생성
  • required 속성으로 필수 입력 필드 표시
  • target="_blank" 속성으로 새 탭에서 링크 열기

7️⃣ 푸터 섹션

<footer>
    <div class="container">
        <p>&copy; 2025 홍길동. All rights reserved.</p>
        <p>이 페이지는 HTML 10일 완성 시리즈의 최종 프로젝트로 제작되었습니다.</p>
    </div>
</footer>

푸터 섹션:

  • <footer> 시맨틱 태그로 페이지의 하단 영역 명시
  • 저작권 정보와 추가 정보 포함

| Q&A

Q1: 내비게이션 메뉴의 링크가 작동하지 않아요.

A1: 앵커 링크(href="#about")는 같은 페이지 내 id="about"인 요소로 이동합니다. 각 섹션에 올바른 id 속성이 있는지 확인하세요.

Q2: 이미지가 표시되지 않습니다.

A2: 이미지 경로가 올바른지 확인하세요. 예제에서는 "profile.jpg"와 같은 파일명을 사용했는데, 실제 파일이 같은 폴더에 있어야 합니다.

Q3: 폼을 제출했는데 작동하지 않습니다.

A3: 예제의 action="submit_form.php"는 실제 서버 측 스크립트가 필요합니다. 서버 스크립트 없이 테스트하려면 action 속성을 비워두거나 JavaScript로 폼 제출을 처리하세요.

Q4: 스타일이 예제와 다르게 보입니다.

A4: CSS는 브라우저마다 약간씩 다르게 렌더링될 수 있습니다. 또한 사용 중인 브라우저 버전에 따라 일부 속성이 지원되지 않을 수 있습니다.

Q5: 프로젝트를 더 발전시키려면 어떻게 해야 할까요?

A5: JavaScript를 추가하여 동적 기능을 구현하거나, CSS 애니메이션을 적용하여 시각적 효과를 높이고, 반응형 디자인을 더욱 세밀하게 조정할 수 있습니다.

#HTML #포트폴리오 #웹개발 #시맨틱마크업 #반응형디자인 #HTML폼 #it기초 #html기초 #웹페이지기초 #웹페이지제작

4.94 / 169 rates
달달톡

달달톡 (DALDAL TALK) |
IT & Tech 블로그
궁금한 IT 소식, 미래 기술 이야기, 그리고 프로그래밍 등 가볍게 읽을 수 있는 최신 테크 트렌드를 만나보세요.

AI, 개발, IT 트렌드에 관심 있다면?
달달톡에서 달달하게 함께 이야기해요! ☕

다음 이전

POST ADS1

POST ADS 2