[Day4] 부트스트랩 & Javascript

Bootstrap 5 is mobile-first

모바일 기기에 반응하도록 설계하기 위해 아래 meta태그를 추가

아래 코드가 없는 경우 반응형으로 적용되지 않는다.

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

** p-5가 최대이며, 숫자가 그 이상이 되면 그냥 0이 됨 **

BS5 Tables

  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

기본 Bootstrap 5 테이블에는 가벼운 padding과 수평 구분선이 있습니다.

class	effect
.table-striped
.table-bordered
.table-hover	행에 호버 효과
.table-dark
.table-borderless
.table-responsive

BS5 Responsive Images

.img-fluid 를 추가하여 반응형 이미지를 만들면 부모 요소에 맞게 잘 조정된다
.img-fluid 클래스는 이미지에 max-width: 100%; height: auto; 를 적용한다.

BS5 Alerts

bootstrap alert에 javascript 더하기

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
  	function a(){
    	const bValue=document.getElementById('b').value;
        if(bValue===""){
        	//alert("값 없음");
            document.getElementById("c").style.visibility="visible";
        }
    	
    }
  </script>
</head>
<body>

<div class="container mt-3">
  <h2>Alerts</h2>
  <p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
  <div class="alert alert-success">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
  <input id="b" /><button onclick="a()">전송</button>
  <div class="alert alert-danger" style="visibility:hidden;" id="c">
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>
</div>

</body>
</html>

Spinner buttons

<button class="btn btn-primary">
	<span class="spinner-border spinner-border-sm"></span>
	Loading..
</button>

BS5 Progress Bars

BS5 Pagination

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

BS5 Modal

기본 모달 만드는 방법

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<부트스트랩으로 회원가입 모달 만드는 예제>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <style>
      .modal_body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        display: flex;
        justify-content: center;
        align-items: center;
        /* height: 50vh; */
        margin: 0;
      }
      .modal_container {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /* width: 300px; */
        margin: 50px 0;
      }
      .modal_container h1 {
        text-align: center;
        color: #333;
      }
      .modal_container label {
        margin-top: 10px;
        display: block;
        color: #555;
      }
      .modal_container input[type="text"],
      .modal_container input[type="email"],
      .modal_container input[type="password"] {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .modal_container input[type="submit"] {
        background-color: #5cb85c;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
        margin-top: 15px;
      }
      .modal_container input[type="submit"]:hover {
        background-color: #4cae4c;
      }
    </style>
  </head>
  <body>
    <div class="container p-5 bg-primary text-white text-center">
      <h1>My First Bootstrap Page</h1>
      <p>Resize this responsive page to see the effect!</p>
    </div>

    <div class="container">
      <div class="row">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
          <div class="container-fluid">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  href="#"
                  data-bs-toggle="modal"
                  data-bs-target="#a"
                  >회원가입</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

    <div class="container mt-5 border">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
      </div>
    </div>

    <!-- The Modal -->

    <div class="modal" id="a">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">회원가입</h4>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
            ></button>
          </div>

          <!-- Modal body -->
          <div class="modal_body">
            <div class="modal_container">
              <form action="/submit" method="post">
                <label for="name">이름:</label>
                <input type="text" id="name" name="name" required />

                <label for="email">이메일:</label>
                <input type="email" id="email" name="email" required />

                <label for="password">비밀번호:</label>
                <input type="password" id="password" name="password" required />

                <input type="submit" value="가입하기" />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript

javascript는 html 컨텐츠를 변경할 수 있다.

document.getElementById("demo").innerHTML = "Hello JavaScript";

왼쪽 버튼을 클릭하면 myImage라는 아이디를 가진 요소의 pic_bulbon.gif로 바꾸겠다.
오른쪽 버튼을 누르면 다시 pic_buloff.gif로 바꾼다.

javascript는 css를 변경할 수 있다.

document.getElementById("demo").style.fontSize = "35px";

JS Where to go

<script> tag

: HTML에서는 JavaScript 코드가 <script>및 </script>태그 사이에 삽입됩니다.

  <!-- src로 외부 스크립트를 가져옴-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> 
  <!-- 내 코드를 불러옴 -->
  <script>
    alert()
  </script>

** 어디에나 넣어도되지만 스크립트끼리, 스타일끼리 모여져 있는게 가독성 좋음 **

JS Output

innerHTML : HTML 요소에 쓰기
document.write() : HTML 출력에 쓰기
- HTML 문서가 로드된 후에 document.write()를 사용하면 기존 HTML이 모두 삭제된다
window.alert() : alert 에 쓰기
console.log() : 브라우저 콘솔에 쓰기
- 디버깅 목적으로 메서드 호출
window.print() : 현재 창의 내용을 인쇄

JS의 변수는 ES6에서 추가된 중요한 개념이기 때문에 다음 블로그에서 호이스팅과 변수, 재할당 등에 대해 정리를 할 것이다 !

저작자표시 비영리 변경금지

'[LG유플러스]유레카 SW' 카테고리의 다른 글

[Day5] Javscript (1)	2025.01.24
[Day3] CSS 기초 & bootstrap (4)	2025.01.22
[Day2] html, css 기초 & virtual dom (2)	2025.01.21
[Day1] html 기초 & SEO 최적화 마크업 규칙 (2)	2025.01.20

JavaScript

'[LG유플러스]유레카 SW' 카테고리의 다른 글

티스토리툴바