[JSP] 14강 - 메인 화면 꾸미기

본 포스팅은

정보 제공용이 아닌

유튜브 동빈나님의 JSP 게시판 만들기 강좌 14강을

바탕으로 보고 배운 것을 직접 정리해본 포스트 입니다.

 

---

 

** 소개 점보트론 만들기

* main.jsp

<link rel="stylesheet" href="css/custom.css">
			........

<div class="container">
	<div class="jumbotron">
		<h1>웹 사이트 소개</h1>
		<p>이곳은 부트스트랩을 이용한 JSP 웹 사이트입니다! <br></p>
		<a class="btn btn-primary btn-pull" href="#">자세히 알아보기</a>
	</div>
</div>

 

간단하게 점보트론을 만든다. 

기존의 글씨가 너무 밋밋하니 css로 외부 폰트를 추가해준다.

css참조링크도 잊지말고 달아줘야한다.

 

 

* custom.css

@import url(http://fonts.googleapis.com/earlyaccess/namugothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

* {
	font-family : 'Nanum Gothic';
}
h1{
	font-family : 'Hanna';
}

외부 폰트를 import하고 Nanum Gothic은 전역에, Hanna는 h1에 적용시켜준다.

 

 

* 결과 화면

---

 

** Carousel 추가

* main.jsp

<div class="container">
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<!-- 캐러셀 하단 ooo 있는 indicator -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>				
			</ol>
			<!-- 캐러셀의 inner. 사진을 추가. -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="images/c1.jpg">
				</div>
				<div class="item">
					<img src="images/c2.jpg">
				</div>
				<div class="item">
					<img src="images/c3.jpg">
				</div>
			</div>
			<!-- 캐러셀의 좌우의 컨트롤러. -->
			<a class="left carousel-control" href="#myCarousel" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a class="right carousel-control" href="#myCarousel" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>		
	</div>

 

캐러셀은 회전목마를 뜻한다. 

프론트쪽의 캐러셀은 이 회전목마처럼 이미지들이 돌아가는 슬라이드를 말한다.

여기서 캐러셀 플러그인은 부트스트랩의 자바스크립트에서 포함되어있어 우리는 태그를 잘 활용해주기만 하면 된다.

WebContent에 images라는 폴더를 만들어서 그 안에 크기가 같은 사진 3장을 넣어두고 캐러셀에 추가해주었다.

 

 

* 결과 화면

 

 

---

 

 

** 메인 페이지

 

최종 메인 페이지

 

---