Bootstrap :: 부트스트랩을 이용한 간단한 홈페이지 만들어보기 두번째!(Bootstrap v4.1)

WEB/Bootstrap / / 2018. 10. 29. 22:41

신규 블로그를 만들었습니다!

2020년 이후부터는 아래 블로그에서 활동합니다.

댓글로 질문 주셔도 확인하기 어려울 수 있습니다.

>> https://bluemiv.tistory.com/

간단한 홈페이지 만들기

저번에 이어서 다른 스타일의 간단한 홈페이지를 만들어보려고 합니다. 코드나 디자인적으로 조언해주셔도 괜찮습니다. 댓글로 달아주시면 참고 하도록 하겠습니다.^^

 

코드가 좀 많이 들어가있어서 글이 길어요! 이해 부탁드리겠습니다.

 

점보트론 사용하기

부트스트랩의 점보트론을 이용해서 맨 위에 위치 시켜보도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>레드벨벳 :: Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- header -->
    <div class="jumbotron text-center">
        <h1>RED VELVET Homepage</h1>
        <p>SM 엔터테인먼트 소속의 대한민국 5인조 걸그룹! 레드벨벳!</p>
    </div>
    <!-- content -->

    <!-- footer -->

</body>
</html>
​

 

 

네비게이션 바

네비게이션 바를 만들겠습니다. 토글 버튼을 만들어서 반응형으로 만들었습니다. 화면이 작아지면 토글 버튼을 이용해서 메뉴를 볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>레드벨벳 :: Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- header -->
    <div class="jumbotron text-center mb-0">
        <h1>RED VELVET Homepage</h1>
        <p>SM 엔터테인먼트 소속의 대한민국 5인조 걸그룹! 레드벨벳!</p>
    </div>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a href="#" class="navbar-brand">Red Velvet</a>
        <!-- Toggle Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">공지사항</a></li>
                <li class="nav-item"><a href="#" class="nav-link">갤러리</a></li>
                <li class="nav-item"><a href="#" class="nav-link">앨범</a></li>
            </ul>
        </div>
    </nav>
    <!-- content -->

    <!-- footer -->

</body>
</html>
​

 

모바일인 경우 또는 화면이 작은 경우...

토글 버튼을 이용해서 메뉴를 확인 할 수 있습니다!

 

 

주요 내용

주요 내용으로는 사진과 글, 링크 등을 넣으려고 합니다. 일단은 사진부터 넣어보도록 하겠습니다. 주 컨텐츠 내용은 2개로 나눠서 왼쪽 컨텐츠와 오른쪽 컨텐츠로 나누려고 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>레드벨벳 :: Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- header -->
    <div class="jumbotron text-center mb-0">
        <h1>RED VELVET Homepage</h1>
        <p>SM 엔터테인먼트 소속의 대한민국 5인조 걸그룹! 레드벨벳!</p>
    </div>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a href="#" class="navbar-brand">Red Velvet</a>
        <!-- Toggle Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">공지사항</a></li>
                <li class="nav-item"><a href="#" class="nav-link">갤러리</a></li>
                <li class="nav-item"><a href="#" class="nav-link">앨범</a></li>
            </ul>
        </div>
    </nav>

    <!-- content -->
    <div class="container pt-3">
        <div class="row">
            <!-- left content -->
            <div class="col-sm-4">
                <h2>About Red Velvet</h2>
                <p>SM엔터테인먼트 소속의 5인조 걸그룹!</p>
                <img src="banner4.jpg" class="img-fluid">
                <p>아이린, 슬기, 웬디, 조이로 구성된 4인조로 데뷔했고, 사흘 후인 2014년 8월 4일 데뷔곡인 디지털 싱글 행복이 발매</p>
            </div>
            <!-- right content -->
            <div class="col-sm-8">
                <h2>Red Velvet 'Power Up'</h2>
                <p>2018년 8월 6일, 여름 미니 2집 Summer Magic</p>
                <img src="banner.jpg" class="img-fluid">
            </div>
        </div>

    </div>
    <!-- footer -->

</body>
</html>​

 

사진만 넣었는데 금방 이뻐지네요.. 물론 레드 벨벳이라 더욱 이뻐 보이는것 같습니다!

 

주요 내용 2번째

뭔가 허전하니 링크들도 넣어보고, 좀더 내용을 넣어보도록 하겠습니다! 여기 적힌 글들은 뉴스기사를 가지고 왔습니다.. 일단은 예시로 만드는거니깐.. 내용은 그닥 중요하지 않잖아요~?ㅎㅎ

