웹 개발의 효율성? Bootstrap

March 23, 2023

📚 What is TIL?

웹 개발을 보다 효율적으로 수행하려면?

Tailwind CSS | Bootstrap | SASS | D3 | Canvas 와 같은 도구 및 프레임워크를 사용한다

웹 개발을 더 쉽고 효율적으로 만들기 위한 목적이다
반응형 웹 사이트나 웹 애플리케이션을 더 적은 코드로 더 빠르게 만드는 데 도움이 된다

💡 그렇다면 효율성이 중요한 이유는?

🔎 전반적으로 시간과 비용을 절약할 수 있다
유지 보수및 업데이트하기 쉬운 확장 가능한 코드를 만들 수 있기 때문이다

Tailwind CSS

사전에 정의된 CSS 클래스를 제공하는 개발 프레임워크이다
유연성으로 인해 가장 활용되고 있는 프레임워크이다

🔎 HTML 요소의 스타일을 쉽게 지정하는 데 사용할 수 있다

SASS

CSS 코드를 보다 효율적으로 작성할 수 있게 해주는
variables, nesting, mixins, functions 과 같은 추가 기능을 제공하는 CSS 전처리기이다

🔎 작성해야 하는 CSS 코드의 양을 줄이는 데 도움이 된다

Bootstrap

극한의 효율성을 자랑하는 프레임워크로 사전에 정의된 css 클래스를 제공한다
과거 부트스트랩이 무겁다고 했었던 건 제이쿼리가 있었던 버전이고
지금은 라이트하고 더 쓸만해졌다고한다

💡 그렇다면 Tailwind CSS와의 차이점은 무엇인가?

🔎 Bootstrap 은 미리 디자인된 UI 컴포넌트 및 CSS grid system이 제공된다

🔎 반면에, Tailwind CSS 는 미리 디자인된 UI 컴포넌트를 제공하지 않고
사용자 정의 디자인을 만드는 데 사용할 수 있는 building blocks 세트를
제공하기 때문에 유연성 측면에서 많은 차이점이 있다

Bootstrap 의 grid system

grid system은 반응형 레이아웃을 쉽게 만들 수 있는 도구이다
12열 grid를 기반으로 여러 row와 col로 나누어 레이아웃을 만들 수 있다
텍스트, 이미지 등등 모든 유형의 컨텐츠를 포함시킬 수 있는 공간을 마련할 수 있다

🔎 .container - 고정 너비 컨테이너로 몇개의 row를 컨테이너에 포함시킬 것인지 지정할 수 있다
🔎 .container-fluid - 뷰포트에 따른 전체 너비 컨테이너를 만든다
🔎 .row - 컨텐츠를 넣을만한 행을 지정해줄 수 있다
🔎 .col - 각 row 내에서 열을 지정해줄 수 있다

사용해보기

기본 그리드 레이아웃

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

✔️ 컨테이너 너비의 절반인 두 개의 열이 생성된다

중첩된 그리드 레이아웃

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">Column 2A</div>
        <div class="col-md-6">Column 2B</div>
      </div>
    </div>
  </div>
</div>

✔️ 두 개의 열이 있는 레이아웃이 생성되며 두 번째 열에는 두 개의 중첩된 열이 포함된다

반응형 그리드 레이아웃

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
    <div class="col-lg-4 col-md-6 col-sm-12">Column 2</div>
    <div class="col-lg-4 col-md-12 col-sm-12">Column 3</div>
  </div>
</div>

✔️ 큰 화면에 세 개의 열, 중간 화면에 두 개의 열, 작은 화면에 한 개의 열이 있는 레이아웃이 생성된다

부트 스트랩.. 스팩으로 쓸만한 점 무엇일까 생각이든다면?

🔎 프로젝트를 한두개만 해보자
🔎 그러면 어느것을 스팩으로 쓸지 감이 익혀진다고 한다
🔎 color 시스템 grid 시스템을 알면 좋다

부트 스트랩을 스팩에 넣을 수 있나?

그렇다 부트스트랩으로 제작하는 회사도 많다
큰 이익을 얻기 위해선 빠르게 product를 만들어야하는데
정형화된 페이지를 원하는 기업도 많기 때문에
부트스트랩을 사용하면 여러방면에서 좋을 수 있다

url

무료템플릿을 가지고 연습을 해봤는데
정말 간단하게 커스텀 할 수 있었다…

클래스는 권장되는 순서가 있는가?

부트스트랩은 순서가 상관이 없다
tailwind같은경우에는 순서가 있다

modal의 위치

modal은 클릭하는 버튼의 아래에 위치하지 않는다
맨 밑부분에 모아두는 것이 좋다

mt 주면 important! 들어가는데 이거 써도 되는건가?

클래스를 준 이유에 초점을 맞춰서 더 중요하게 다루기위한 컨셉이라고 생각하면 될 것 같다

🔗 TIP

iframe

웹 사이트에서 iframe을 사용하여 신뢰할 수 없는 소스에서
콘텐츠를 로드하는 경우 보안 취약성에 노출 될 수 있다
예를 들어 해커는 iframe을 사용하여 피싱 페이지를 로드하거나 악성코드를 사용자의 브라우저에 삽입할 수 있다 조심조심..

정해진 컨벤션이 없다고 했을때

막연하게 코드를 짜기보다는 어느정도의 컨벤션을 짚고 가는 것이 좋다
정 모르겠으면 구글의 컨벤션을 따르도록 하자!

💡 혼자서 공부할 때는 실수를 많이 할것 같은 컨벤션을 기록해두고 정해진 컨벤션에 따르는 연습을 해보자

리소스 사용의 고려

서비스를 만들 때 꼭 필요하지 않는 기능을 만들지 않는 것이 중요하다
중요한것에 리소스를 쓰는것이 중요하다
디자인적으로 포기해야하는 것도 있다

💡 바퀴를 만들지말자

주석의 활용

<!-- header -->
<!-- //header -->

💡 위와같이 부분적인 태그는 처음과 끝을 나타내는 습관을 들이자
💡 코드가 길어지면 유지보수 측면에서 용이하다

DongSup Ahn