JavaScript(Bootstrap&UI)

Bootstrap이란?

프론트엔드의 요소를 모아놓은 라이브러리이며 우리가 좀더 쉽게 가져다가 사용할 수 있게 만들어준 라이브러리예요. 우리는 Bootstrap에서 제공해주는 소스를 복사해서 HTML을 개발하면 되요.

※ 프론트엔드 요소(component) : 메뉴, 대문, 모달창, 폼 등등

Bootstrap 사용법

구글 검색창에 Bootstrap이라고 검색을 하셔서 제일 첫번째로 보이는 링크로 들어가주시면 되요.

(링크 클릭하셔도 들어가실 수 있어요. https://getbootstrap.com)

링크를 클릭해서 들어가시면 아래와 같은 페이지를 보실 수 있어요. 오른쪽 상단의 Download 버튼을 클릭해주세요.

검색을 할 수 있는 페이지로 변경이 되고 버전도 원하시는 버전으로 변경하실 수 있어요. 저는 4.6버전을 사용하였어요. 검색을 통해서 원하시는 UI를 찾아서 HTML 개발에 사용하시면 되요.

Bootstrap으로 UI개발하기

1. Download 클릭 후 보이는 페이지에서 스크롤을 내리시면 Starter template을 보실 수 있어요.

이번 포스팅에서는 Starter template를 복사해서 사용하도록 할거예요.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

코드를 그대로 사용하기 전에 혹시 제 포스팅을 처음부터 따라하신 분이라면 이미 jquery에 링크가 있을거예요. 충돌이 날 수도 있으니 bootstrap에서 제공해준 jquery링크는 지워주세요.

<head>에 <link rel="stylesheet" href="main.css">도 추가해주세요. 혹 main.css 파일이 없으신 분은 생성해주시면 되요.

1. 사이트의 첫 페이지 만들기

- Jumbotron을 검색해주세요.

- Hello World가 있는 첫번째 코드를 복사해서 방금 복사한 template의 <h1>Hello, world!</h1> 위에 복붙해주세요.

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Learn more 을 Log in으로 변경해주세요.

<div class="jumbotron main-bg"> 클래스명이 하나만 있는데 옆에 하나 더 추가해 주세요.

추가한 클래스명으로 css를 추가해주도록 할게요.

main.css

.main-bg {
    background-image: url(dog.jpg);
    background-size: cover;
    color: white;
    border-radius: 0px;
}

url 부분은 제가 직접 다운받은 이미지입니다. 이미지의 위치 또한 html 파일과 동일한 폴더에 있어요. 본인이 원하시는 이미지 다운받으셔서 사용하시면 됩니다.

여기까지 오셨을 때 보여지는 화면은 아래와 같아요.

이렇게 메인 페이지를 꾸며봤어요. Bootstratp을 사용하시면 매우 쉽고 빠르게 만드실 수 있어요.

먼저는 HTML을 작성해 주세요.

<div class="black-bg">
	<div class="white-bg">
		<p>로그인 하러 고고고~</p>
	</div>
</div>

이 박스가 숨겨져 있다가 버튼을 클릭했을 때 보여져야되겠죠?

그에 맞게 css를 작성해볼게요.

main.css

.black-bg {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: none;
}

.white-bg {
    background: white;
    width: 80%;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
}

이제 자바스크립트 혹은 jquery로 버튼을 클릭했을 때 해당 박스가 보여지게 하면 되겠죠?

저는 jqeury로 작성을 했어요.

<script>
	$(".btn").on("click", function(){
    		$(".black-bg").show();
	});
</script>

이렇게 작성을 해주시면 버튼을 클릭했을 때 큰 박스가 보여지면서 안의 작은 박스의 내용도 보이게 되요.

show() 대신에 slideUp(), fadeIn()을 쓰셔도 박스가 보여지게 되요. slideUp()은 박스가 위로 올라오는 효과가 있고 fadeIn()은 점점 보여지는 효과를 가지고 있어요. 이와 같이 다양한 효과를 가지고 있는 메소드도 있기 때문에 사용하실 때 필요한 메소드를 Google에서 찾아서 사용하시는 것을 추천드려요.

오늘 사용했던 코드는 다음 포스팅에서도 그대로 사용할 예정이기 때문에 파일을 복사해서 사용하시는 것을 추천드려요.

NEXT > JavaScript(NavMenu)

저작자표시 비영리 변경금지

'Programing > JavaScript' 카테고리의 다른 글

JavaScript(jQuery 2) (0)	2021.09.13
JavaScript(jQuery 1) (0)	2021.09.09
JavaScript(document&DOM) (0)	2021.09.09
JavaScript (EventListener) (0)	2021.08.06
JavaScript (Parameter) (0)	2021.08.05

JavaScript(Bootstrap&UI)

Bootstrap으로 UI개발하기

'Programing > JavaScript' 카테고리의 다른 글

검색 태그

티스토리툴바