BootStrap 끄적 노트

잡다한 정리노트

BootStrap 끄적 노트

나루나른 2024. 4. 4. 21:01

오늘 배운 부트스트랩이 가진 다양한 기능을 모아놓은 정리 노트이다. 개인적 생각이 주로 가미되어있으니 주의바람

BootStrap 다운로드

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

Preprocessors Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source. Full of features With Bootstrap, you get extensive and beau

getbootstrap.com

부트 스트랩은 해당 파일을 다운로드해서 직접 html 문서에 import 를 통해 사용하는 방법과 CDN 방식으로 참조해서 사용하는 방법이 있다. 필자는 이 주로 <link>를 통한 CDN 방식을 사용한다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

지금 사용하는 Boostrap3 버전은 모바일 장치에 반응하도록 설계되어있기 때문에 모바일 우선 스타일은 핵심 프레임워크의 일부다.

<meta name="viewport" content="width=device-width, initial-scale=1">

해당 코드의 'width=device-width'부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정하며,(장치에 따라 다름).

'initial-scale=1' 은 브라우저가 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정한다.

1) 부트스트랩이 제공하는 기본 컨테이너 클래스

<!-- 참조 http://www.w3schools.com/bootstrap/bootstrap_get_started.asp -->
  <div class ="container"><!-- 어느정도 좌우 여백을 주고 싶을 때 사용-->
        <h1>My First Bootstrap Page</h1>
        <p>This part is inside a .container class.</p> 
        <p>The .container class provides a responsive fixed width container.</p>
 </div>

 <div class="container-fluid"><!-- 좌우 여백이 없음.-->
     <h1>My First Bootstrap Page</h1>      
     <p>This part is inside a .container-fluid class.</p> 
     <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
 </div>

해당 코드는 부트스트랩에서 제공하는 두 가지 컨테이너 클래스이다.

1) .container는 클래스는 반응형이면서 고정의 좌우 여백을 가진 컨테이너를 제공한다.

2) .container-fluid 클래스는 반응형이면서 좌우여백이 없는 컨테이너를 제공한다.

2) 모달(modal)을 이용해 간단한 로그인 페이지 띄우기

이 사진은 w3school 사이트에서 제공하는 기본적인 모달(modal)의 형태이다. Open Modal이라는 버튼을 클릭할 시 모달창이 띄워지면서 모달창을 제외한 다른 곳은 사용할 수 없게 된다.

(참조 : https://www.w3schools.com/bootstrap/bootstrap_modal.asp)

해당 버튼을 클릭하면 이런 형태의 모달창이 나온다.

해당 모달창은 하나의 <container> 안에 각각의 header, body, footer로 나뉘어져있다. 사용자의 기호에 따라 추가와 삭제가 가능하다.

그럼 모달창 안에 간단한 input 페이지를 만들어보자.

	<div class="container">
            <h2>로그인</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myJoin">로그인</button>
            <!-- Modal -->
            <div class="modal fade" id="myJoin" role="dialog">
              <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">input 페이지</h4>
                  </div>
                  <div class="modal-body">
                    <form action="/action_page.php">
                        <div class="form-group">
                          <label for="email">아이디:</label>
                          <input type="email" class="form-control" id="email" placeholder="아이디" name="email">
                        </div>
                        <div class="form-group">
                          <label for="pwd">비밀번호:</label>
                          <input type="password" class="form-control" id="pwd" placeholder="비밀번호" name="pwd">
                        </div>
                        <div class="checkbox">
                          <label><input type="checkbox" name="remember">아이디 저장</label>
                        </div>
                        <button type="submit" class="btn btn-default">로그인</button>
                      </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
                  </div>
                </div>
              </div>
            </div>
   	</div>

해당 코드를 통해 모달창의 띄우는 버튼을 생성하고, 버튼을 클릭시 모달창이 띄워지는 간단한 코드이다.

로그인이라는 버튼을 클릭하면 간단한 data input을 위한 모달창이 나온다.

3) BootStrap이 지원하는 Grid System

BootStrap Grid System이란 CSS의 미디어 쿼리를 완성해 놓은 것으로 한 줄(row)를 12개의 칼럼으로 나눠 지원하는 시스템이나. 한 줄은 기본적으로 총 12칸으로 구성 되어 있으며 row의 값이 12칸을 넘어가면 다음 줄에 개행되서 나타나니 주의해야한다.

Grid System의 칼럼의 클래스 종류

1) .cols-xs-* : 항상 가로로 배치하며 주로 모바일 환경에서 사용한다.

2) .col-sm-* : 768px 이하에서 세로로 표시되며 주로 모바일보다 큰 화면을 가진 타블렛 환경에서 사용한다.

3) .col-md-* : 992px 이하에서 세로로 표시되며 주로 화면이 작은 컴퓨터나, 노트북 환경에서 사용한다.

4) .col-lg-* : 1200px 이하에서 세로로 표시되며 큰 화면을 가진 데스크탑 환경에서 사용한다.

다른 코드들은 생략하고 마지막 스크린 사이즈에 맞춰 혼합해서 사용하는 방법에 대한 코드만 추가하겠다.

스크린 사이즈를 혼합해서 사용할 수도 있다.
<div class="container">
     <div class="col-lg-3 col-md-4 col-sm-6 b">오필승</div>
     <div class="col-lg-3 col-md-4 col-sm-6 b ">코리아</div>
     <div class="col-lg-3 col-md-4 col-sm-12 b">대한민국</div>
</div>

이런 식으로 lg, md, sm의 각각의 다른 값을 부여해서 해당 웹페이지를 이용하는 사용자의 환경에 맞게 적용된다.

그 외에도 responsive util을 통해서 특정 모드일 때에만 특정 <div> 블록에 속한 데이터를 숨기거나 보여줄 수 있다.

1) visible-mode : 특정 mode 일 때만 보이기

2) hidden-mod : 특정 mode 일 때만 숨기기

3) offset : 해당하는 <div> 태그의 row값을 지정한 offset의 row값만큼 빈 여백으로 남김

  visible-md : md 모드일 때만 PYTHON이 보이게 설정
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">JAVA</div>
                <div class="col-md-6 visible-md">PYTHON</div>
                <div class="col-md-3">ORACLE</div>
         </div>
       </div>

 hidden-mode : md 모드일 때 숨기기
        <div class="container-fluid">
            <!--md모드일 경우 전체 div 블록을 숨긴다-->
            <div class="row hidden-md">
                <div class="col-md-3">JAVA</div>
                <div class="col-md-6">PYTHON</div>
                <div class="col-md-3">ORACLE</div>
            </div>
        </div>

 offset : 빈여백으로 남김
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">개나리</div>
                <div class="col-md-4 col-md-offset-4">라일락</div>
                <!--<div class="col-md-4 offset-mid">라일락</div>잘못된 표현식 -->
            </div>
        </div>

각 세 가지 속성에 대한 예제이다. 여기서 offset은 다른 두 가지 속성과 사용하는 방법이 조금 다르니 주의하기 바란다.