반응형
1. 반응형 디자인 구현
모든 화면 크기에서 잘 작동하는 웹사이트를 만들기 위해 반응형 디자인을 구현하세요. 미디어 쿼리를 사용하여 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 조정합니다.
예시:
styles.css (추가된 미디어 쿼리)
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 1em 0;
}
#project-list {
flex-direction: column;
}
.project {
flex: 1 1 100%;
}
}2. 프로젝트 상세 페이지 추가
각 프로젝트에 대한 상세 페이지를 추가하여 프로젝트의 구체적인 내용과 이미지를 포함할 수 있습니다.
예시:
- 새로운 HTML 파일을 만듭니다. 예:
project1.html,project2.html - 각 프로젝트에 링크를 추가합니다.
project1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project 1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Project 1</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="project1.html">Project 1</a></li>
</ul>
</nav>
</header>
<section>
<h2>Project 1 Overview</h2>
<p>Details about Project 1...</p>
<img src="path_to_image" alt="Project 1 Screenshot">
</section>
<footer>
<p>© 2023 My Portfolio</p>
</footer>
</body>
</html>3. 애니메이션 추가
CSS 애니메이션이나 JavaScript를 사용하여 페이지 요소에 애니메이션을 추가하면, 웹사이트를 더 동적이고 흥미롭게 만들 수 있습니다.
예시:
styles.css (애니메이션 추가)
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.project {
animation: fadeIn 1s ease-in-out;
}4. 다국어 지원
웹사이트를 여러 언어로 제공하여 더 넓은 사용자 층을 대상으로 할 수 있습니다. JavaScript를 사용하여 언어 전환 기능을 구현할 수 있습니다.
예시:
scripts.js (다국어 지원 추가)
const translations = {
en: {
about: "About Me",
projects: "Projects",
contact: "Contact",
// 추가 번역...
},
kr: {
about: "소개",
projects: "프로젝트",
contact: "연락처",
// 추가 번역...
}
};
function setLanguage(language) {
document.getElementById("about").textContent = translations[language].about;
document.getElementById("projects").textContent = translations[language].projects;
document.getElementById("contact").textContent = translations[language].contact;
// 나머지 번역도 추가...
}
document.getElementById("language-selector").addEventListener("change", function(event) {
setLanguage(event.target.value);
});5. 블로그 섹션 추가
웹사이트에 블로그 섹션을 추가하여 개인적인 생각이나 기술적인 내용을 공유할 수 있습니다. 이는 방문자들에게 더 많은 정보를 제공하고, 웹사이트의 콘텐츠를 자주 업데이트할 수 있는 좋은 방법입니다.
예시:
blog.html파일을 생성합니다.- 블로그 포스트 목록을 추가하고, 각 포스트에 링크를 추가합니다.
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Blog</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>
<section>
<h2>Recent Posts</h2>
<ul>
<li><a href="post1.html">Post 1</a></li>
<li><a href="post2.html">Post 2</a></li>
<!-- 추가 포스트... -->
</ul>
</section>
<footer>
<p>© 2023 My Portfolio</p>
</footer>
</body>
</html>6. SEO 최적화
웹사이트의 검색 엔진 최적화(SEO)를 개선하여 더 많은 사람들이 웹사이트를 찾을 수 있도록 합니다. 메타 태그, 제목 태그, 이미지의 alt 속성 등을 추가합니다.
index.html (추가된 메타 태그)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="MyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다.">
<meta name="keywords" content="portfolio, web development, HTML, CSS, JavaScript">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>반응형
'Javascript 프로젝트 > 01_포트폴리오 페이지(확장)' 카테고리의 다른 글
| [포트폴리오 페이지] 7단계: 프로젝트 상세 페이지 추가 ~ SEO 최적화 (0) | 2024.06.16 |
|---|---|
| [포트폴리오 페이지] 6단계: 반응형 디자인 (0) | 2024.06.16 |
| [포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 (0) | 2024.06.16 |
| [포트폴리오 페이지] 2단계: About Me 섹션 추가 (0) | 2024.06.16 |
| [포트폴리오 페이지] 1단계: 프로젝트 초기 설정 (0) | 2024.06.16 |