HTML&CSS/HTML 기초
실습: HTML로 간단한 이력서 페이지 만들기
코딩하는 패션이과생
2025. 5. 11. 15:06
반응형
소개
HTML을 배우는 과정에서 실제 프로젝트를 만들어보는 것보다 효과적인 학습 방법은 없습니다. 이 글에서는 HTML 태그를 활용하여 전문적으로 보이는 간단한 이력서 페이지를 만드는 방법을 단계별로 알아보겠습니다. 이 실습을 통해 HTML의 기본 구조와 다양한 태그들의 실제 활용법을 익힐 수 있을 것입니다.
이력서 페이지는 개인 정보, 학력, 경력, 기술 등 다양한 유형의 콘텐츠를 구조화하는 좋은 예제입니다. 또한, 취업 준비 과정에서 실제로 활용할 수 있는 결과물을 만들 수 있다는 장점도 있습니다.
이 실습에서는 시맨틱 태그를 적극 활용하여 접근성과 SEO에 최적화된 이력서 페이지를 만들어 볼 것입니다. 초보자도 쉽게 따라할 수 있도록 단계별로 자세히 설명하겠습니다.
이력서 페이지의 기본 구조
이력서 페이지는 다음과 같은 주요 섹션으로 구성됩니다:
- 헤더: 이름과 직함을 포함
- 인적사항: 연락처 정보, 소셜 미디어 링크 등
- 학력: 학교, 전공, 졸업년도 등
- 경력: 회사명, 직위, 재직 기간, 주요 업무
- 기술 스택: 보유 기술 및 능력
- 프로젝트 경험: 참여 프로젝트와, 담당 역할, 성과
- 자격증 및 수상: 취득한 자격증이나 수상 내역
- 푸터: 추가 정보, 저작권 표시 등
각 섹션을 HTML 태그를 사용하여 구조화하며, 시맨틱 태그를 적절히 활용하겠습니다.
필요한 준비물
이 실습을 위해 필요한 것은 다음과 같습니다:
- 텍스트 에디터: Visual Studio Code, Sublime Text, Notepad++ 등
- 웹 브라우저: Chrome, Firefox, Edge 등
- 기본적인 HTML 지식: 태그, 속성 등에 대한 기초 개념
모든 준비가 되었다면, 이제 본격적으로 이력서 페이지를 만들어 보겠습니다.
단계 1: HTML 기본 구조 만들기
먼저 HTML의 기본 구조를 만들어 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홍길동 - 웹 개발자 이력서</title>
<meta name="description" content="웹 개발자 홍길동의 이력서 페이지입니다. 기술 스택, 경력, 프로젝트 경험 등을 소개합니다.">
</head>
<body>
<!-- 여기에 이력서 내용이 들어갑니다 -->
</body>
</html>위 코드에서:
<!DOCTYPE html>: HTML5 문서임을 선언합니다.<html lang="ko">: 문서의 언어를 한국어로 지정합니다.<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.<meta name="viewport"...>: 모바일 기기에서의 화면 최적화를 위한 설정입니다.<title>: 브라우저 탭에 표시될 제목입니다.<meta name="description"...>: 검색 엔진에 표시될 페이지 설명입니다.
단계 2: 헤더 섹션 구현하기
이제 <body> 태그 안에 헤더 섹션을 추가해 보겠습니다. 헤더에는 이름과 직함을 포함시키겠습니다.
<header>
<h1>홍길동</h1>
<h2>웹 개발자</h2>
</header>여기서:
<header>: 페이지의 헤더 영역을 정의하는 시맨틱 태그입니다.<h1>: 가장 중요한 제목으로 이름을 표시합니다.<h2>: 두 번째로 중요한 제목으로 직함을 표시합니다.
단계 3: 인적사항 섹션 만들기
이제 기본적인 연락처 정보를 포함한 인적사항 섹션을 추가해 봅시다.
<section id="personal-info">
<h2>인적사항</h2>
<address>
<p><strong>이메일:</strong> <a href="mailto:hong@example.com">hong@example.com</a></p>
<p><strong>전화번호:</strong> <a href="tel:+821012345678">010-1234-5678</a></p>
<p><strong>주소:</strong> 서울특별시 강남구</p>
<p><strong>웹사이트:</strong> <a href="https://www.example.com" target="_blank">www.example.com</a></p>
</address>
<div class="social-links">
<h3>소셜 미디어</h3>
<ul>
<li><a href="https://github.com/honggildong" target="_blank">GitHub</a></li>
<li><a href="https://linkedin.com/in/honggildong" target="_blank">LinkedIn</a></li>
</ul>
</div>
</section>여기서:
<section>: 문서의 독립적인 섹션을 정의합니다.<address>: 연락처 정보를 마크업하는 시맨틱 태그입니다.<strong>: 중요한 텍스트를 강조합니다.<a>: 하이퍼링크를 만듭니다.mailto:및tel:프로토콜로 이메일과 전화번호를 클릭 가능하게 만듭니다.<ul>,<li>: 순서가 없는 목록을 만듭니다.
단계 4: 학력 섹션 추가하기
다음으로 학력 정보를 나열하는 섹션을 추가해 봅시다.
<section id="education">
<h2>학력</h2>
<article class="education-item">
<h3>한국대학교</h3>
<p><strong>전공:</strong> 컴퓨터 공학</p>
<p><strong>학위:</strong> 학사</p>
<p><strong>기간:</strong> 2016년 3월 - 2020년 2월</p>
<p><strong>주요 과목:</strong> 자료구조, 알고리즘, 데이터베이스, 웹 프로그래밍</p>
</article>
<article class="education-item">
<h3>한국고등학교</h3>
<p><strong>졸업일:</strong> 2016년 2월</p>
</article>
</section>여기서:
<article>: 독립적으로 배포하거나 재사용할 수 있는 콘텐츠 영역을 정의합니다.class속성: CSS 스타일링을 위해 요소에 클래스를 추가합니다.
단계 5: 경력 섹션 구현하기
이제 경력 정보를 추가해 봅시다.
<section id="experience">
<h2>경력</h2>
<article class="job">
<h3>ABC 기술 회사</h3>
<p class="job-title"><strong>직위:</strong> 웹 개발자</p>
<p class="job-period"><strong>기간:</strong> 2022년 3월 - 현재</p>
<div class="job-description">
<p>주요 업무:</p>
<ul>
<li>반응형 웹사이트 개발 및 유지보수</li>
<li>RESTful API 설계 및 구현</li>
<li>프론트엔드 성능 최적화</li>
<li>팀 내 코드 리뷰 진행</li>
</ul>
</div>
</article>
<article class="job">
<h3>XYZ 스타트업</h3>
<p class="job-title"><strong>직위:</strong> 주니어 개발자</p>
<p class="job-period"><strong>기간:</strong> 2020년 3월 - 2022년 2월</p>
<div class="job-description">
<p>주요 업무:</p>
<ul>
<li>회사 웹사이트 리뉴얼 프로젝트 참여</li>
<li>UI 컴포넌트 개발</li>
<li>웹 접근성 개선</li>
</ul>
</div>
</article>
</section>여기서:
- 각 직장 경력을
<article>태그로 구분하여 구조화했습니다. <ul>,<li>태그를 사용하여 주요 업무를 목록으로 표시했습니다.
단계 6: 기술 스택 섹션 만들기
보유한 기술과 능력을 보여주는 섹션을 추가해 봅시다.
<section id="skills">
<h2>기술 스택</h2>
<div class="skill-category">
<h3>프로그래밍 언어</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript (ES6+)</li>
<li>Python</li>
</ul>
</div>
<div class="skill-category">
<h3>프레임워크 & 라이브러리</h3>
<ul>
<li>React</li>
<li>Vue.js</li>
<li>Bootstrap</li>
<li>Django</li>
</ul>
</div>
<div class="skill-category">
<h3>도구 & 기술</h3>
<ul>
<li>Git</li>
<li>VS Code</li>
<li>Webpack</li>
<li>Responsive Design</li>
<li>RESTful API</li>
</ul>
</div>
</section>여기서:
- 기술을 카테고리별로 그룹화하여 구조적으로 정리했습니다.
&는 HTML에서 & 기호를 표현하는 방법입니다.
단계 7: 프로젝트 경험 섹션 추가하기
이제 참여했던 프로젝트 경험을 추가해 봅시다.
<section id="projects">
<h2>프로젝트 경험</h2>
<article class="project">
<h3>온라인 쇼핑몰 플랫폼</h3>
<p class="project-period"><strong>기간:</strong> 2022년 7월 - 2022년 12월</p>
<div class="project-description">
<p>고객의 쇼핑 경험을 개선하는 반응형 웹 쇼핑몰 개발 프로젝트</p>
<p><strong>사용 기술:</strong> React, Node.js, MongoDB</p>
<p><strong>담당 역할:</strong></p>
<ul>
<li>상품 상세 페이지 UI/UX 설계 및 개발</li>
<li>장바구니 및 결제 프로세스 구현</li>
<li>반응형 디자인 최적화</li>
</ul>
<p><strong>성과:</strong> 모바일 전환율 35% 향상, 페이지 로딩 속도 40% 개선</p>
</div>
</article>
<article class="project">
<h3>사내 업무 관리 시스템</h3>
<p class="project-period"><strong>기간:</strong> 2021년 4월 - 2021년 8월</p>
<div class="project-description">
<p>팀의 업무 효율성을 높이기 위한 내부 업무 관리 웹 애플리케이션</p>
<p><strong>사용 기술:</strong> Vue.js, Express, MySQL</p>
<p><strong>담당 역할:</strong></p>
<ul>
<li>대시보드 화면 개발</li>
<li>업무 할당 및 추적 기능 구현</li>
<li>실시간 알림 시스템 개발</li>
</ul>
<p><strong>성과:</strong> 팀 업무 효율 20% 향상, 문서 처리 시간 30% 단축</p>
</div>
</article>
</section>여기서:
- 각 프로젝트마다 제목, 기간, 설명, 성과 등의 정보를 구조화했습니다.
- 담당 역할을 목록으로 명확하게 표시했습니다.
단계 8: 자격증 및 수상 섹션 구현하기
자격증과 수상 내역을 추가해 봅시다.
<section id="certificates">
<h2>자격증 & 수상</h2>
<div class="certificates-list">
<article class="certificate">
<h3>정보처리기사</h3>
<p><strong>발급 기관:</strong> 한국산업인력공단</p>
<p><strong>취득일:</strong> 2019년 8월</p>
</article>
<article class="certificate">
<h3>SQLD(SQL 개발자)</h3>
<p><strong>발급 기관:</strong> 한국데이터산업진흥원</p>
<p><strong>취득일:</strong> 2020년 3월</p>
</article>
</div>
<div class="awards-list">
<h3>수상 내역</h3>
<article class="award">
<h4>우수 개발자상</h4>
<p><strong>수여 기관:</strong> ABC 기술 회사</p>
<p><strong>수상일:</strong> 2023년 1월</p>
<p><strong>내용:</strong> 프로젝트 성과 및 팀 기여도 인정</p>
</article>
</div>
</section>여기서:
- 자격증과 수상 내역을 각각 독립된
<article>요소로 구조화했습니다.
단계 9: 푸터 섹션 추가하기
마지막으로 이력서의 푸터를 추가해 봅시다.
<footer>
<p>© 2025 홍길동. All Rights Reserved.</p>
<p>최종 업데이트: 2025년 5월 11일</p>
<p>이 이력서는 <a href="https://validator.w3.org/" target="_blank">W3C HTML5</a> 표준을 준수합니다.</p>
</footer>여기서:
<footer>태그를 사용하여 페이지의 바닥글 영역을 정의했습니다.- 저작권 정보와 최종 업데이트 날짜를 포함시켰습니다.
완성된 이력서 HTML 코드
지금까지 만든 모든 섹션을 하나로 합쳐 완성된 이력서 HTML 코드를 살펴봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홍길동 - 웹 개발자 이력서</title>
<meta name="description" content="웹 개발자 홍길동의 이력서 페이지입니다. 기술 스택, 경력, 프로젝트 경험 등을 소개합니다.">
</head>
<body>
<header>
<h1>홍길동</h1>
<h2>웹 개발자</h2>
</header>
<main>
<section id="personal-info">
<h2>인적사항</h2>
<address>
<p><strong>이메일:</strong> <a href="mailto:hong@example.com">hong@example.com</a></p>
<p><strong>전화번호:</strong> <a href="tel:+821012345678">010-1234-5678</a></p>
<p><strong>주소:</strong> 서울특별시 강남구</p>
<p><strong>웹사이트:</strong> <a href="https://www.example.com" target="_blank">www.example.com</a></p>
</address>
<div class="social-links">
<h3>소셜 미디어</h3>
<ul>
<li><a href="https://github.com/honggildong" target="_blank">GitHub</a></li>
<li><a href="https://linkedin.com/in/honggildong" target="_blank">LinkedIn</a></li>
</ul>
</div>
</section>
<section id="summary">
<h2>자기소개</h2>
<p>4년 차 웹 개발자로, 사용자 중심의 웹 애플리케이션 개발에 전문성을 갖추고 있습니다. 프론트엔드와 백엔드 기술을 두루 갖춘 풀스택 개발자로서, 최신 웹 기술 트렌드를 항상 학습하고 적용하기 위해 노력합니다. 팀 협업을 중요시하며, 코드 품질과 웹 표준을 준수하는 개발을 지향합니다.</p>
</section>
<section id="education">
<h2>학력</h2>
<article class="education-item">
<h3>한국대학교</h3>
<p><strong>전공:</strong> 컴퓨터 공학</p>
<p><strong>학위:</strong> 학사</p>
<p><strong>기간:</strong> 2016년 3월 - 2020년 2월</p>
<p><strong>주요 과목:</strong> 자료구조, 알고리즘, 데이터베이스, 웹 프로그래밍</p>
</article>
<article class="education-item">
<h3>한국고등학교</h3>
<p><strong>졸업일:</strong> 2016년 2월</p>
</article>
</section>
<section id="experience">
<h2>경력</h2>
<article class="job">
<h3>ABC 기술 회사</h3>
<p class="job-title"><strong>직위:</strong> 웹 개발자</p>
<p class="job-period"><strong>기간:</strong> 2022년 3월 - 현재</p>
<div class="job-description">
<p>주요 업무:</p>
<ul>
<li>반응형 웹사이트 개발 및 유지보수</li>
<li>RESTful API 설계 및 구현</li>
<li>프론트엔드 성능 최적화</li>
<li>팀 내 코드 리뷰 진행</li>
</ul>
</div>
</article>
<article class="job">
<h3>XYZ 스타트업</h3>
<p class="job-title"><strong>직위:</strong> 주니어 개발자</p>
<p class="job-period"><strong>기간:</strong> 2020년 3월 - 2022년 2월</p>
<div class="job-description">
<p>주요 업무:</p>
<ul>
<li>회사 웹사이트 리뉴얼 프로젝트 참여</li>
<li>UI 컴포넌트 개발</li>
<li>웹 접근성 개선</li>
</ul>
</div>
</article>
</section>
<section id="skills">
<h2>기술 스택</h2>
<div class="skill-category">
<h3>프로그래밍 언어</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript (ES6+)</li>
<li>Python</li>
</ul>
</div>
<div class="skill-category">
<h3>프레임워크 & 라이브러리</h3>
<ul>
<li>React</li>
<li>Vue.js</li>
<li>Bootstrap</li>
<li>Django</li>
</ul>
</div>
<div class="skill-category">
<h3>도구 & 기술</h3>
<ul>
<li>Git</li>
<li>VS Code</li>
<li>Webpack</li>
<li>Responsive Design</li>
<li>RESTful API</li>
</ul>
</div>
</section>
<section id="projects">
<h2>프로젝트 경험</h2>
<article class="project">
<h3>온라인 쇼핑몰 플랫폼</h3>
<p class="project-period"><strong>기간:</strong> 2022년 7월 - 2022년 12월</p>
<div class="project-description">
<p>고객의 쇼핑 경험을 개선하는 반응형 웹 쇼핑몰 개발 프로젝트</p>
<p><strong>사용 기술:</strong> React, Node.js, MongoDB</p>
<p><strong>담당 역할:</strong></p>
<ul>
<li>상품 상세 페이지 UI/UX 설계 및 개발</li>
<li>장바구니 및 결제 프로세스 구현</li>
<li>반응형 디자인 최적화</li>
</ul>
<p><strong>성과:</strong> 모바일 전환율 35% 향상, 페이지 로딩 속도 40% 개선</p>
</div>
</article>
<article class="project">
<h3>사내 업무 관리 시스템</h3>
<p class="project-period"><strong>기간:</strong> 2021년 4월 - 2021년 8월</p>
<div class="project-description">
<p>팀의 업무 효율성을 높이기 위한 내부 업무 관리 웹 애플리케이션</p>
<p><strong>사용 기술:</strong> Vue.js, Express, MySQL</p>
<p><strong>담당 역할:</strong></p>
<ul>
<li>대시보드 화면 개발</li>
<li>업무 할당 및 추적 기능 구현</li>
<li>실시간 알림 시스템 개발</li>
</ul>
<p><strong>성과:</strong> 팀 업무 효율 20% 향상, 문서 처리 시간 30% 단축</p>
</div>
</article>
</section>
<section id="certificates">
<h2>자격증 & 수상</h2>
<div class="certificates-list">
<article class="certificate">
<h3>정보처리기사</h3>
<p><strong>발급 기관:</strong> 한국산업인력공단</p>
<p><strong>취득일:</strong> 2019년 8월</p>
</article>
<article class="certificate">
<h3>SQLD(SQL 개발자)</h3>
<p><strong>발급 기관:</strong> 한국데이터산업진흥원</p>
<p><strong>취득일:</strong> 2020년 3월</p>
</article>
</div>
<div class="awards-list">
<h3>수상 내역</h3>
<article class="award">
<h4>우수 개발자상</h4>
<p><strong>수여 기관:</strong> ABC 기술 회사</p>
<p><strong>수상일:</strong> 2023년 1월</p>
<p><strong>내용:</strong> 프로젝트 성과 및 팀 기여도 인정</p>
</article>
</div>
</section>
</main>
<footer>
<p>© 2025 홍길동. All Rights Reserved.</p>
<p>최종 업데이트: 2025년 5월 11일</p>
<p>이 이력서는 <a href="https://validator.w3.org/" target="_blank">W3C HTML5</a> 표준을 준수합니다.</p>
</footer>
</body>
</html>위 코드에서 주목할 점:
<main>태그로 페이지의 주요 내용을 감싸 구조적으로 명확하게 했습니다.- 각 섹션과 콘텐츠 영역을 의미에 맞는 시맨틱 태그로 마크업했습니다.
- 일관된 구조와 클래스명을 사용하여 유지보수가 용이하게 했습니다.
이력서 페이지 개선을 위한 추가 팁
완성된 이력서를 더욱 향상시키기 위한 몇 가지 팁을 알아봅시다:
1. 메타 태그 최적화
검색 엔진 최적화를 위해 추가할 수 있는 메타 태그:
<head>
<!-- 기존 메타 태그... -->
<meta name="keywords" content="웹 개발자, 프론트엔드, 백엔드, HTML, CSS, JavaScript, React, Vue.js">
<meta name="author" content="홍길동">
<meta name="robots" content="index, follow">
<!-- Open Graph 태그 (소셜 미디어 공유 시 사용) -->
<meta property="og:title" content="홍길동 - 웹 개발자 이력서">
<meta property="og:description" content="웹 개발자 홍길동의 이력서 페이지입니다. 기술 스택, 경력, 프로젝트 경험 등을 소개합니다.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/resume">
<meta property="og:image" content="https://www.example.com/images/profile.jpg">
</head>2. 스킬 레벨 표시하기
기술 스택 영역에 스킬 레벨을 추가할 수 있습니다:
<div class="skill-category">
<h3>프로그래밍 언어</h3>
<ul>
<li>HTML5 <span class="skill-level">(상급)</span></li>
<li>CSS3 <span class="skill-level">(상급)</span></li>
<li>JavaScript <span class="skill-level">(중상급)</span></li>
<li>Python <span class="skill-level">(중급)</span></li>
</ul>
</div>3. 프로젝트 링크 추가하기
<article class="project">
<h3>온라인 쇼핑몰 플랫폼</h3>
<p class="project-period"><strong>기간:</strong> 2022년 7월 - 2022년 12월</p>
<div class="project-links">
<a href="https://github.com/honggildong/shopping-mall" target="_blank">GitHub</a> |
<a href="https://example-shop.com" target="_blank">Live Demo</a>
</div>
<!-- 기존 내용... -->
</article>이력서에 어울리는 추가 HTML 태그
이력서 페이지를 더욱 풍부하게 만들기 위한 추가 HTML 태그들을 알아봅시다:
1. 진행 바(Progress Bar)로 스킬 레벨 표시하기
<div class="skill-category">
<h3>프로그래밍 언어</h3>
<div class="skill-item">
<span class="skill-name">HTML5</span>
<progress value="90" max="100">90%</progress>
<span class="skill-percentage">90%</span>
</div>
<div class="skill-item">
<span class="skill-name">CSS3</span>
<progress value="85" max="100">85%</progress>
<span class="skill-percentage">85%</span>
</div>
<!-- 추가 스킬... -->
</div>2. details와 summary 태그로 접을 수 있는 내용 만들기
<details>
<summary>프로젝트 상세 설명</summary>
<p>이 프로젝트는 사용자 경험을 획기적으로 개선하는 것을 목표로 했습니다. 특히 모바일 사용자를 위한 최적화에 중점을 두었습니다.</p>
<p>주요 기술적 도전과 해결 방법:</p>
<ul>
<li>대용량 이미지 처리를 위한 지연 로딩 구현</li>
<li>복잡한 필터링 시스템을 위한 상태 관리 최적화</li>
<li>결제 프로세스의 보안 강화</li>
</ul>
</details>3. figure와 figcaption 태그로 프로필 사진 추가하기
<header>
<figure class="profile-image">
<img src="images/profile.jpg" alt="홍길동 프로필 사진" width="150" height="150">
<figcaption>웹 개발자 홍길동</figcaption>
</figure>
<h1>홍길동</h1>
<h2>웹 개발자</h2>
</header>4. time 태그로 날짜 표시하기
<p class="job-period">
<strong>기간:</strong>
<time datetime="2022-03-01">2022년 3월</time> -
<time datetime="2025-05-11">현재</time>
</p>5. blockquote 태그로 추천사 추가하기
<section id="testimonials">
<h2>추천사</h2>
<blockquote>
<p>홍길동은 문제 해결 능력이 뛰어나며, 팀 내에서 기술적 난제를 여러 번 해결했습니다. 그의 코드 품질과 협업 능력은 매우 뛰어납니다.</p>
<footer>
<cite>- 김부장, 프로젝트 매니저 at ABC 기술 회사</cite>
</footer>
</blockquote>
</section>6. meter 태그로 능력치 표시하기
<div class="skill-item">
<span class="skill-name">HTML5</span>
<meter value="0.9" min="0" max="1" optimum="1">90%</meter>
<span class="skill-percentage">90%</span>
</div>7. mark 태그로 강조하기
<p>특히 <mark>프론트엔드 성능 최적화</mark>와 <mark>사용자 경험 향상</mark>에 전문성을 가지고 있습니다.</p>간단한 CSS 스타일링 추가하기
HTML만으로 만든 이력서는 기본적인 브라우저 스타일로 표시되어 다소 투박합니다. 기본적인 CSS를 추가하여 이력서의 시각적 효과를 향상시켜 봅시다.
<head> 태그 안에 다음 스타일 코드를 추가할 수 있습니다:
<style>
/* 기본 스타일 */
body {
font-family: 'Arial', 'Nanum Gothic', sans-serif;
line-height: 1.6;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
/* 헤더 스타일 */
header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #3498db;
}
header h1 {
font-size: 2.5em;
margin-bottom: 5px;
color: #2c3e50;
}
header h2 {
font-size: 1.5em;
font-weight: normal;
color: #7f8c8d;
margin-top: 0;
}
/* 섹션 스타일 */
section {
margin-bottom: 30px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
section h2 {
color: #2c3e50;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 10px;
}
/* 하위 섹션 스타일 */
article {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed #e0e0e0;
}
article:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
article h3 {
color: #3498db;
margin-bottom: 10px;
}
article h4 {
color: #16a085;
margin-bottom: 5px;
}
/* 리스트 스타일 */
ul {
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
/* 링크 스타일 */
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* 푸터 스타일 */
footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
color: #7f8c8d;
font-size: 0.9em;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
body {
padding: 10px;
}
section {
padding: 15px;
}
}
</style>이 CSS 코드는 다음과 같은 효과를 줍니다:
- 전체 페이지를 중앙에 배치하고 최대 너비를 제한합니다.
- 각 섹션에 여백, 배경색, 그림자 효과를 적용합니다.
- 헤더와 제목에 강조 색상을 적용합니다.
- 모바일 기기를 위한 간단한 반응형 조정을 포함합니다.
물론 이는 기본적인 스타일링이며, 더 많은 CSS 속성을 활용하여 원하는 디자인으로 커스터마이징할 수 있습니다.
마치며
이 글에서는 HTML을 사용하여 간단하면서도 전문적인 이력서 페이지를 만드는 방법을 알아보았습니다. 시맨틱 태그를 적극적으로 활용하여 접근성과 SEO에 최적화된 구조를 만들었으며, 각 섹션별로 필요한 정보를 체계적으로 구성했습니다.
이 이력서 템플릿은 다음과 같은 특징을 가지고 있습니다:
- 명확한 구조와 계층적인 정보 구성
- 접근성과 SEO를 고려한 시맨틱 HTML 마크업
- 확장성과 유지보수가 용이한 구조
- 간단한 CSS 적용을 통한 시각적 향상
HTML을 배우는 과정에서 이러한 실습 프로젝트는 이론을 실제로 적용해 볼 수 있는 좋은 기회입니다. 이 기본 템플릿을 자신의 정보로 채우고, 필요에 따라 섹션을 추가하거나 수정하여 나만의 온라인 이력서를 만들어 보세요.
추가적으로 CSS를 더 학습하여 디자인을 향상시키거나, JavaScript를 활용하여 상호작용 기능을 추가하는 것도 좋은 학습 방향이 될 수 있습니다.
이 실습이 여러분의 HTML 학습 여정에 도움이 되기를 바랍니다. 웹 개발의 첫 걸음을 성공적으로 내딛으셨습니다!