[ 튜토리얼 ] 점보트론[jumbotron] 만들기

점보트론[jumbotron]: 

점보트론은 특색있는 내용이나 특별히 관심을 불러 일으킬 수있는 

간단한 정보를 눈에 띄게 보여주는 박스라고 할 수 있습니다.

부트스트랩에서 제공하는 여러 기능이 있는데 어떻게 사용할까요?

답은 부트스트랩 홈페이지에 나와있습니다.

http://bootstrapk.com/

접속하고 보면 상단에 css 콤포넌트 가 있습니다. 

콤포넌트로 들어가서 우측 사이드바에서 점보트론을 클릭합니다.

그러면 아래와같이 코드가 나와있는 박스 두개가 보일겁니다.

그 위에는 example 하고 그림이 나와있죠

아래에 있는 코드를 그대로 붙여넣기 하면 위에있는 example처럼 점보트론이 나타나게 됩니다.

여기서 점보트론의 색이나 모양을 바꾸고 싶다면 선택자를 사용하면 됩니다.

그럼 사용법을 알았으니 직접 해봅시다.

일단 한글을 사용하기 위해서 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="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>

실행

반응형웹도 고려했기 때문에 아래와같이 브라우저의 크기를 조절하면 화면이 잘리지 않고 비율이 잘 맞게 나오는걸 볼 수 있습니다.

그리고 저번에 커스터마이징을 언급 했던적이 있죠 

뭐 커스터마이징이라고 하기엔 그렇지만 간단하게 버튼의 색을 바꿔보겠습니다.

style 태그 안에 버튼의 배경색을 검정으로 바꾸면 적용되는걸 볼 수 있습니다. 

점보트론 배경이미지:

.jumbotron{

background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);

background-size: 100%;

}