[Bootstrap] ToDoList 스타일 꾸며보기

https://getbootstrap.com/

Bootstrap

자바스크립트적인 요소도 부트스트랩으로 처리할 수 있음.

따라서, CSS와 JS를 처리하는 코드 2개가 필요하다.

 

grid와 min의 차이?

- 기능은 다 들어있으나, 공백과 엔터를 모조리 없애버리고 한 줄로 짜논 것이 min.css (즉, 전부 다 압축시켜놈)

- bootstrap.css 는 모두를 포함하고 있으므로, 최적화를 위한 게 아니라면 이 파일 하나만 있어도 됨.

- RTL : Right To Left

- 실습에서는 파일을 다운로드 해서 쓰기 보다는 CDN 코드를 CSS와 JS에 첨부하여 사용하도록 한다.

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>

- 부트스트랩은 모든 마진을 초기화시킨다. 모든 브라우저를 동일하게 만들기 위해서.

- 부트스트랩 중 Buttons > Outlines Buttons 를 적용한다. 부트스트랩에서 이미 만들어논 것을 HTML에 직접 클래스를 만들어 사용.

    <button id="btn-all" type="button" class="btn btn-outline-primary">전체</button>
    <button id="btn-ok"  type="button" class="btn btn-outline-success">한거</button>
    <button id="btn-no"  type="button" class="btn btn-outline-danger">안한거</button>

 

 

---

 

Icon 적용하기

- 부트스트랩 Icon은 글자로 치기때문에 사이즈 조절 및 색상변경(color)이 자유롭다.

https://icons.getbootstrap.com/

Bootstrap Icons

 

- <i> 태그: 아이콘 태그

<i class="bi bi-android2" style="color:green"></i>
<button id="regist"><i class="bi bi-pencil-square"></i></button>

 

 

TodoList

---

나의 할일

 

 

---

 

Flex 적용하기

https://getbootstrap.com/docs/5.2/utilities/flex/

Flex

- 부트스트랩엔 Flex도 있으므로, 이를 적용하면?

- d-flex를 적용하면 일렬 배치 row로 컨텐츠들이 배치된다.

- space-between을 주어서 각 <div>들이 양 사이드에 붙도록 배치한다.

  <div class="container">
    <h1>TodoList</h1>
    <div class="d-flex justify-content-between">
      <div>
        <i class="bi bi-android2" style="color:green"></i>
        <input type="text" placeholder="할 일 입력" id="todo-value" />
        <button id="regist"><i class="bi bi-pencil-square"></i></button>
      </div>
      <div>
        <button id="btn-all" type="button" class="btn btn-outline-primary">전체</button>
        <button id="btn-ok"  type="button" class="btn btn-outline-success">한거</button>
        <button id="btn-no"  type="button" class="btn btn-outline-danger">안한거</button>
      </div>
    </div>

TodoList

---

나의 할일

 

---

 

 

Spacing 적용하기

https://getbootstrap.com/docs/5.2/utilities/spacing/

Spacing

- 마진과 패딩을 줄 수 있다.

 

TodoList

---

나의 할일