[5강] 실전! HTML로 만드는 나만의 미니 포트폴리오
"배운 모든 기술을 하나로! 나만의 첫 웹페이지를 완성해봅시다."
안녕하세요! 드디어 HTML 기초 연재의 마지막 시간입니다. 그동안 배운 기본 구조, 시맨틱 태그, 멀티미디어, 그리고 Form까지 모두 활용하여 간단하지만 멋진 '나만의 포트폴리오' 페이지를 만들어 보겠습니다.
1. 포트폴리오 설계하기
우리가 만들 페이지는 다음과 같은 구조를 가집니다.
📍 상단(Header): 이름과 간단한 메뉴
📍 본문(Main): 자기소개, 이미지, 기술 스택 목록
📍 연락처(Section): 문의하기 폼
📍 하단(Footer): 저작권 정보
2. 전체 코드 (실습)
아래 코드를 모두 복사해서 새 HTML 파일로 저장한 뒤 브라우저로 열어보세요. 여러분의 정보를 넣어 수정하면 더욱 좋습니다!
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>김철수의 포트폴리오</title> </head> <body> <!-- 헤더: 사이트의 제목과 내비게이션 --> <header> <h1>Welcome to My Space</h1> <nav> <a href="#about">소개</a> | <a href="#contact">연락처</a> </nav> </header> <hr> <!-- 메인: 핵심 콘텐츠 --> <main id="about"> <section> <h2>About Me</h2> <img src="profile.jpg" alt="내 프로필 사진" width="200"> <p>안녕하세요! 웹 개발을 공부하고 있는 <strong>김철수</strong>입니다.</p> </section> <section> <h3>My Skills</h3> <ul> <li>HTML5 구조 설계</li> <li>시맨틱 마크업</li> <li>기초 웹 접근성</li> </ul> </section> </main> <hr> <!-- 연락처 섹션 --> <section id="contact"> <h2>Contact Me</h2> <form> <label>이름: <input type="text" name="name"></label><br><br> <label>메시지: <br> <textarea name="message" rows="4" cols="30"></textarea> </label><br> <button type="submit">보내기</button> </form> </section> <!-- 푸터 --> <footer> <p>© 2024 Chulsoo Kim. All rights reserved.</p> </footer> </body> </html>
축하합니다! HTML 기초 완강!
이제 여러분은 웹의 구조를 스스로 설계할 수 있는 기초 체력을 길렀습니다.
'Frontend > HTML' 카테고리의 다른 글
| [4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0) | 2026.02.09 |
|---|---|
| [3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0) | 2026.02.09 |
| [2강]검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법 (0) | 2026.02.09 |
| [1강]웹 개발의 첫걸음! HTML 개념 이해와 기본 구조 마스터하기 (0) | 2026.02.09 |