<!DOCTYPE html>
<html>
<head>
    <title>레드벨벳 :: Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- header -->
    <div class="jumbotron text-center mb-0">
        <h1>RED VELVET Homepage</h1>
        <p>SM 엔터테인먼트 소속의 대한민국 5인조 걸그룹! 레드벨벳!</p>
    </div>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a href="#" class="navbar-brand">Red Velvet</a>
        <!-- Toggle Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">공지사항</a></li>
                <li class="nav-item"><a href="#" class="nav-link">갤러리</a></li>
                <li class="nav-item"><a href="#" class="nav-link">앨범</a></li>
            </ul>
        </div>
    </nav>

    <!-- content -->
    <div class="container pt-3">
        <div class="row">
            <!-- left content -->
            <div class="col-sm-4">
                <h2>About Red Velvet</h2>
                <p>SM엔터테인먼트 소속의 5인조 걸그룹!</p>
                <img src="banner4.jpg" class="img-fluid rounded">
                <p>아이린, 슬기, 웬디, 조이로 구성된 4인조로 데뷔했고, 사흘 후인 2014년 8월 4일 데뷔곡인 디지털 싱글 행복이 발매</p>
                <hr>
                <!-- side menu (link) -->
                <h3>사이드 메뉴</h3>
                <p>이웃 홈페이지를 통해 레드벨벳 소식을 즐겨보세요!</p>
                <ul class="list-group">
                    <li class="list-group-item list-group-item-action"><a href="#">공식 카페</a></li>
                    <li class="list-group-item list-group-item-action"><a href="#">레드벨벳이 좋아</a></li>
                    <li class="list-group-item list-group-item-action"><a href="#">Youtube 레드벨벳</a></li>
                </ul>
            </div>
            <!-- right content -->
            <div class="col-sm-8">
                <h2>Red Velvet 'Power Up'</h2>
                <p>2018년 8월 6일, 여름 미니 2집 Summer Magic</p>
                <img src="banner.jpg" class="img-fluid rounded">
                <hr>
                <!-- side menu (link) -->
                <h3>오늘의 소식!</h3>
                <p>레드벨벳(Red Velvet)의 'Power Up'(파워 업)이 인기 고공행진 중이다.</p>
                <p>지난 6일 공개된 레드벨벳 여름 미니앨범 타이틀 곡 'Power Up'은 9일 오전 10시 기준 멜론, 지니, 엠넷뮤직, 벅스뮤직, 올레뮤직, 네이버뮤직, 소리바다 등 각종 음원 차트 1위를 올킬함은 물론, 중국 샤미뮤직 종합 차트도 정상을 차지하며 4일 연속 1위를 기록하고 있어 레드벨벳 파워를 실감케 했다.</p>
                <div class="text-center">
                    <img src="banner2.jpg" class="img-fluid rounded mb-3">
                </div>
                <p>또 지난 7일부터 인스타그램, 트위터, 페이스북 등 레드벨벳 공식 SNS에는 초강력 서머송 'Power Up'의 포인트 안무 '파도춤'과 '아기상어춤'을 선보이는 SM 소속 아티스트들의 영상이 순차 공개돼 화제를 모으고 있다.</p>
                <p>이번 영상에는 동방신기 유노윤호, 슈퍼주니어 희철, 소녀시대 태연, 효연, 윤아, 샤이니 민호, 엑소 수호, NCT 등 SM 아티스트들이 'Power Up' 포인트 안무를 함께 추며 레드벨벳의 컴백을 응원하는 모습을 만날 수 있어 훈훈함을 더한다.
                레드벨벳은 'Power Up'으로 활발한 활동을 펼친다.</p>
            </div>
        </div>

    </div>
    <!-- footer -->

</body>
</html>
​

 

아래부분에 사진과 같이 더 추가됐습니다.

 

Footer

