반응형 Javascript 프로젝트/01_포트폴리오 페이지(확장)6 [포트폴리오 페이지] 7단계: 프로젝트 상세 페이지 추가 ~ SEO 최적화 2. 프로젝트 상세 페이지 추가이 단계에서는 각 프로젝트에 대한 상세 페이지를 추가하여 방문자가 각 프로젝트의 상세 내용을 확인할 수 있도록 합니다. 상세 페이지를 만들고 링크를 추가하여 이를 구현합니다.2.1 프로젝트 상세 페이지 HTML 작성각 프로젝트에 대한 상세 페이지를 추가합니다. 예를 들어 project1.html 파일을 생성합니다.Git Commit Messagegit commit -m "Add detailed project pages"project1.html 6.2 커밋과 푸시변경된 내용을 커밋하고 GitHub에 푸시합니다.git add index.htmlgit commit -m "Improve SEO with meta tags and keyword.. 2024. 6. 16. [포트폴리오 페이지] 6단계: 반응형 디자인 반응형 디자인을 확장하여 포트폴리오 웹사이트를 모든 기기에서 최적화된 방식으로 표시하도록 개선해 보겠습니다. 반응형 디자인을 구현하기 위해 추가할 내용은 다음과 같습니다.헤더 및 네비게이션 메뉴의 반응형 디자인섹션과 폼 요소의 반응형 디자인이미지 및 기타 미디어 요소의 반응형 디자인1. 헤더 및 네비게이션 메뉴의 반응형 디자인1.1. HTML 수정헤더와 네비게이션 메뉴를 위한 구조를 조금 더 개선하여 모바일에서의 사용성을 높입니다. index.html (수정된 부분) My Portfolio ☰ About Me Projects Contact English .. 2024. 6. 16. [포트폴리오 페이지] 다음 과정 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. 프로젝트 상세 페이지 추가각 프로젝트에 대한 상세 페이지를 추가하여 프로젝트의 구체적인 내용과 이미지를 포함할 수 있습니다.예시:새.. 2024. 6. 16. [포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 5단계: 스타일링 및 레이아웃 개선5.1 전체적인 레이아웃과 스타일링 개선styles.css 파일에서 전체적인 스타일링을 개선합니다.styles.css (수정된 부분)body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; /* 배경색을 설정합니다. */}header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; position: sticky; /* 스크롤 시에도 상단에 고정됩니다. */ top: 0; z-index: 1000; /* 다른 요소보다 위에 표시됩.. 2024. 6. 16. [포트폴리오 페이지] 2단계: About Me 섹션 추가 2단계: About Me 섹션 추가2.1 About Me 섹션 HTML 작성index.html 파일에서 About Me 섹션에 내용을 추가합니다.index.html (수정된 부분) About Me 안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다. 저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.2.2 About Me 섹션 스타일링styles.css 파일에.. 2024. 6. 16. [포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16. 이전 1 다음 반응형