자기소개 페이지 완성하기

Posted on 2022-01-10 by GKSRUDTN99
Django로 웹사이트 만들기 Django HTML

포트폴리오 기능을 하는 자기소개 페이지를 만든다.
2개의 섹션으로 나누어 위에는 자신을 소개하는 내용을 담고, 아래에는 그동안 해왔던 일을 소개하는 내용을 담을 것이다.

1. 자기소개 페이지 레이아웃 구성하기

about_me.html 만들기

  • about_me.html은 이전에 작업한 landing.html의 대부분의 내용을 복사해서 사용할 것이다.
  • landing.html을 복사하여 about_me.html을 만든다.
  • title 부분을 원하는 문구로 수정하고, landing.css를 사용하는 내용도 about_me.css를 사용하도록 수정한다.
  • <section>도 2개를 만들어 처음 섹션에 나를 소개하는 문구와 이미지를 넣고, 나머지 섹션은 포트폴리오를 담는 섹션으로 사용한다.
<!DOCTYPE html>
{% load static %}
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title> CodeCamper's Blog </title>
    <link rel="stylesheet" href="{% static '/blog/bootstrap/bootstrap.min.css' %}" media="screen">
    <link rel="stylesheet" href="{% static '/single_pages/css/about_me.css' %}" media="screen">
    <script src="https://kit.fontawesome.com/1205323533.js" crossorigin="anonymous"></script>
</head>
<body>

{% include 'blog/navbar.html' %}

<section>
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-8">
                <h1>안녕하세요, CodeCamper입니다.</h1>
            </div>
            <div class="col-lg-4">
                <img class="img-fluid" src="{% static 'single_pages/images/myBackground.jpg' %}">
            </div>
        </div>
    </div>
</section>

<section class="bg-light">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>PORTFOLIO</h1>
            </div>
        </div>
    </div>
</section>

<div class="fixed-bottom">
{% include 'blog/footer.html' %}
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</body>
</html>
  • 자기소개 페이지에 사용할 사진은 single_pages 앱의 images 폴더에 넣어둬야 한다.
  • 조금 전에 about_me.html에 작성한 내용과 일치하도록 경로를 설정하여 image를 하나 저장한다.
  • 사진을 저장하고 웹 브라우저에서 확인해보면, 사진이 잘 나타나지만 브라우저의 Height을 줄인 뒤 아래쪽으로 스크롤 하면 아래쪽 화면이 잘리는 현상이 발생한다.

about_me.css

  • 위의 현상을 해결하기 위해 about_me.css를 만들고, 다음과 같이 작성한다.
    • class가 'margin-for-footer'라고 되어있는 경우 아래쪽으로 마진을 주는 코드이다.
.margin-for-footer {
    margin-bottom: 130px;
}
  • about_me.html에서 푸터와 맞닿는 아래 섹션 부분의 class에 margin-for-footer를 추가한다.
<!-- 생략 -->

<section class="bg-light margin-for-footer">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>PORTFOLIO</h1>
            </div>
        </div>
    </div>
</section>

<div class="fixed-bottom">
{% include 'blog/footer.html' %}
</div>

<!-- 생략 -->
  • 이제 브라우저의 Height가 작아져도 더 이상 푸터가 내용을 가리지 않는다.

2. 자기소개 페이지의 내용 채우기

자기소개 섹션에 내용 추가하기

  • 자신을 소개하는 문구와 이력서에 들어갈 만한 내용을 리스트 형태로 채운다.
<!-- 생략 -->

{% include 'blog/navbar.html' %}

<section>
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-8">
                <h1>안녕하세요, CodeCamper입니다.</h1>
                <br />
                <p class="lead">
                    Python과 iOS를 좋아합니다.<br />
                    iOS로 돈을 벌고, 퇴근 후에는 Python을 이용한 프레임워크들을 공부합니다.
                </p>
                <ul>
                    <li>WORK EXPERIENCE</li>
                    <ul>
                        <li>Weplanet - iOS개발 (2021.09 ~ )</li>
                    </ul>
                    <li>EDUCATION</li>
                    <ul>
                        <li>한양대학교, 학부 재학 (2019.03 ~ )</li>
                    </ul>
                    <li>TECH STACK</li>
                    <ul>
                        <li>iOS - Swift (2021.03 ~ )</li>
                        <li>Python - Django (2020.03 ~ )</li>
                    </ul>
                </ul>
            </div>
            <div class="col-lg-4">
                <img class="img-fluid" src="{% static 'single_pages/images/myBackground.jpg' %}">
            </div>
        </div>
    </div>
</section>

<!-- 생략 -->

포트폴리오 섹션에 내용 추가하기

  • 두 번째 섹션에는 부트스랩의 카드 3개를 가로로 배치한다.
  • single_pages/static/single_pages/images 폴더에 보여줄 이미지 파일 3개를 추가한다.
  • 부트스트랩이 나눠주는 12개 칸을 col-lg-4로 4개씩 분배해 3개 열을 만든다.
  • 각 열에는 부트스트랩의 카드를 넣고,
    • 이 카드를 클릭했을 때 더 자세한 설명이 모달로 팝업되어 나오도록 data-toggle="modal" data-target="#모달 id"를 부여한다.
  • 이제 웹 브라우저에서 포트폴리오 섹션에서 카드 3개를 확인할 수 있습니다.
  • about_me.html에서 두번째 섹션 아래에 모달의 내용을 작성한다.
    • 이때 카드의 data-target에서 지정한 값에 맞춰 모달의 id를 정해야 한다.
<!-- 생략 -->

<!-- Modal -->
<div class="modal fade" id="python" tabindex="-1" role="dialog" aria-labelledby="pythonModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pythonModalLabel">Django로 블로그 만들기</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-7">
                        <img class="img-fluid" src="{% static 'single_pages/images/python.png' %}">
                    </div>
                    <div class="col-lg-5">
                        <p>Python, Django로 자신만의 블로그를 제작하였습니다.</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="iOS" tabindex="-1" role="dialog" aria-labelledby="iOSModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iOSModalLabel">iOS, Swift</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-7">
                        <img class="img-fluid" src="{% static 'single_pages/images/iOS.jpg' %}">
                    </div>
                    <div class="col-lg-5">
                        <p>Swift를 이용해 iOS 플랫폼 개발자로 일하고 있습니다.</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="php" tabindex="-1" role="dialog" aria-labelledby="phpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="phpModalLabel">Laravel로 시작한 웹 개발</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-7">
                        <img class="img-fluid" src="{% static 'single_pages/images/php.jpg' %}">
                    </div>
                    <div class="col-lg-5">
                        <p>php와 Laravel 프레임워크를 이용해 골프 투어 회사의 홈페이지를 만들며 웹 개발에 입문하였습니다.</p>
                        <a href="https://tngleisure.com/">
                            <button type="button" class="btn btn-light"><i class="fas fa-chalkboard-teacher"></i> T&G Leisure</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="fixed-bottom">
{% include 'blog/footer.html' %}
</div>

<!-- 생략 -->

Search