부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_3차

1. 부트스트랩 사이트에서 필요한 파일 다운로드

부트스트랩을 사용하는 방법은 두 가지가 있다.

- 서버에 업로드하여 사용하기
- CDN 이용하기

서버에 업로드하여 사용하기

다운로드 -> https://getbootstrap.com/docs/5.1/getting-started/download/링크에서 다운로드하기

컴파일된 CSS 및 JS, 소스 파일, 예 3가지 중 컴파일된 CSS및 JS를 다운받으면 된다.

1. 부트스트랩 사이트에서 필요한 파일 다운로드

css에서는 botstrap.css, vootsrap.map, bootstrap-theme.css, bootstrap-theme.css.map, bootstrap-theme.min.css가 있어야 하며
js에서는 bootstrap.js가 필요하다

2. 반응형 웹에 필요한 필수 코딩 추가하기

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    

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

3. 구조의 최상위 div 요소에 .container 혹은 .container-fluid 추가

레이아웃을 만드는 가장 상위 요소에 .container또는 .container-fluid를 추가한다.
전체 가로폭을 정하는 클래스 값이다.

.container : 고정폭 레이아웃을 만들 때 사용한다.
.container-fluid : 좌우로 꽉 찬 레이아웃을 만들 때 사용한다.

3. 구조의 최상위 div요소에 .container 혹은 .container-fluid추가
/*디바이스 장치가 최소 1200 이상일 때 :laptop컴퓨터 큰 모니터용*/
@media (min-width: 1200px){
}
/*디바이스 장치가 최소 992 이상일 때 :laptop컴퓨터 작은 모니터용*/
@media (min-width: 992px){
}
/*디바이스 장치가 최소 768 이상일 때 :타블렛용*/
@media (min-width:768px {
}
/*디바이스 장치가 최대 767 이하일 때 :스마트폰용*/
@media (max-width:767px) {
}

4. 부트스트랩 css에서 해당요소의 스타일 확인
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css

가로 해상도 767px이하에서는 100%, 768px 이상에서는 750px,
992px 이상에서는 970px, 1200px 이상에서는 1170px의 가로폭을 가진다.

.container-fluod의 속성은 다음과 같다.

.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

가로 해상도에 관계없이 100%의 가로폭을 가집니다.

5. 구조의 최상위 컨테이너 요소 안쪽에 div.row로 행을 만든다.

.row : .container 또는 .container-fluid 안에 .row로 행을 만든다.

.col-*-*

.row 안에 .col-*-*로 열을 만든다. 첫번째 * 에는 xs, sm, md,lg 중에 하나가 들어가고 두번째 *에는 1부터 12까지의 수 중의 하나가 들어간다.

xs : 항상 적용된다.
sm : 가로 해상도 768px 이상에서 적용된다.
md : 가로 해상도 992px 이상에서 적용된다.
lg : 가로 해상도 1200px 이상에서 적용된다.
1 ~ 12 : 행을 12등분하여 그 중 몇 개를 사용할 지 정한다.

6. div.row 안쪽에 차지하기 원하는 영역 레이아웃의 % 를 기획하여
div.col-미디어사이즈-숫자 의 클래스명을 지정한다.

.col-xs-*
예를 들어 .col-xs-6은 항상 행의 6/12을 가로 크기로 한다는 뜻이고,
.col-xs-3은 항상 행의 3/12을 가로 크기로 한다는 뜻이다.

행을 12등분했으므로, 숫자의 합이 12면 .container(.container-fluid)를 꽉 채운다. 숫자의 합이 12보다 작으면 오른쪽에 공간이 남으며, 12보다 크면 다음 줄로 넘어간다.

ex) .col-xs-6 + .col-xs-4 + .col-xs-2 -> 행을 꽉 채움
ex) .col-xs-5 + .col-xs-5  -> 오른쪽에 남는 부분이 생김
ex) .col-xs-5 + .col-xs-5 + .col-xs-4 -> 12를 넘게 만드는 마지막 열이 다음줄로 넘어감

.col-sm-*

.col-sm-*은 가로 해상도 768px 이상에서 적용된다.
예를 들어 .col-sm-6은 가로 해상도 768px이상에서 행의 6/12을 가로 크기로 하겠다는 뜻, 만약 가로 해상도가 768px 미만이라면 행전체를 가로 크기로 한다.

첫째 행은 .col-xs-*로 열을 만들었으며, 가로 해상도에 상관없이 행을 8:4로 나눈다.
두 번째 행은 .col-sm-*로 열을 만들었으면 가로 해상도를 768px 이상에서는 행을 8:4로 나누지만, 768px 미만에서는 각 각 한 줄을 차지한다.

.col-md-*, .col-lg-*

.col-md-*은 가로 해상도 992px 이상에서 적용된다.
예를 들어 .col-md-6은 가로 해상도 992px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻이다. 만약 가로 해상도가 992px 미만이라면 행 전체를 가로 크기로 한다.
.col-lg-*은 가로 해상도 1200px 이상에서 적용된다.
예를 들어 .col-lg-6은 가로 해상도 1200px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻이다. 만약 가로 해상도가 1200px 미만이라면 행 전체를 가로 크기로 한다.

꼭 기억해야 할 포인트 정리

1. 부트스트랩을 활용하여 반응형 웹 코딩을 하려면 제일처음 부트스트랩 사이트에서 필요한
파일을 다운 받거나 CDN방식을 활용하려면 필요한 파일을 링크 걸어준다.
2. 구조의 최상위 구조에 div태그로 감싸고 .container 혹은 .container-fluid라는 클래스명을
붙여준다.
3. 구조의 최상위 컨테이너 요소 안쪽에 새로운 가로 한 줄을 넣으려면 div에 row라는 클래스명
을 붙여 행을 만든다.
4. div.row 안쪽에 차지하기 원하는 영역 레이아웃의 % 를 기획하여 col-미디어사이즈-숫자
의 클래스명을 지정한다.

꿈이의꿈

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_3차

티스토리툴바