본문 바로가기
Javascript 프로젝트/01_포트폴리오 페이지(확장)

[포트폴리오 페이지] 2단계: About Me 섹션 추가

by cogito21_js 2024. 6. 16.
반응형

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
반응형