멋쟁이사자처럼 프론트엔드 스쿨 2기 20_Day

aydennote·2022년 4월 26일
0

📖 오늘 학습 뽀인트!

1. Bootstrap

1) 사용법
2) layout
3) img
4) table
5) form
6) card

Bootstrap

🕵️‍♀️Bootstrap이란?
웹 프레임워크 중 하나이다. 손쉽게 웹 스타일링이 가능하고 jQuery 플러그인 사용이 가능하다는 게 장점이다.

1) 사용법

Bootstrap 사용법에는 크게 두 가지가 있다.


  1. Download
    https://getbootstrap.com/ 접속 후 다운 받아 사용 가능하다.
  2. CDN
    https://getbootstrap.com/ getStarted 를 눌러 link와 script를 html 문서에 추가하여 사용 가능하다.

2) layout

부트스트랩은 웹을 12개의 열으로 나눠 배치하고 정렬한다.


 <div class="container">
      <div class="row">
        <div class="col-md-4">hello</div>
        <div class="col-md-4">hello</div>
        <div class="col-md-4">hello</div>
      </div>
      <div class="row">
        <div class="col-md-4 offset-md-4">hello</div>
      </div>
    </div>

container는 행과 열을 감싸는 역할을 한다.
row는 하나의 행을 뜻 한다. 위 예제에서는 행이 두 개이다.
col-md-4는 12개의 열에서 4개의 열 너비만큼 차지한다는 의미다.
md의미는 반응형시 뷰포트 사이즈가 768px 미만이면 container 최대 사이즈가 720px 이라는 의미다. 공식 사이트에서 확인 가능하니 외울 필요는 없다.
col-md-4가 3개 있으니 한 행에서 12개의 열을 모두 차지하게 된다.
두 번째 행을 보면 offset-md-4를 사용해서 여백(마진)을 줄 수 있다. 값을 안 주면 좌측 정렬이고 숫자가 커질수록 우측으로 움직인다.


<div class="container-fluid">
      <div class="row">
        <div class="col-md-4">hello</div>
        <div class="col-md-4">hello</div>
        <div class="col-md-4">hello</div>
      </div>
    </div>

바로 이전 예제와 다른점은 fluid이다.
fluid는 마진을 없애고 화면 너비를 100% 가득채운다.

3) img

<div class="container">
      <div class="row">
        <div class="col-md-4">hello</div>
        <img src="./unknown.png" class="col-md-4 img-fluid" />
        <div class="col-md-4">hello</div>
      </div>
      <div class="row">
        <div class="col-md-6">hello</div>
        <img src="./unknown.png" class="col-md-6 img-fluid" />
      </div>
    </div>

위에 설명했던 내용이다. fluid를 통해 img도 반응형으로 만들 수 있다. 이미지에 max-width: 100%; 및 height: auto; 가 적용된 것과 같다.

4) table

<div class="container">
      <div class="row">
        <div class="col-md-12">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

위에 소스코드의 결과물이다. 일반 html table 작성 마크업에서 다른 부분은 table-hover다 추가적인 css 스타일 없이 각 행에 마우스를 위치시키면 색상이 변경된다.

5) form

<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="text" class="form-label">Example textarea</label>
  <textarea class="form-control" id="text" rows="3"></textarea>
</div>

위와 같이 form-labelform-control로 form input 스타일링이 가능하다.

6) card

<div
      id="carouselControl"
      class="carousel"
      data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./unknown.png" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="./unknown.png" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="./unknown.png" class="d-block w-100" alt="..." />
        </div>
      </div>

위 소스 코드로 이미지가 자동으로 옆으로 슬라이드 되는 carousel 효과를 만들 수 있다. 다른 것보다 carousel 클래스 작성과 button 등록시 필요한 data-bs-ride 속성을 집중해서 보면 좋을 것 같다.

 <div
      id="carouselExampleControls"
      class="carousel slide"
      data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./unknown.png" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="./unknown.png" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="./unknown.png" class="d-block w-100" alt="..." />
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleControls"
        data-bs-slide="prev"

        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#carouselExampleControls"
        data-bs-slide="next"

        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

위 소스코드는 버튼을 포함한 전체 소스코드로 전체 소스코드를 해석하기보다는 필요시 복사하여 사용하는 것도 좋은 방법이다.

profile
기록하는 개발자 Ayden 입니다.

0개의 댓글