Dynamic Web project를 프로젝트 생성해서 JSP로 페이지 제작을 진행했습니다.
브라우저에서 인스타그램의 홈페이지를 방문하면 브라우저의 크기에 따라서 페이지의 레이아웃이 변경되는 것을 볼 수 있는데 오늘은 세부적인 디자인 보다는 레이아웃을 따라서 제작해 볼 생각이다.
1. 인스타그램 로그인페이지 만들기
아래의 인스타그램 홈페이지의 로그인 페이지를 부트스트랩을 사용해서 반응형웹으로 제작 할 것 입니다.
부트스트랩 사용방법
부트스트랩을 사용하기 위해서는 일단 부트스트랩 홈페이지를 방문해야 합니다. 부트스트랩은 한글번역이 잘되는 것 같다. 번역으로 페이지를 둘러보면 사용 방법을 금방 알 수 있었다.
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
사용방법에는 두가지? 정도의 방법이 있습니다.
1. 부트스트랩을 다운받아서 이클립스에서 사용하는 방법
전에 부트스트랩을 사용해서 프로젝트를 진행했을때 사용했던 방법입니다. 이번에는 CDN을 사용해 볼 생각입니다.
Bootstrap / 부트스트랩 다운로드,적용
부트스트랩 설치 , 적용 방법 부트스트랩 CSS/JS 다운로드 이클립스에 다운받은 폴더 붙여넣기 html / jsp 파일 내에서 부트스트랩 불러오기 부트스트랩 홈페이지에 만들어진 CSS 사용하기 부트스트
record-than-remember.tistory.com
2. 부트스트랩의 CDN을 사용하는 방법
JSP에서 아래와 같은 코드를 추가하므로서 부트스트랩을 사용하는 방법입니다.
이번에 사용해 볼 방법입니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
부트스트랩 홈페이지에서는 아래와 같이 스타터 탬플릿을 제공하고 있습니다.
탬플릿의 코드를 가져다가 개발을 진행해도 되지만 저는 필요한 부분만 복사해서 직접 페이지를 제작해서 진행했습니다.
저는 스타터탬플릿에서 CSS와 JS CDN을 복사해서 프로젝트의 JSP에 추가했습니다.
아래와 같이 붙여넣어줬습니다.
지금부터는 부트스트랩을 활용해서 페이지를 제작하는 과정입니다.
1. 반응형 레이아웃 만들기
인스타그램 홈페이지에서는 3단계로 나뉘어서 레이아웃의 변화가 일어나는데 미리 만들어진 화면을 보면 아래와 같습니다.
1. 넓이 860px 이상
좌측에는 사진 오른쪽에는 로그인공간으로 나뉘고 하단에는 정보가 들어간다.
2. 860px이하
사진이 들어가는 공간이 사라진다.
3. 435px이하
상단의 margin(여백)이 제거된다.
위와 같이 3단계로 레이아웃이 변경되는 페이지를 만들기 위해서 아래와 같이 코드를 작성했고 설명은 코드 아래에 있습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 반응형 웹을 위한 미디어쿼리 선언부 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/* 미디어의 넓이가 435px 이상이면 body태그에 상단여백이 200px 설정됩니다. */
@media ( min-width : 435px) {
body {
margin-top: 200px;
}
}
/* 미디어의 넓이가 860xp이하이면 id="hidden" 사라집니다.*/
/* id="860px의 최대 넓이가 400px로 변경됩니다."*/
@media ( max-width : 860px) {
#hidden {
display: none;
}
#860px{
max-width:400px;
}
}
</style>
<title>인스타그램</title>
</head>
<body>
<div class="container-fluid p-0">
<div class="row mx-auto p-0" id="860px" style="max-width:800px">
<div class="col mx-auto bg-primary p-0" id="hidden" style="max-width: 400px; height: 500px;">
휴대폰사진
</div>
<div class="col mx-auto bg-secondary p-0" style="max-width: 400px; height: 500px;">
로그인창
</div>
</div>
</div>
<div class="container-fluid">
<div class="mx-auto mt-5 bg-primary" style="max-width:600px">정보란1</div>
<div class="mx-auto bg-primary" style="max-width:600px">정보란2</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>페이지에서 반응형을 나타내기 위한 방법중에 부트스트랩의 @media를 사용해서 미디어의 크기에 따라서 div의 크기를 변경했습니다
container 부트스트랩에서 가장 기본적인 레이아웃으로 내용을 포함시키면서 정렬을 하는데 사용합니다.
container-fluid container가 모든 미디어의 크기에서 100%의 넓이를 유지하게 됩니다.
p-0 상하좌우의 padding값을 0으로 만듭니다. (부트스트랩에서 padding 설정되어 있어 0으로 다시 만듬)
row 하나의 행을 말하며 container안에서 사용되어야 합니다.
col column을 뜻하며 row안에서 행을 만듭니다.
mx-auto 양쪽 여백(padding)을 맞춰 중앙정렬 기능을 합니다.
bg-primary , bg-secondary 부트스트랩에서 제공하는 배경색입니다.
<div class="container-fluid p-0">
<div class="row mx-auto p-0" id="860px" style="max-width:800px">
<div class="col mx-auto bg-primary p-0" id="hidden" style="max-width: 400px; height: 500px;">
휴대폰사진
</div>
<div class="col mx-auto bg-secondary p-0" style="max-width: 400px; height: 500px;">
로그인창
</div>
</div>
</div>
더 자세한 내용은 부트스트랩 홈페이지에서 확인 할 수 있습니다.
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
제작을 하면서 블로그에 같이 글을 쓰는 경우가 많지만, 이번에는 제작을 한 뒤에 블로그에 글을 쓰게 됬다.
블로그에 글을 쓰면서 보니까 꼭 부트스트랩의 row를 사용하지 않아도 되는 것 같다...row를 사용하지 않고도 div에 inline-block을 사용하는게 더 간단했을꺼 같다.. 하지만 부트스트랩을 사용했다는데 의미를 두기로 한다..row에 col을 만드는것도 같은..방법이니까..
다음에는 이미지와 내용 버튼을 넣어보겠씁니다!
'Web Programming > Bootstrap' 카테고리의 다른 글
| bootstrap / modal 사용하기 (0) | 2021.07.28 |
|---|---|
| bootstrap / 그리드(grid) (0) | 2021.07.28 |
| Bootstrap / 테이블 <td> 요소 숨기기 (0) | 2021.07.28 |
