반응형
2단계: About Me 섹션 추가
2.1 About Me 섹션 HTML 작성
index.html
파일에서 About Me
섹션에 내용을 추가합니다.
index.html (수정된 부분)
<section id="about">
<h2>About Me</h2>
<p>안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다.</p>
<p>저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.</p>
</section>
2.2 About Me 섹션 스타일링
styles.css
파일에서 About Me
섹션에 스타일을 추가합니다.
styles.css (추가된 부분)
#about {
background-color: #f9f9f9; /* 배경색을 설정합니다. */
padding: 2em; /* 패딩을 설정합니다. */
margin-top: 2em; /* 상단 여백을 설정합니다. */
border-radius: 8px; /* 모서리를 둥글게 만듭니다. */
}
#about h2 {
color: #333; /* 제목 색상을 설정합니다. */
}
#about p {
color: #666; /* 본문 색상을 설정합니다. */
line-height: 1.6; /* 행간을 설정합니다. */
}
2.3 커밋과 푸시
변경된 내용을 커밋하고 GitHub에 푸시합니다.
git add index.html styles.css
git commit -m "Add About Me section with personal details"
git push origin main
반응형
'Javascript 프로젝트 > 01_포트폴리오 페이지(확장)' 카테고리의 다른 글
[포트폴리오 페이지] 7단계: 프로젝트 상세 페이지 추가 ~ SEO 최적화 (0) | 2024.06.16 |
---|---|
[포트폴리오 페이지] 6단계: 반응형 디자인 (0) | 2024.06.16 |
[포트폴리오 페이지] 다음 과정 (0) | 2024.06.16 |
[포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 (0) | 2024.06.16 |
[포트폴리오 페이지] 1단계: 프로젝트 초기 설정 (0) | 2024.06.16 |