점보트론

점보트론(jumbotron)은 대형전광판을 의미하는 단어.

여기서 점보트론은 메인 전광판을 의미한다. 

점보트론 안에는 다양한 컴포넌트가 포함이 가능함.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <mata name="viewport" content="width=device-width, initial-scale=1.0"></mata>
    
    <!--css 연결-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>코딩 독학</title>
  </head>
 
  <body>
 
  <!--jumbotron 부분-->
   <div class="container">
      <div class="jumbotron">
        <h1 class="text-center">코딩 독학을 소개합니다.</h1>
        <p class="text-center">코딩 독학은 It 교육 자료 입니다. 다양한 IT 유료 및 강의가 들어 갑니다.</p>
        <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">강의 들으러 가기</a></p>
      </div>
    </div>
 
  </body>
 
</html>
cs


결과


1)container사용

bootstrap의 css안에 있는 bootstrap.css의 파일 안에 contianer 적용  

   ※padding, margin - html과 css padding과 마진 부분을 참고하세요

1
2
3
4
5
6
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
cs









2)jumbotron
1
2
3
4
5
6
.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
cs
 
#eee는 회색

3)text-center
1
2
3
.text-center {
  text-align: center;
}
cs

#e



스타일 시트(CSS)는 자신이 작성하고 있는 HTML 문서를 디자인을 꾸미고자 할때 작성

부트스트랩도 css/bootstrap.css 이 있어서 기본적인 스타일 시트를 갖추고 있음.

하지만 자기만의 스타일로 꾸미고 싶다면 따로 추가를 한다.

1
2
3
4
5
6
7
8
9
<!--스타일 적용-->
<style type="text/css">
      .jumbotron{
        background-image: url('images/index_main.jpg');
        background-size: cover;
        text-shadow: black 0.2em 0.2em 0.2em;
        color:white;
      }
</style>
cs


점보트론에 이미지 추가하는 방법

backgroud-url : [이미지 주소]

backgroud-size: 

text-shadow: [색깔] [글자 그림자]

color : [글자 색상]





■ 참고

안경잡이 개발자 - 점보트론

https://www.youtube.com/watch?v=jcmT5UPyDcc&list=PLRx0vPvlEmdAZ-wT8pwVJn5GBp5a5aVGy&index=2

'부트스트랩' 카테고리의 다른 글

2. 홈페이지 제작  (0) 2018.12.05
1.홈페이지 제작  (0) 2018.11.30

+ Recent posts

티스토리툴바