HTML&CSS/CSS 기초

실습: 간단한 스타일 적용 이력서 페이지 만들기

코딩하는 패션이과생 2025. 5. 11. 16:33
반응형

이번 글에서는 HTML로 작성한 기본 이력서에 CSS를 적용하여 전문적이고 깔끔한 이력서 페이지를 만드는 방법을 단계별로 알아보겠습니다. 이 실습을 통해 HTML 구조에 CSS를 적용하는 방법과 기본 스타일링 기법을 배울 수 있습니다.

실습 개요 및 목표

이 실습의 목표는 다음과 같습니다:

  • HTML 기본 구조 복습
  • CSS 선택자와 속성 활용
  • Box Model 개념 적용
  • 색상, 글꼴, 여백, 테두리 스타일링 실습
  • 기본 레이아웃 구성 능력 향상

완성된 이력서 페이지는 깔끔한 디자인으로 정보를 명확하게 보여주며, 인쇄했을 때도 전문적으로 보이도록 스타일링할 것입니다.

준비물

  • 텍스트 에디터 (VS Code, Sublime Text, Notepad++ 등)
  • 웹 브라우저 (Chrome, Firefox, Edge 등)
  • 기본적인 HTML 지식
  • CSS 기초 개념 이해

기본 HTML 구조

먼저, 이력서의 HTML 구조를 작성합니다. 아래 코드를 resume.html 파일로 저장하세요:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>홍길동 이력서</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="resume-container">
        <!-- 헤더 섹션 -->
        <header class="resume-header">
            <h1>홍길동</h1>
            <p class="title">웹 개발자</p>

            <div class="contact-info">
                <p>📧 email@example.com</p>
                <p>📱 010-1234-5678</p>
                <p>🌐 www.myportfolio.com</p>
                <p>📍 서울시 강남구</p>
            </div>
        </header>

        <!-- 소개 섹션 -->
        <section class="resume-section">
            <h2>자기소개</h2>
            <p>3년 차 웹 개발자로 프론트엔드와 백엔드 개발 경험이 있습니다. 사용자 경험을 중시하며 깨끗하고 효율적인 코드 작성을 지향합니다. 새로운 기술 학습에 열정적이며 팀 프로젝트에서 적극적으로 소통합니다.</p>
        </section>

        <!-- 경력 섹션 -->
        <section class="resume-section">
            <h2>경력사항</h2>

            <div class="experience-item">
                <div class="date-location">
                    <p class="date">2022년 3월 - 현재</p>
                    <p class="location">ABC 기술 회사, 서울</p>
                </div>
                <div class="experience-details">
                    <h3>웹 개발자</h3>
                    <ul>
                        <li>회사 웹사이트 리뉴얼 프로젝트 참여 (HTML, CSS, JavaScript)</li>
                        <li>반응형 웹 디자인 적용으로 모바일 사용자 경험 30% 향상</li>
                        <li>성능 최적화를 통한 페이지 로딩 속도 40% 개선</li>
                    </ul>
                </div>
            </div>

            <div class="experience-item">
                <div class="date-location">
                    <p class="date">2020년 9월 - 2022년 2월</p>
                    <p class="location">XYZ 스타트업, 부산</p>
                </div>
                <div class="experience-details">
                    <h3>주니어 개발자</h3>
                    <ul>
                        <li>이커머스 플랫폼 개발 참여</li>
                        <li>사용자 대시보드 UI 구현</li>
                        <li>API 연동 및 데이터 시각화 작업</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 교육 섹션 -->
        <section class="resume-section">
            <h2>학력</h2>

            <div class="education-item">
                <p class="date">2016년 3월 - 2020년 2월</p>
                <h3>한국대학교 컴퓨터공학과</h3>
                <p>학사 학위 (GPA: 3.8/4.5)</p>
            </div>
        </section>

        <!-- 기술 섹션 -->
        <section class="resume-section skills-section">
            <h2>기술 스택</h2>

            <div class="skills-container">
                <div class="skill-category">
                    <h3>프론트엔드</h3>
                    <ul>
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JavaScript</li>
                        <li>React</li>
                    </ul>
                </div>

                <div class="skill-category">
                    <h3>백엔드</h3>
                    <ul>
                        <li>Node.js</li>
                        <li>Express</li>
                        <li>MySQL</li>
                    </ul>
                </div>

                <div class="skill-category">
                    <h3>기타</h3>
                    <ul>
                        <li>Git</li>
                        <li>Responsive Design</li>
                        <li>Figma</li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

