299. YelpCamp: Styling Campgrounds

이번 Lecture에서 적용할 내용은 아래와 같다. 

1. Bootstrap 3.3.5 적용

2. Semantic web에서 사용하는 <header> 활용하기 

3. div를 활용하여 컨텐츠를 중앙에 위치 시키기

 

[그림 1] BootStrap 미적용(좌) / BootStrap 적용(우)

 

 

1. BootSrtap의 <div class="container">  contents 를 가운데 정렬

현재 campground.ejs는 프레임만 설정되어 있는 상태이며, 실제 브라우저에서 출력되는 이미지는 [그림 1]의 좌측 사진이다.

campground.ejs

<%- include("partials/header") %>

<h1>This is the campgrounds page!</h1>

<a href="/campgrounds/new">Add New Campground</a>
<% campgrounds.forEach((campground) =>{ %>
	<div>
		<h4>
			<%= campground.name %>	
			<img src = "<%= campground.image %>">
		</h4>
	</div>	
<%}) %>

<%- include("partials/footer") %>


<!-- 1 ~ 15 라인의 코드를 아래와 같이 <div class="container>로 묶어준다 -->


<%- include("partials/header") %>

<div class="container">
<h1>This is the campgrounds page!</h1>

<a href="/campgrounds/new">Add New Campground</a>
<% campgrounds.forEach((campground) =>{ %>
	<div>
		<h4>
			<%= campground.name %>	
			<img src = "<%= campground.image %>">
		</h4>
	</div>	
<%}) %>
</div>
<%- include("partials/footer") %>

[그림 2] <div class="container"> 로 묶어주기 전(좌) 후(우)

 

2. jumbotron을 활용하여 header 적용, Button 디자인과 화면에 출력될 이미지 갯수를 반응형으로 적용

2-1. jumbotron은 Bootstrp에서 자주 쓰이는 디자인 중 하나이며, 유저가 페이지에 접속했을 경우 이목을 끌기 위해 사용한다. 

2-2. <div class="col-md-3 col-sm-6"> 

: div는 화면을 12분할로 계산하며, 해당 클래스를 적용할 경우 중간 해상도에서 개별 사이즈는 3/12(즉 총 이미지 숫자는 4개), 작은 해상도에서는 개별로 6/12(총 2개)가 출력된다. [그림 1]에서 볼 수 있듯이 이미지는 4개가 출력된다. 아래

 

 

<%- include("partials/header") %>
<div class="container">
<!--모든 태그를 container에 넣어 가운데로 정렬시킴(좌우 여백을 줌) -->
	<header class="jumbotron">
<!--div와 비슷한 역할을 함. 차이점은 semantic web 의미 분석 시 사용 -->
		<div class="container">
<!-- 헤더와 버튼을 디자인하기 위해 따로 묶어준다-->
          <h1>Welcome To YelpCamp!</h1>
          <p>View our hand-picked campgrounds from all over the world</p>
          <p>
              <a class="btn btn-primary btn-lg" href="/campgrounds/new">Add New Campground</a>
          </p>		<!-- Button 디자인 및 크기 조절--> 
		</div>
	</header>


	<!-- thumnail 높이를 조절하여 최대한 센터에 맞춘다-->
	<div class="row text-center" style="display:flex; flex-wrap: wrap;">
		<% campgrounds.forEach((campground) =>{ %>
			<div class="col-md-3 col-sm-6">					<!-- 반응형으로 스크린 사이즈에 따라 한 줄에 출력될 이미지 개수를 지정한다.  -->
				<div class="thumbnail"> 					<!-- thumnail을 사용한다. 이미지는 가로를 100%로 잡았을 경우  -->
					<img src = "<%= campground.image %>">
					<div class="caption">
						<h4><%= campground.name%></h4>
					</div>
				</div>
			</div>	
		<%}); %>
	</div>
</div>

<%- include("partials/footer") %>

 

 

3. div를 이용한 디자인이 적용된 페이지

[그림 3] thumbnail이 적용된 페이지