Bootstrap
점보트론
hs_developer
2022. 6. 26. 15:45
점보트론은
특색있는 내용을 눈에 띄게 보여주는 박스.
부트스트랩이 제공하는 컴포넌트로 홈페이지를 소개하는 메인 전광판.
가장 기본적인 점보 트론
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width", initial-scale="1">
<title>코딩</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container"> <!-- 내용이 담기는 그릇 -->
<div class="jumbotron">
</div>
</div>
</body>
</html>
div 태그의 class 형태로 사용된다.
부트스트랩의 특성상 반응형으로 브라우저의 크기를 줄이면 모양이 바뀐다.
레이아웃을 만드는 가장 상위 요소이며 전체 가로폭을 정하는 클래스다.
.container - 고정 폭 레이아웃을 만들 때 사용
.container-fluid - 좌우로 꽉 찬 레이아웃을 만들 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width", initial-scale="1">
<title>코딩</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<style>
.jumbotron {
background-image: url('image/jumbotron.jpg');
background-position: center;
background-size: 80em;
background-repeat: no-repeat;
text-shadow: black 0.2em 0.2em 0.2em;
color: white;
}
</style>
<div class="container"> <!-- 내용이 담기는 그릇 -->
<div class="jumbotron">
<h1 class="text-center">~을 소개합니다.</h1>
<p class="text-center">~은 ~합니다.</p>
<p class="text-center">
<a class="bit btn-primary btn-lg" href="tt" role="button">강의 들으러 가기</a>
</p>
</div>
</div>
</body>
</html>
사용법
한글을 사용한다는 charset=UFT-8
반응형 웹을 구현한다는 <meta name="viewport"
컨텐츠는 각 디바이스의 화면 크기를 고려해서 보여주겠다는 content="width=device-width"
초기 비율은 1로 설정하겠다는 initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
에서 stylesheet가 중요한데 stylesheet는 외부에서 제공하는 css를 가져다 쓴다는 뜻이다.
그리고 다운 받은 css 파일이 있는 경로를 href로 설정한다. css 폴더 안의 bootstrap.css를 사용하기 때문에 그에 맞는 경로를 입력한다.
<div class="container"는 반응형으로 사용할 내용들을 둘러싸는 그릇 같은 것.
<!-- 로그인 양식 -->
<div class="container"> <!-- 하나의 영역 생성 -->
<div class="col-lg-4"></div> <!-- 영역 크기 -->
<div class="col-lg-4">
<!-- 점보트론은 특정 컨텐츠, 정보를 두드러지게 하기 위한 큰 박스 -->
<div class="jumbotron" style="padding-top: 20px;">
<form method="post" action="loginAction.jsp">
<h3 style="text-align: center;">로그인 화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="아이디" name="userId"
maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호"
name="userPassword" maxlength="20">
</div>
<input type="submit" class="btn btn-primary form-control" value="로그인">
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
반응형 웹이기 때문에 브라우저 크기를 조절해도 화면이 잘리지 않고 비율에 맞게 나온다.