웹 개발을 처음 시작할 때 가장 많이 만드는 예제가 자기소개 페이지, 즉 **프로필 페이지(Profile Page)**입니다.
복잡한 기능 없이도 HTML과 CSS만으로 간단한 웹페이지를 만들 수 있으며, 포트폴리오로 활용하기에도 좋습니다.
이 글에서는 HTML과 CSS만을 사용해 디자인된 나만의 프로필 페이지를 만드는 전 과정을 예제와 함께 안내합니다.
비전공자도 그대로 따라할 수 있도록 구성했으니, 실습과 학습을 동시에 경험해보세요.
✅ 프로필 페이지에 포함될 내용
- 프로필 이미지
- 이름과 직업
- 간단한 자기소개
- 연락처 또는 SNS 링크
- 꾸며진 레이아웃과 스타일
이 정도 구성만 있어도 간단한 개인 브랜딩 페이지로 충분합니다.
✅ 실습 준비물
- 코드 편집기 (예: 메모장, VS Code, Sublime Text 등)
- 웹 브라우저 (크롬, 엣지, 사파리 등)
별도의 프로그램 설치 없이 메모장과 브라우저만 있으면 됩니다.
✅ 전체 코드 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>나의 프로필 페이지</title> <style> body { font-family: 'Noto Sans KR', sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .profile-container { max-width: 500px; background-color: #fff; margin: 50px auto; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; } .profile-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; } h1 { font-size: 28px; margin: 10px 0; } p { font-size: 16px; color: #555; line-height: 1.6; } .social-links a { display: inline-block; margin: 10px; text-decoration: none; color: #007BFF; font-weight: bold; } .social-links a:hover { color: #0056b3; } </style> </head> <body> <div class="profile-container"> <img src="https://via.placeholder.com/150" alt="프로필 이미지" class="profile-img"> <h1>홍길동</h1> <p>웹 코딩을 배우는 중입니다.<br>작은 프로젝트부터 꾸준히 실습하며 성장하고 있어요.</p> <div class="social-links"> <a href="mailto:example@example.com">이메일</a> <a href="https://github.com/username" target="_blank">GitHub</a> <a href="https://linkedin.com/in/username" target="_blank">LinkedIn</a> </div> </div> </body> </html>
✅ 코드 설명
부분설명
| <img> | 프로필 사진 (임시 이미지 주소 사용) |
| <h1> | 이름 또는 닉네임 |
| <p> | 자기소개 문장 |
| <a> | 이메일 및 SNS 링크 (링크 클릭 시 새 창 열림) |
| CSS | 글꼴, 정렬, 색상, 여백, 그림자 등 스타일 지정 |
이미지 주소는 https://via.placeholder.com/150 로 대체되어 있으며,
본인 사진이 있다면 img 태그의 src를 원하는 이미지 링크로 바꿔주세요.
✅ 팁: 내 프로필을 더욱 꾸미는 방법
- 🎨 배경색 바꾸기
→ body의 background-color 속성 변경 - 🖼️ 자신의 프로필 사진 업로드
→ 실제 사진 파일을 넣거나, 클라우드 이미지 링크 사용 - 📱 반응형 디자인 적용
→ @media 쿼리를 사용하면 모바일에서도 잘 보이게 조정 가능 - 🌐 자신의 도메인 연결
→ 추후 GitHub Pages, Netlify 등에 업로드하여 웹페이지로 공개 가능
✅ 프로필 페이지 실습 후 응용 아이디어
- 나만의 블로그 소개 페이지
- 프로젝트 소개 페이지
- 자기소개서 대체용 링크 포트폴리오
단순한 연습 예제로 시작했지만, 조금씩 스타일을 바꾸고 기능을 확장하다 보면
실제로 사용할 수 있는 개인 웹페이지로 발전시킬 수 있습니다.
마무리: HTML과 CSS만으로 충분히 시작할 수 있습니다
이번 실습을 통해 알 수 있듯이, HTML과 CSS만으로도 디자인된 웹페이지를 만들 수 있습니다.
처음에는 작고 단순하더라도, 직접 만든 웹페이지가 브라우저에 출력되는 경험은
코딩에 대한 자신감을 심어주고, 더 깊은 학습으로 나아갈 수 있는 발판이 됩니다.
특히 프로필 페이지는 자신을 소개하고 공유할 수 있는 훌륭한 첫 프로젝트입니다.
지금 만든 페이지를 발전시켜 나만의 웹 포트폴리오로 만들어보세요.