Jsp 게시판 만들기 - 19. 메인 페이지 CSS

 

1. main.jsp 코드 추가

 

<div class="container">

<div class="jumbotron">

<div class="container">

<h1>웹사이트 소개</h1>

<p>이 웹 사이트는 부트스트랩으로 만든 JSP 웹 사이트입니다. 최소한의 간단한 로직만을 이용해서 개발했습니다.</p>

<p><a class="btn btn-primary btn-pull" href="#" role="button">자세히 알아보기</a>

</div>

</div>

</div>

<div>

 

위치

 

 

 

 

2. 글씨체 변경을 위해 css 파일 추가생성

[ css 폴더에 custom.css 파일 생성 ]

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

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

*{

font-family : 'Nanum Gothic';

}

h1{

font-family : 'Hanna';

}

 

 

 

 

 

전체 적용을 위해 Action파일 제외한 모든 jsp 파일에 코드 추가

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

 

 

 

4. 메인 페이지 이미지 변경

webcontent 폴더에 images 폴더 생성 후 이미지 3개 정도 넣어주기

메인페이지에 이미지 슬라이드 넣어주는 코드 추가

 

 

<div class="container">

<div class="jumbotron">

<div class="container">

<h1>웹사이트 소개</h1>

<p>이 웹 사이트는 부트스트랩으로 만든 JSP 웹 사이트입니다. 최소한의 간단한 로직만을 이용해서 개발했습니다.</p>

<p><a class="btn btn-primary btn-pull" href="#" role="button">자세히 알아보기</a>

</div>

</div>

</div>

<div>

<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<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>

<div class="carousel-inner">

<div class="item active">

<img src="images/1.jpg">

</div>

<div class="item">

<img src="images/2.jpg">

</div>

<div class="item">

<img src="images/3.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>

 

 

참고

동빈나 유투브