간단한 홈페이지 만들기

부트스트랩 공부도 할겸 간단한 홈페이지를 만들어보려고 합니다. 부족한 점이 많지만, 좋게 봐주셨으면 좋겠습니다.

조언해주셔도 괜찮으니 자유롭게 의견을 달아주셔도 괜찮습니다.^^

생각하고 있는 모습은 맨위에 네비게이션 바가 있고, 그아래 간단한 멘트와 프로필 사진을 넣으려고 합니다. 그리고 밑에 기타 다른 컨텐츠를 넣어준뒤에 마지막으로 맨 아래에는 footer를 넣을 생각입니다.

본글에서 이미지를 몇개 사용하는데... 필요하신분은 아래서 다운받아가시면 됩니다.

image.zip

다운로드

홈화면 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <!-- jquery & bootstrap js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <!-- style -->
    <style>
        #img_profile{
            width:150px;
            height:150px;
        }
    </style>
</head>
<body>
    <p>Twice</p>
    <img src="./profile.jpg" id="img_profile">
    <p>My profile</p>
</body>
</html>
​

일단은 메인 화면에 들어갈 컨텐츠를 넣었습니다. 디자인을 입혀봅시다. 사진과 멘트가 한 가운데에 위치해 있었으면 좋겠습니다. text-center를 이용하겠습니다.

<div class="container-fluid text-center">
    <p>Twice</p>
    <img src="./profile.jpg" id="img_profile">
    <p>My profile</p>
</div>

배경색을 입히고 글씨 색상 및 스타일도 바꿔줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <!-- jquery & bootstrap js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <!-- style -->
    <style>
        #img_profile{
            width:150px;
            height:150px;
        }
        .bg-main{
            background-color: #1abc9c;
            color:#fff;
            font-weight: bold;
            padding-top: 250px;
            padding-bottom: 250px;
        }
    </style>
</head>
<body>
    <div class="container-fluid text-center bg-main">
        <p>Twice</p>
        <img src="./profile.jpg" id="img_profile">
        <p>My profile</p>
    </div>
</body>
</html>

벌써 메인화면이 완성 되어 가네요...

서브 컨텐츠

이번에는 아래쪽에 서브 컨텐츠를 넣어봅시다. 배경색은 검정색에 가까운 색으로 하려고 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <!-- jquery & bootstrap js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <!-- style -->
    <style>
        #img_profile{
            width:150px;
            height:150px;
        }
        .bg-main{
            background-color: #1abc9c;
            color:#fff;
            font-weight: bold;
            padding-top: 250px;
            padding-bottom: 250px;
        }
        .bg-sub{
            background-color: #474e5d;
            color:#fff;
            padding-top: 70px;
            padding-bottom: 100px;
        }
    </style>
</head>
<body>
    <!-- main content -->
    <div class="container-fluid text-center bg-main">
        <p class="h3">Twice</p>
        <img src="./profile.jpg" class="rounded-circle" id="img_profile">
        <p class="h3">My profile</p>
    </div>
    
    <!-- sub content -->
    <div class="contaniner-fluid text-center bg-sub">
        <p class="h3">Twice</p>
        <p>트와이스는 나연, 정연, 모모, 사나, 지효, 미나, 다현, 채영, 쯔위 9명의 멤버들이 하나로 모여 밝고 건강한 에너지를 전하는 그룹</p>
    </div>
</body>
</html>

내욜을 넣긴했는데, 적당한 멘트가 생각나지가 않네요.. 그냥 아무거나 넣었습니다... 그리고 이미지가 둥그런게 이뻐서 rounded-circle를 사용해서 이미지를 둥글게 표현했습니다.

두번째 서브 컨텐츠를 넣어봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <!-- jquery & bootstrap js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- style -->
    <style>
        body {
            font: 20px Montserrat, sans-serif;
        }
        #img_profile{
            width:150px;
            height:150px;
        }
        .bg-main{
            background-color: #1abc9c;
            color:#fff;
            font-weight: bold;
            padding-top: 220px;
            padding-bottom: 220px;
        }
        .bg-sub{
            background-color: #474e5d;
            color:#fff;
            padding-top: 70px;
            padding-bottom: 100px;
            font-size: 14px;
        }
        .bg-sub2{
            background-color: #fff;
            color:#999;
            padding-top: 70px;
            padding-bottom: 100px;
            font-size: 14px;
        }
    </style>
