JSP로 반응형 게시판만들기[9/9], 메인페이지 디자인

 

2022.04.29 - [Practice] - JSP로 반응형 게시판 만들기[8] / 게시글 삭제 및 수정 기능

JSP로 반응형 게시판 만들기[8] / 게시글 삭제 및 수정 기능

저번 시간까지 게시판의 글 쓰기, 삭제 및 수정 등 기능들에 대해 추가를 해줬어요!!

이제는 아무것도 없는 조촐한 메인페이지를 꾸며줘 볼께요ㅎㅎ

 

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></p>
			</div>
		</div>
	</div>

이렇게 만든걸 확인할 수 있어요ㅎㅎ

폰트가 너무 안이뻐서 custom - css 를 만들어주겠습니다

 

먼저 custom.css라는 파일을 만들어주고 여기에 구글에서 기본으로 제공해주는 것을 import 해주겠습니다

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

제목은 나눔 고딕체로 본문은 한나체로 설정해줄께요!!

p{
 font-family : 'Nanum Gothic';
}

h1{
	font-family : 'Hanna';
}

그리고 메인 페이지에서는 스타일시트 참조 문구를 추가해주세요!

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

바뀐걸 확인할 수 있어요ㅎㅎ

폰트를 바꿨음에도 아직 화면이 좀 허전해서 이번엔 사진을 넣어보도록 하겠습니다!

webapp 폴더에 image라는 폴더를 만들고 사진 파일 3개를 옮겨주도록 할께요!

그리고 main.jsp에 carousel과 이미지를 추가해주도록 할께요!!

<div class="container">
		<div id="myCarousel" class="carousel slide" date-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="image/IMG_1938.JPG">
				</div>
				<div class="item">
					<img src="image/IMG_1939.JPG">
				</div>
				<div class="item">
					<img src="image/IMG_1952.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>

 

이렇게 될 수 있어요!! 그러면 한 번 확인을 해볼까요??

 

메인페이지 이미지까지 잘 들어간걸 확인할 수 있네요ㅎㅎ

그럼 마지막으로 한 번 잘작동하는지 확인해보고 블로그 포스팅 마무리하도록 하겠습니다

 

아주 잘 작동이 되는걸 확인할 수 있어요!

많이 부족하지만 MYSQL과 JSP만을 이용해서 게시판을 만들어봤습니다!!

https://github.com/Moonjuun/Make_dynamic_board_with_JSP

GitHub - Moonjuun/Make_dynamic_board_with_JSP: posted on my blog

다 만든건 깃헙에 올려놨으니 궁금하신분들은 참고해주세요~