HTML CSS JS | BootStrap

파과·2022년 8월 3일

CSS JavaScript bootstrap html

HTML CSS JS

목록 보기

1/3

🔗 코드 참고

1. 시작하기

참고 http://bootstrapk.com/getting-started/

1.1. 아래 코드를 `<head>`에 넣고 시작.

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

1.2. jQuery 사용을 위해 아래 코드를 링크 맨 위에 넣어준다.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

1.3. container class로 꼭 묶어줘야 한다.

<div class="container"></div>

2. 크기 표현

2.1. 크기 구분

sm(small), md(middle), lg(large)
적용 대상 - 크기 - 숫자(칸수)로 표현한다.
예 : col-xs-1
container는 bootstrap에서 정한 column 12칸을 기준으로 한다.

코드 예시

<style>
        .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
          border: 1px solid red;
          padding: 10px;
        }
        .row{
          margin-bottom: 4px;
          margin-top: 4px;
          }
      </style>
</head>
<body>
    <div class="container">
        <div class="row">
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
        </div>
        <div class="row">
          <div class="col-md-8">.col-md-8</div>
          <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
          <div class="col-md-6">.col-md-6</div>
          <div class="col-md-6">.col-md-6</div>
        </div>
      </div>
</body>

3. offset

칸을 띄우는 기능.

코드 예시

<div class="container">       
        <div class="row">
          <div class="col-md-5"> .col-md-5    </div>
          <div class="col-md-5 col-md-offset-2"> .col-md-5 col-md-offset-2      </div>
        </div>  
        <div class="row">
          <div class="col-md-4"> .col-md-4    </div>
          <div class="col-md-7 col-md-offset-1"> .col-md-7 .col-md-offset-1     </div>
        </div>      
      </div>

4. Grid Layout

그리드 시스템을 이용한 레이아웃.
960gs와 유사하게 사용하면 된다.
push : 오른쪽으로 밀기
pull : 왼쪽으로 당기기

코드 예시

<div class="container">       
        <header>
          <h2>그리드 시스템을 이용한 레이아웃 </h2>
        </header>
         <div class="row">
           <div class="col-md-2 col-md-push-10">
             <ul class="nav">
               <li>menu 1</li>
               <li>menu 2</li>
               <li>menu 3</li>
               <li>menu 4</li>
             </ul>
           </div>
           <div class="col-md-10 cont col-md-pull-2">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum vitae lectus sit amet tincidunt. Aliquam id fringilla sapien. Mauris eu nulla at nunc mollis pharetra. Fusce iaculis lectus nec enim feugiat luctus. Nunc tempor orci auctor iaculis consectetur. Cras pellentesque lorem sit amet tempor convallis. Sed ut cursus urna, sed adipiscing elit. Curabitur sit amet adipiscing felis. Duis pellentesque justo quam. Integer lobortis vehicula mauris, at ornare turpis consectetur at. Duis tristique velit tortor, quis viverra dolor venenatis eget.</p>
     
             <p>Nunc venenatis laoreet ullamcorper. Fusce at orci vulputate, mattis neque vel, euismod ipsum. Proin varius metus neque. In congue, arcu eu posuere gravida, erat sem auctor orci, eu convallis tortor est id sapien. Phasellus gravida quam est, et posuere diam cursus ut. Donec et ipsum laoreet, mattis mauris sit amet, suscipit augue. Etiam vel massa consequat leo pulvinar fermentum a vel urna. Duis malesuada tincidunt tortor id mattis. Sed facilisis massa libero, ut cursus turpis molestie a. Sed ornare, nibh et suscipit semper, sapien lorem auctor nisl, et volutpat lacus quam sit amet mauris.</p>
           </div>
        
         </div>
         <hr>
        <footer>
          여기는 푸터가 들어가는 곳입니다.
        </footer>
       </div>

5. Table

5.1. 기본 테이블

<h4 class="text-primary">기본 table 코드</h4>
<table>
  <thead>
    <tr>
      <th>번 호 </th>
      <th>제 목</th>
      <th>글쓴이</th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트 </td>
    <td>홍길동</td>
  </tr>
  <tr>
    <td>2</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>임꺽정 </td>
  </tr>
  <tr>
    <td>3</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>성춘향 </td>
  </tr>   
</table>

5.2. class=”table”

<h4 class="text-primary">table class="table" 적용시</h4>
<table class="table">
  <thead>
    <tr>
      <th>번 호 </th>
      <th>제 목</th>
      <th>글쓴이</th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트 </td>
    <td>홍길동</td>
  </tr>
  <tr>
    <td>2</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>임꺽정 </td>
  </tr>
  <tr>
    <td>3</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>성춘향 </td>
  </tr>   
</table>

