점보트론 : 부트스트랩이 제공하는 component로 홈페이지를 소개하는메인 전광판.
원래는 소니에서 만든 대형 스크린 TV의 상표명이었다고 한다. 스포츠 경기장 및 콘서트장에서 많이 썼다고 하는데
큰 정광판의 대명사처럼 쓰인다. 부트 스트랩의 점보트론 역시 홈페이지에 들어오자마자 딱 보이는 큰 전광판 느낌으로 사용하는데 웹 페이지를 소개하는 대문 같은 느낌이다.
가장 기본적인 점보트론을 생성했을 때의 모습이다.
div태그의 class 형태로 사용된다. 그냥 모서리가 둥근 회색 사각형모양으로 나온다. 부트 스트랩의 특성상 반응형으로
브라우저의 크기를 줄이면 같이 모양이 바뀐다. container 클래스는 내용물을 담는 그릇정도로 보면 된다. 레이아웃을 만드는 가장 상위 요소에서 쓰이며 전체 가로폭을 정하는 클래스다.
| 클래스명 | 기능 |
| .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 type="text/css">
.jumbotron {
background-image : url('images/jumbotronBackground.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"> 코딩 부스터는 IT 교육 사이트입니다. 다양한 IT 관련 무료 및 유료 강의가 존재합니다.</p>
<p class="text-center">
<a class="bit btn-primary btn-lg" href="tt" role="button">강의 들으러 가기</a>
</p>
</div>
</div>
</body>
</html><style>태그는 점보트론 스타일을 오버로딩 한다는 느낌이다. background-img를 반응형에 맞게 줄어들었다 늘어났다 만들고 싶지만 방법을 아직 못 찾았다. 그래서 일단 엄청 키워서 도트는 깨질지 언정 빈틈을 보이지 않도록 만들었다.
<a> 태그의 클래스들을 <a>태그를 버튼으로 꾸미기 위한 작업들이다. role 속성은 해당 태그가 어떤 역할을 하는지 의미론적으로 알려주는 역할.
아래는 결과물 화면이다.
'웹 앱' 카테고리의 다른 글
| [tomcat] Apache와 tomcat의 상관관계 (0) | 2019.09.04 |
|---|---|
| [CSS] link vs import (0) | 2019.07.31 |
| [부트스트랩]bootstrap 시작 (0) | 2019.07.29 |