이제 footer를 만들고 마무리를 하려고 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>레드벨벳 :: Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- header -->
    <div class="jumbotron text-center mb-0">
        <h1>RED VELVET Homepage</h1>
        <p>SM 엔터테인먼트 소속의 대한민국 5인조 걸그룹! 레드벨벳!</p>
    </div>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a href="#" class="navbar-brand">Red Velvet</a>
        <!-- Toggle Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">공지사항</a></li>
                <li class="nav-item"><a href="#" class="nav-link">갤러리</a></li>
                <li class="nav-item"><a href="#" class="nav-link">앨범</a></li>
            </ul>
        </div>
    </nav>

    <!-- content -->
    <div class="container pt-3">
        <div class="row">
            <!-- left content -->
            <div class="col-sm-4">
                <h2>About Red Velvet</h2>
                <p>SM엔터테인먼트 소속의 5인조 걸그룹!</p>
                <img src="banner4.jpg" class="img-fluid rounded">
                <p>아이린, 슬기, 웬디, 조이로 구성된 4인조로 데뷔했고, 사흘 후인 2014년 8월 4일 데뷔곡인 디지털 싱글 행복이 발매</p>
                <hr>
                <!-- side menu (link) -->
                <h3>사이드 메뉴</h3>
                <p>이웃 홈페이지를 통해 레드벨벳 소식을 즐겨보세요!</p>
                <ul class="list-group">
                    <li class="list-group-item list-group-item-action"><a href="#">공식 카페</a></li>
                    <li class="list-group-item list-group-item-action"><a href="#">레드벨벳이 좋아</a></li>
                    <li class="list-group-item list-group-item-action"><a href="#">Youtube 레드벨벳</a></li>
                </ul>
                <hr>
                <h3>오늘의 사진</h3>
                <img src="banner3.jpg" class="img-fluid rounded p-3">

                <img src="banner5.jpg" class="img-fluid rounded p-3">
            </div>
            <!-- right content -->
            <div class="col-sm-8">
                <h2>Red Velvet 'Power Up'</h2>
                <p>2018년 8월 6일, 여름 미니 2집 Summer Magic</p>
                <img src="banner.jpg" class="img-fluid rounded">
                <hr>
                <!-- side menu (link) -->
                <h3>오늘의 소식!</h3>
                <p>레드벨벳(Red Velvet)의 'Power Up'(파워 업)이 인기 고공행진 중이다.</p>
                <p>지난 6일 공개된 레드벨벳 여름 미니앨범 타이틀 곡 'Power Up'은 9일 오전 10시 기준 멜론, 지니, 엠넷뮤직, 벅스뮤직, 올레뮤직, 네이버뮤직, 소리바다 등 각종 음원 차트 1위를 올킬함은 물론, 중국 샤미뮤직 종합 차트도 정상을 차지하며 4일 연속 1위를 기록하고 있어 레드벨벳 파워를 실감케 했다.</p>
                <div class="text-center">
                    <img src="banner2.jpg" class="img-fluid rounded mb-3">
                </div>
                <p>또 지난 7일부터 인스타그램, 트위터, 페이스북 등 레드벨벳 공식 SNS에는 초강력 서머송 'Power Up'의 포인트 안무 '파도춤'과 '아기상어춤'을 선보이는 SM 소속 아티스트들의 영상이 순차 공개돼 화제를 모으고 있다.</p>
                <p>이번 영상에는 동방신기 유노윤호, 슈퍼주니어 희철, 소녀시대 태연, 효연, 윤아, 샤이니 민호, 엑소 수호, NCT 등 SM 아티스트들이 'Power Up' 포인트 안무를 함께 추며 레드벨벳의 컴백을 응원하는 모습을 만날 수 있어 훈훈함을 더한다.
                레드벨벳은 'Power Up'으로 활발한 활동을 펼친다.</p>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="jumbotron text-center mt-5 mb-0">
        <h3 class="text-secondary">Red Velvet</h3>
        <p>RedVelvet’s Homepage is powered by <span class="text-primary">Hongku</span> / Designed by <span class="text-primary">Hongku</span></p>
    </div>
</body>
</html>
​

 

footer까지 넣고 끝났습니다~ 다른 css 사용안하고 오직 bootstrap만을 이용해서 간단한 홈페이지를 만들어 봤습니다.

 

색상은 마음대로 수정하시면 됩니다. 저는 핑크색이 어울릴거 같아서 핑크색으로 색상을 입혀봤습니다.

 

 

관련 글 보러가기

2018/10/22 - [WEB/Bootstrap] - Bootstrap :: 부트스트랩을 이용한 간단한 홈페이지 만들어보기 (bootstrap v4.1)

2018/10/19 - [WEB/CSS] - CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기

 

다른 글 보러가기

2018/09/19 - [Language/Python] - Python :: 파이썬 튜플(Tuple) 자료형 개념과 사용방법

2018/09/27 - [Language/Python] - Python :: 파이썬3 requests 모듈 살펴보기(설치, 사용방법 및 예제)

2018/10/13 - [Language/Python] - Python :: 파이썬 난수 만들기/ 랜덤한 숫자, 문자열 만들기/ 비밀번호 만들기

2018/10/10 - [사는얘기/일상] - 스마트 워치, 삼성 갤럭시 워치 구매 및 개봉, 사용후기(Galaxy watch)

 

저작자표시 비영리 동일조건

'WEB > Bootstrap' 카테고리의 다른 글

Bootstrap :: 부트스트랩을 이용한 간단한 홈페이지 만들어보기 (bootstrap v4.1)  (0) 2018.10.22
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
WEB/Bootstrap 관련 글
글 더보기

티스토리툴바