5.3. class=”table table-striped”

<h4 class="text-primary">table class="table table-striped" 적용시</h4>
<table class="table table-striped">
  <thead>
    <tr>
      <th>번 호 </th>
      <th>제 목</th>
      <th>글쓴이</th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트 </td>
    <td>홍길동</td>
  </tr>
  <tr>
    <td>2</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>임꺽정 </td>
  </tr>
  <tr>
    <td>3</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>성춘향 </td>
  </tr>   
</table>

5.4. class=”table table hover”

<h4 class="text-primary">table class="table table-hover" 적용시</h4>
<table class="table table-hover">
  <thead>
    <tr>
      <th>번 호 </th>
      <th>제 목</th>
      <th>글쓴이</th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트 </td>
    <td>홍길동</td>
  </tr>
  <tr>
    <td>2</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>임꺽정 </td>
  </tr>
  <tr>
    <td>3</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>성춘향 </td>
  </tr>   
</table>

5.5. table class=”active”, “success”, “warning”, “danger”

<h4 class="text-primary">table class="active" "success" "warning" "danger" 적용시</h4>
<table class="table table-hover">
  <thead>
    <tr class="active">
      <th>번 호 </th>
      <th>제 목</th>
      <th>글쓴이</th>
    </tr>
  </thead>
  <tr class="success">
    <td>1</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트 </td>
    <td>홍길동</td>
  </tr>
  <tr class="warning">
    <td>2</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>임꺽정 </td>
  </tr>
  <tr class="danger">
    <td>3</td>
    <td>테이블 테스트  테이블 테스트 테이블 테스트</td>
    <td>성춘향 </td>
  </tr>   
</table>

6. 버튼

aria : 접근성
접근가능한 리치 인터넷 어플리케이션 - 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.
aria-hidden: 제작자가 시각적으로도, 스크린 리더에서도 숨기고 싶은 콘텐츠
아래 코드에서는 버튼 모양 삭제

코드 예시

<style>
  .box {
  width: 200px;
  border: 1px solid #ccc;
  height: 100px;
  }
</style>

<div class="container">
  <h5>닫기버튼</h5>
  <div class="box">
    <button type="button" class="close" aria-hidden="true">x</button>
  </div>
</div>

7. form

코드 예시

<div class="container">
  <form role="form">
    <div class="form-group">
      <label for="name">이름</label>
      <input type="text" class="form-control" placeholder="이름">
    </div>
    <div class="form-group">
      <label for="name">이메일</label>
      <input type="email" class="form-control" placeholder="이메일">
    </div>
    <div class="form-group">
      <button type="submit">확인</button>
    </div>
  </form>

  <form role="form" class="form-inline">
    <div class="form-group">
      <label for="name" class="sr-only">이름</label>
      <input type="text" class="form-control" placeholder="이름">
    </div>
    <div class="form-group">
      <label for="name">이메일</label>
      <input type="email" class="form-control" placeholder="이메일">
    </div>
    <div class="form-group">
      <button type="submit">확인</button>
    </div>
  </form>
</div>

8. container

https://getbootstrap.kr/docs/5.0/layout/containers/

파과

다음 포스트

HTML CSS JS | BootStrap

HTML CSS JS

1. 시작하기

1.1. 아래 코드를 `<head>`에 넣고 시작.

1.2. jQuery 사용을 위해 아래 코드를 링크 맨 위에 넣어준다.

1.3. container class로 꼭 묶어줘야 한다.

2. 크기 표현

2.1. 크기 구분

코드 예시

3. offset

코드 예시

4. Grid Layout

코드 예시

5. Table

5.1. 기본 테이블

5.2. class=”table”

5.3. class=”table table-striped”

5.4. class=”table table hover”

5.5. table class=”active”, “success”, “warning”, “danger”

6. 버튼

코드 예시

7. form

코드 예시

8. container

HTML CSS JS | Mediaquery

0개의 댓글

HTML CSS JS | BootStrap

HTML CSS JS

1. 시작하기

1.1. 아래 코드를 <head>에 넣고 시작.

1.2. jQuery 사용을 위해 아래 코드를 링크 맨 위에 넣어준다.

1.3. container class로 꼭 묶어줘야 한다.

2. 크기 표현

2.1. 크기 구분

코드 예시

3. offset

코드 예시

4. Grid Layout

코드 예시

5. Table

5.1. 기본 테이블

5.2. class=”table”

5.3. class=”table table-striped”

5.4. class=”table table hover”

5.5. table class=”active”, “success”, “warning”, “danger”

6. 버튼

코드 예시

7. form

코드 예시

8. container

HTML CSS JS | Mediaquery

0개의 댓글

1.1. 아래 코드를 `<head>`에 넣고 시작.