이 HTML 구조는 이력서의 기본 정보를 담고 있습니다. 이제 CSS를 적용하여 스타일링을 시작해 보겠습니다.

CSS 스타일링 단계

같은 폴더에 style.css 파일을 생성하고 아래 단계별로 스타일을 적용해보겠습니다.

1. 기본 설정 및 리셋

먼저 페이지 전체에 적용될 기본 스타일을 설정합니다:

/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 기본 폰트 및 색상 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 20px;
}

/* 링크 스타일 */
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 리스트 스타일 */
ul {
    list-style-position: inside;
    margin-left: 20px;
}

li {
    margin-bottom: 8px;
}

2. 이력서 컨테이너 스타일링

이력서 전체를 감싸는 컨테이너에 스타일을 적용합니다:

/* 이력서 컨테이너 */
.resume-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 40px;
    border-radius: 5px;
}

3. 헤더 섹션 스타일링

이력서 상단 헤더 부분에 스타일을 적용합니다:

/* 헤더 섹션 */
.resume-header {
    border-bottom: 2px solid #0066cc;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.resume-header h1 {
    font-size: 36px;
    margin-bottom: 5px;
    color: #0066cc;
}

.resume-header .title {
    font-size: 20px;
    color: #555;
    margin-bottom: 15px;
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.contact-info p {
    margin: 0;
}

4. 섹션 스타일링

이력서의 각 섹션에 공통으로 적용할 스타일을 정의합니다:

/* 섹션 공통 스타일 */
.resume-section {
    margin-bottom: 30px;
}

.resume-section h2 {
    font-size: 22px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #0066cc;
}

.resume-section h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #444;
}

5. 경력 및 교육 아이템 스타일링

경력사항과 교육 섹션의 각 항목에 스타일을 적용합니다:

/* 경력 아이템 */
.experience-item {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
}

.date-location {
    flex: 0 0 200px;
    padding-right: 20px;
}

.date {
    font-weight: bold;
    color: #555;
}

.location {
    color: #777;
}

.experience-details {
    flex: 1;
    min-width: 300px;
}

/* 교육 아이템 */
.education-item {
    margin-bottom: 20px;
}

.education-item .date {
    margin-bottom: 5px;
}

6. 기술 스택 섹션 스타일링

기술 스택을 보기 좋게 정렬하고 스타일링합니다:

/* 기술 스택 섹션 */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.skill-category {
    flex: 1;
    min-width: 200px;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
}

.skill-category h3 {
    margin-bottom: 10px;
    text-align: center;
}

.skill-category ul {
    margin-left: 0;
}

.skill-category li {
    list-style-type: none;
    padding: 5px 0;
    text-align: center;
}

7. 미디어 쿼리로 반응형 디자인 적용

다양한 화면 크기에 대응하기 위한 반응형 스타일을 추가합니다:

/* 반응형 디자인 */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .resume-container {
        padding: 20px;
    }

    .experience-item {
        flex-direction: column;
    }

    .date-location {
        flex: none;
        margin-bottom: 10px;
        padding-right: 0;
    }

    .contact-info {
        flex-direction: column;
        gap: 5px;
    }
}

완성된 코드

위의 모든 CSS 코드를 style.css 파일에 추가한 후 브라우저에서 resume.html 파일을 열어보세요. 스타일이 적용된 전문적인 이력서 페이지를 확인할 수 있습니다.

완성된 CSS 코드는 다음과 같습니다 (위의 모든 섹션을 합친 것):

/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 기본 폰트 및 색상 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 20px;
}

/* 링크 스타일 */
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 리스트 스타일 */
ul {
    list-style-position: inside;
    margin-left: 20px;
}

li {
    margin-bottom: 8px;
}

/* 이력서 컨테이너 */
.resume-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 40px;
    border-radius: 5px;
}

/* 헤더 섹션 */
.resume-header {
    border-bottom: 2px solid #0066cc;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.resume-header h1 {
    font-size: 36px;
    margin-bottom: 5px;
    color: #0066cc;
}

