안녕하세요! 😊
지난 시간까지 우리는 HTML/CSS의 기초부터 레이아웃, 반응형, 애니메이션, 성능 최적화까지 배워봤어요.
[웹사이트 성능 최적화] CSS 애니메이션 속도 향상 & 렉 없는 부드러운 효과 만들기!
안녕하세요! 😊 지난 시간에는 JavaScript와 CSS 애니메이션을 결합해 인터랙티브한 효과를 구현해봤어요.이번엔 한 단계 더 나아가서, 애니메이션이 느려지거나 버벅이는 현상을 줄이는 방법을
it-afternoon.tistory.com
이제 이 모든 걸 종합해서, ✨작고 완성도 높은 실전 웹사이트를 하나 만들어볼 거예요!
이번 프로젝트는 개인 포트폴리오 웹사이트를 주제로 진행하며,
💡 “디자인 + 반응형 + 인터랙션”이 모두 담긴 구조로 실습합니다.
✅ 프로젝트 목표
📌 HTML/CSS/JavaScript의 기초를 실제로 적용해보는 연습
📌 반응형 웹 + 애니메이션 + 마우스 인터랙션 적용
📌 완성형 예제로 포트폴리오 제작에 활용 가능
1️⃣ 전체 페이지 구성 설계
🔷 구성요소
- 헤더 (Header) : 이름 & 내비게이션
- 소개 (About) : 나에 대한 간단한 소개
- 프로젝트 (Projects) : 작업물 카드
- 연락처 (Contact) : 이메일, SNS, 연락 버튼
💡 모바일/PC 모두 보기 좋도록 반응형 적용!
2️⃣ HTML 구조 작성
<body>
<header>
<h1 class="logo">My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">소개</a></li>
<li><a href="#projects">작업물</a></li>
<li><a href="#contact">연락하기</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>안녕하세요!</h2>
<p>저는 프론트엔드 개발자를 꿈꾸는 ○○입니다.</p>
</section>
<section id="projects">
<h2>프로젝트 소개</h2>
<div class="project-card">🎨 개인 블로그</div>
<div class="project-card">📱 반응형 앱 클론</div>
<div class="project-card">💡 HTML 게임</div>
</section>
<section id="contact">
<h2>연락 주세요!</h2>
<p>이메일: myemail@example.com</p>
<button class="contact-btn">메시지 보내기</button>
</section>
</body>3️⃣ CSS 스타일링 적용
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0;
padding: 0;
background: #f9f9f9;
color: #333;
}
header {
background: navy;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
gap: 20px;
list-style: none;
padding: 0;
}
section {
padding: 50px 20px;
text-align: center;
}
.project-card {
background: white;
border: 1px solid #ccc;
margin: 10px auto;
padding: 20px;
max-width: 300px;
transition: transform 0.3s ease;
}
.project-card:hover {
transform: scale(1.05);
}
.contact-btn {
background: navy;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}4️⃣ JavaScript 애니메이션/인터랙션 추가
📌 버튼 클릭 시 애니메이션 효과!
document.querySelector('.contact-btn').addEventListener('click', function () {
alert('감사합니다! 메시지를 보낼게요 :)');
});✅ 더 발전시키면 이메일 전송, 모달 팝업 등도 연결 가능!
5️⃣ 반응형 스타일 추가 (media query)
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
.project-card {
max-width: 90%;
}
}✅ 모바일에서도 보기 좋은 레이아웃으로 자동 전환!
✅ 완성된 페이지 예시 흐름
[HEADER]
My Portfolio
- 소개 | 작업물 | 연락하기
[ABOUT]
안녕하세요! 저는 ○○입니다.
[PROJECTS]
🎨 개인 블로그
📱 반응형 앱 클론
💡 HTML 게임
[CONTACT]
이메일 보내기 버튼📌 마무리 & 다음 단계는?
오늘은 HTML/CSS/JS를 모두 활용한 포트폴리오 웹사이트 만들기 실전 프로젝트를 진행했어요!
✅ 반응형 웹 + 인터랙션 + 애니메이션이 포함된 실전 예제 완성 🎉
📢 다음 글에서는?
👉 HTML/CSS를 활용한 1페이지 랜딩페이지 디자인 만들기
👉 웹사이트에 폼(form) + 이메일 전송 기능 연결하기
다음 콘텐츠도 기대해주세요! 😊
[HTML/CSS 랜딩페이지 만들기] 1페이지 완성형 디자인 실전 예제
안녕하세요! 😊이전 시간에는 포트폴리오 웹사이트를 만드는 실전 프로젝트를 진행했죠?이번엔 마케팅, 이벤트, 제품 홍보 등에 자주 사용되는 1페이지 랜딩페이지를 직접 만들어볼 거예요!
it-afternoon.tistory.com
'개발 공부 > 기타' 카테고리의 다른 글
| [랜딩페이지 업그레이드] 애니메이션 + 가입 폼으로 전환율 높이기! (0) | 2025.04.03 |
|---|---|
| [HTML/CSS 랜딩페이지 만들기] 1페이지 완성형 디자인 실전 예제 (0) | 2025.04.02 |
| [웹사이트 성능 최적화] CSS 애니메이션 속도 향상 & 렉 없는 부드러운 효과 만들기! (0) | 2025.03.31 |
| [JavaScript + CSS 애니메이션] 더 강력한 인터랙티브 효과 만들기! (1) | 2025.03.28 |
| [CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기 (1) | 2025.03.27 |