반응형
웹 개발자로 취업을 준비하거나 프리랜서로 일하려면 **포트폴리오 웹사이트**가 필수입니다. 이 글에서는 HTML, CSS, JavaScript를 사용하여 깔끔한 포트폴리오 사이트를 만들고, **GitHub Pages**에 배포하는 방법까지 정리하겠습니다.
1. 웹 개발 포트폴리오란?
포트폴리오 웹사이트는 자신이 개발한 프로젝트, 기술 스택, 이력 등을 정리하여 보여주는 사이트입니다.
📌 필수 포함 요소
- 👤 소개 - 자기소개 및 연락처
- 💻 기술 스택 - 사용 가능한 프로그래밍 언어 및 툴
- 📂 프로젝트 - 대표적인 작업물 소개
- 📞 연락처 - 이메일, GitHub, LinkedIn 링크
2. 기본 HTML & CSS 템플릿 만들기
📌 프로젝트 폴더 구조
portfolio/
│── index.html
│── style.css
│── script.js
│── images/
📌 index.html (포트폴리오 메인 페이지)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포트폴리오 - 홍길동</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>홍길동의 포트폴리오</h1>
<p>웹 개발자 | 프론트엔드 | 백엔드</p>
</header>
<section id="about">
<h2>소개</h2>
<p>안녕하세요! 저는 창의적인 웹 개발을 좋아하는 개발자입니다.</p>
</section>
<section id="skills">
<h2>기술 스택</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>React, Node.js, Express</li>
<li>MongoDB, MySQL</li>
</ul>
</section>
<section id="projects">
<h2>프로젝트</h2>
<div class="project">
<h3>📌 쇼핑몰 웹사이트</h3>
<p>React와 Node.js를 사용하여 만든 프로젝트</p>
<a href="#" target="_blank">GitHub 보기</a>
</div>
</section>
<section id="contact">
<h2>연락하기</h2>
<p>📧 이메일: myemail@example.com</p>
<p>💻 GitHub: <a href="https://github.com/mygithub" target="_blank">mygithub</a></p>
</section>
</body>
</html>
📌 style.css (포트폴리오 디자인 적용)
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
header {
background: #333;
color: white;
padding: 20px;
}
h1 {
margin: 0;
}
section {
padding: 20px;
border-bottom: 1px solid #ddd;
}
.project {
background: #f9f9f9;
padding: 15px;
margin: 10px;
border-radius: 5px;
}
3. 포트폴리오 사이트를 GitHub Pages에 배포하기
📌 GitHub에 업로드
git init
git add .
git commit -m "포트폴리오 초기 설정"
git branch -M main
git remote add origin https://github.com/사용자명/포트폴리오.git
git push -u origin main
📌 GitHub Pages 활성화
- GitHub 저장소로 이동
- Settings → Pages 선택
- Branch에서
main선택 후 저장 - 배포된 URL 확인 후 접속
4. 마무리
이번 글에서는 웹 개발자를 위한 포트폴리오 사이트를 제작하고 GitHub Pages에 배포하는 방법을 배웠습니다.
반응형