300x250
HTML과 CSS를 사용해 간단한 개인 프로필 페이지를 만들어 보겠습니다.
포트폴리오 프로필 제작 시 템플릿으로 복사해서 사용하시면 편합니다.
결과화면
소스코드
<!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>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background: #0078d7;
color: white;
padding: 20px 0;
text-align: center;
}
header .container {
max-width: 800px;
margin: auto;
}
main {
padding: 20px;
max-width: 800px;
margin: 20px auto;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
color: #0078d7;
}
.about, .skills, .portfolio {
margin-bottom: 20px;
}
ul {
list-style: none;
padding: 0;
}
ul li {
background: #e0e0e0;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
}
.projects {
display: flex;
gap: 20px;
}
.project {
flex: 1;
background: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
}
.project .btn {
display: inline-block;
padding: 8px 12px;
margin-top: 10px;
background: #0078d7;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s;
}
.project .btn:hover {
background: #005bb5;
}
footer {
text-align: center;
padding: 10px;
background: #333;
color: white;
margin-top: 20px;
border-radius: 0 0 8px 8px;
}
</style>
<body>
<header>
<div class="container">
<h1>홍길동</h1>
<p>웹 개발자 | 프론트엔드 전문가 | 기술 블로거</p>
</div>
</header>
<main>
<section class="about">
<h2>About Me</h2>
<p>안녕하세요! 저는 사용자 경험과 인터페이스를 중점으로 한 웹 개발에 열정을 가진 개발자입니다. 항상 새로운 기술을 배우고 적용하는 데 관심이 많습니다.</p>
</section>
<section class="skills">
<h2>Skills</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>React & Redux</li>
<li>Node.js & Express</li>
</ul>
</section>
<section class="portfolio">
<h2>Portfolio</h2>
<div class="projects">
<div class="project">
<h3>프로젝트 1</h3>
<p>React와 Firebase를 사용하여 만든 블로그 플랫폼.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
<div class="project">
<h3>프로젝트 2</h3>
<p>JavaScript와 Canvas를 활용한 인터랙티브 게임.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</div>
</section>
</main>
<footer>
<p>Contact: your.email@example.com</p>
<p>© 2025 홍길동. All rights reserved.</p>
</footer>
</body>
</html>
300x250
'IT > IT 인터넷' 카테고리의 다른 글
| 오라클 DB에서 첫 번째 조회는 되나 두 번째 조회는 되지 않는 문제 (0) | 2025.01.22 |
|---|---|
| CSS Flexbox로 간단하고 효율적인 레이아웃 만들기 (0) | 2025.01.17 |
| 웹 페이지 언어설정과 툴팁 [lang속성, title속성] (0) | 2021.09.22 |
| 기본태그 [h태그, p태그, a태그, img태그] (0) | 2021.09.22 |
| HTML 코드작성 (0) | 2021.09.20 |