</head>
<body>

    <!-- main content -->
    <div class="container-fluid text-center bg-main">
        <p class="h3">Twice</p>
        <img src="./profile.jpg" class="rounded-circle" id="img_profile">
        <p class="h3">My profile</p>
    </div>
    
    <!-- sub content -->
    <div class="contaniner-fluid text-center bg-sub">
        <p class="h3">Twice</p>
        <p>트와이스는 나연, 정연, 모모, 사나, 지효, 미나, 다현, 채영, 쯔위 9명의 멤버들이 하나로 모여 밝고 건강한 에너지를 전하는 그룹</p>
    </div>

    <!-- sub content -->
    <div class="contaniner-fluid text-center bg-sub2">
        <p class="h3">Twice</p>
        <div class="row">
            <div class="col-sm-4">
                <p>트와이스가 7월 9일 두 번째 스페셜 앨범 'Summer Nights' 및 타이틀곡 'Dance The Night Away'를 발표한다. '눈으로 한 번, 귀로 한 번 감동을 주는' 그룹 트와이스가 2018년 여름을 화려하게 장식할 '서머걸'로 돌아온다.</p>
            </div>
            <div class="col-sm-4">
                <p>트와이스가 9일 다섯 번째 미니앨범 'What is Love?' 및 동명 타이틀곡을 발표한다. 만인의 걸그룹으로 견고한 입지를 자랑하고 있는 트와이스가 이번에는 새 앨범 'What is Love?'를 통해 달콤한 상상 속 사랑을 노래한다.</p>
            </div>
            <div class="col-sm-4">
                <p>트와이스가 리패키지 앨범 '메리 & 해피(Merry & Happy)' 및 신곡 '하트 셰이커(Heart Shaker)'를 공개하며 7연속 인기홈런 행진을 예고한다. 멤버들의 비주얼 콘셉트가 담긴 단체 및 유닛 티저 이미지를 시작으로 27장의 멤버별 티저 퍼레이드, ‘하트 셰이커’ 뮤직비디오 티저 영상, MV 비하인드, 재킷 촬영 비하인드, 음원 미리듣기까지 다양한 콘텐츠를 대방출하며 관심을 한데 모았다.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <img src="./track01.jpg">
            </div>
            <div class="col-sm-4">
                <img src="./track02.jpg">
            </div>
            <div class="col-sm-4">
                <img src="./track03.jpg">
            </div>
        </div>
    </div>
</body>
</html>

꽤나 많이 이뻐진것 같습니다.

이번에는 네비게이션바를 넣어봅시다.

네비게이션

이번엔 네비게이션을 추가해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <!-- jquery & bootstrap js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- style -->
    <style>
        body {
            font: 20px Montserrat, sans-serif;
        }
        #img_profile{
            width:150px;
            height:150px;
        }
        .bg-main{
            background-color: #1abc9c;
            color:#fff;
            font-weight: bold;
            padding-top: 220px;
            padding-bottom: 220px;
        }
        .bg-sub{
            background-color: #474e5d;
            color:#fff;
            padding-top: 70px;
            padding-bottom: 100px;
            font-size: 14px;
        }
        .bg-sub2{
            background-color: #fff;
            color:#999;
            padding-top: 70px;
            padding-bottom: 100px;
            font-size: 14px;
        }
    </style>
</head>
<body>

    <!-- nav bars -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">TWICE</a>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Notice</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- main content -->
    <div class="container-fluid text-center bg-main">
        <p class="h3">Twice</p>
        <img src="./profile.jpg" class="rounded-circle" id="img_profile">
        <p class="h3">My profile</p>
    </div>
    
    <!-- sub content -->
    <div class="contaniner-fluid text-center bg-sub">
        <p class="h3">Twice</p>
        <p>트와이스는 나연, 정연, 모모, 사나, 지효, 미나, 다현, 채영, 쯔위 9명의 멤버들이 하나로 모여 밝고 건강한 에너지를 전하는 그룹</p>
    </div>

    <!-- sub content -->
    <div class="contaniner-fluid text-center bg-sub2">
        <p class="h3">Twice</p>
        <div class="row">
            <div class="col-sm-4">
                <p>트와이스가 7월 9일 두 번째 스페셜 앨범 'Summer Nights' 및 타이틀곡 'Dance The Night Away'를 발표한다. '눈으로 한 번, 귀로 한 번 감동을 주는' 그룹 트와이스가 2018년 여름을 화려하게 장식할 '서머걸'로 돌아온다.</p>
            </div>
            <div class="col-sm-4">
                <p>트와이스가 9일 다섯 번째 미니앨범 'What is Love?' 및 동명 타이틀곡을 발표한다. 만인의 걸그룹으로 견고한 입지를 자랑하고 있는 트와이스가 이번에는 새 앨범 'What is Love?'를 통해 달콤한 상상 속 사랑을 노래한다.</p>
            </div>
            <div class="col-sm-4">
                <p>트와이스가 리패키지 앨범 '메리 & 해피(Merry & Happy)' 및 신곡 '하트 셰이커(Heart Shaker)'를 공개하며 7연속 인기홈런 행진을 예고한다. 멤버들의 비주얼 콘셉트가 담긴 단체 및 유닛 티저 이미지를 시작으로 27장의 멤버별 티저 퍼레이드, ‘하트 셰이커’ 뮤직비디오 티저 영상, MV 비하인드, 재킷 촬영 비하인드, 음원 미리듣기까지 다양한 콘텐츠를 대방출하며 관심을 한데 모았다.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <img src="./track01.jpg">
            </div>
            <div class="col-sm-4">
                <img src="./track02.jpg">
            </div>
            <div class="col-sm-4">
                <img src="./track03.jpg">
            </div>
        </div>
    </div>
</body>
</html>

심플하면서도 나름 이쁘지 않나요..??(자기합리화) 약간 밋밋한 느낌도 있지만 저는 깔끔한걸 더 좋아해서 이런느낌이 더 좋은 것 같습니다.

마지막으로 Footer를 넣고 마무리 하겠습니다.

Footer

<!-- style -->
<style>
    .footer{
        background-color: #333;
        color:#ccc;
        padding-top: 70px;
        padding-bottom: 50px;
        font-size: 12px;
    }
</style>

<!-- footer -->
<div class="container-fluid text-center footer">
    <p>Twice’s hompage is powered by hongku / Designed by Hongku</p>
</div>

위 코드만 추가 했습니다.