.resume-header .title {
    font-size: 20px;
    color: #555;
    margin-bottom: 15px;
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.contact-info p {
    margin: 0;
}

/* 섹션 공통 스타일 */
.resume-section {
    margin-bottom: 30px;
}

.resume-section h2 {
    font-size: 22px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #0066cc;
}

.resume-section h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #444;
}

/* 경력 아이템 */
.experience-item {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
}

.date-location {
    flex: 0 0 200px;
    padding-right: 20px;
}

.date {
    font-weight: bold;
    color: #555;
}

.location {
    color: #777;
}

.experience-details {
    flex: 1;
    min-width: 300px;
}

/* 교육 아이템 */
.education-item {
    margin-bottom: 20px;
}

.education-item .date {
    margin-bottom: 5px;
}

/* 기술 스택 섹션 */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.skill-category {
    flex: 1;
    min-width: 200px;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
}

.skill-category h3 {
    margin-bottom: 10px;
    text-align: center;
}

.skill-category ul {
    margin-left: 0;
}

.skill-category li {
    list-style-type: none;
    padding: 5px 0;
    text-align: center;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .resume-container {
        padding: 20px;
    }

    .experience-item {
        flex-direction: column;
    }

    .date-location {
        flex: none;
        margin-bottom: 10px;
        padding-right: 0;
    }

    .contact-info {
        flex-direction: column;
        gap: 5px;
    }
}

추가 도전 과제

이력서를 더 개선하고 싶다면 다음 도전 과제에 도전해보세요:

  1. 프로필 사진 추가하기: 헤더 섹션에 프로필 사진을 추가하고 적절히 스타일링합니다.
  2. 인쇄용 스타일 추가하기: @media print 규칙을 사용하여 이력서를 인쇄했을 때 최적화된 모습으로 보이도록 합니다.
  3. 애니메이션 효과 추가하기: 섹션 전환이나 요소 호버 시 간단한 애니메이션을 추가합니다.
  4. 다크 모드 추가하기: 다크 모드 스타일을 만들고 토글 버튼을 추가합니다.
  5. CSS 변수 활용하기: 색상 등을 CSS 변수로 정의하여 테마 변경이 쉽도록 합니다.
/* 인쇄용 스타일 예시 */
@media print {
    body {
        background-color: white;
        padding: 0;
    }

    .resume-container {
        box-shadow: none;
        max-width: 100%;
    }

    /* 페이지 나눔 방지 */
    .resume-section {
        page-break-inside: avoid;
    }
}

마무리

이 실습을 통해 HTML로 작성한 이력서 페이지에 CSS를 적용하여 전문적인 디자인으로 스타일링하는 방법을 배웠습니다. CSS의 다양한 속성과 선택자를 활용하여 레이아웃을 구성하고, 색상, 여백, 테두리 등을 적절히 설정하는 과정을 경험했습니다.

이러한 기술은 이력서뿐만 아니라 다양한 웹 페이지 제작에 활용할 수 있습니다. 실제 자신의 이력서를 만들 때 이 템플릿을 기반으로 내용을 수정하고 스타일을 자신만의 개성에 맞게 조정해보세요.

마지막으로, 완성된 이력서를 GitHub Pages 등을 통해 온라인에 호스팅하면 실제 취업 활동에도 활용할 수 있습니다!

이 실습이 도움이 되었나요? 다음 실습에서는 이력서에 인터랙티브한 요소를 추가하는 JavaScript 활용법에 대해 알아보겠습니다. 궁금한 점이나 추가 질문이 있으면 댓글로 남겨주세요!

'HTML&CSS > CSS 기초' 카테고리의 다른 글

CSS Box Model 완전 이해하기  (0) 2025.05.11
CSS 기본 스타일링 가이드: 색상, 글꼴, 여백, 테두리, 배경  (1) 2025.05.11
CSS 선택자와 속성 완벽 가이드: class, id, *, element 총정리  (0) 2025.05.11
CSS란? 사용 방법 완벽 가이드 (Inline / Internal / External)  (0) 2025.05.11

'HTML&CSS/CSS 기초'의 다른글

  • 현재글실습: 간단한 스타일 적용 이력서 페이지 만들기

관련글

티스토리툴바