프론트엔드 (Bootstrap)

Wonkyun Jung·2023년 3월 15일

bootstrap 프론트엔드

프론트엔드

목록 보기

5/6

반응형 웹

반응형 웹의 장단점

모든 스마트 기기에서 접속 가능
- 반응형 웹에서 사용하는 기술들은 W3C에서 웹 표준으로 지정한 HTML과 CSS로 이루어져 있음
- 스마트 워치 같은 웨어러블 기기 뿐 아니라 스마트 TV나 게임 콘솔 등 웹표준을 지원하는 모든 기기 사용가능
가로 모드에 맞추어 레이아웃 변경 가능
- 스마트폰이나 테블릿에서 가로 모드를 돌렸을 때 너비 값이 커지면 그에 맞추어 레이아웃을 자동으로 변경
사이트 유지, 관리 용이
- PC용 Mobile용 코드가 따로 있는 것이 아니기 때문에 유지, 관리가 쉽다
- 서버 쪽 코드가 아닌 HTML과 CSS로만 되어 있어 복잡하지 않다

뷰포트(viewport)

PC화면에 보이는 내용을 모바일 기기에서 그대로 볼 수 없는 이유는 PC화면과 모바일 화면의 픽셀 표현 때문
뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대 또는 축소해 표시할 수 있다
이때 '뷰포트'란 스마트폰 화면에서 실제 내용이 표시되는 영역을 말한다
웹킷 기반인 모바일 브라우저들의 기본 뷰포트의 너비는 980px이다. 화면의 크기를 고려하여 320px로 맞추어 웹사이트를 제작하더라도 스마트폰의 모바일 브라우저의 기본 뷰포트 너비가 980px이므로 글씨와 그림은 작아진다
이를 해결하기 위해 뷰포트를 지정
뷰포트 지정

Bootstrap

Bootstrap은 빠르고 쉬운 웹 개발을 위해 구조를 미리 만들어준 무료 프런트 엔드 프레임 워크이다
Bootstrap에는 typograpy, forms, buttons, tables, navigation, modal, image및 기타 여러가지 CSS기반 디자인 템플릿(css style과 layout 정렬을 class만으로 제어)과 선택적 JavaScript플러그인이 포함되어 있다
Bootstrap은 또한 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다

Bootstrap 장점

사용하기 쉬운: HTML과 CSS에 대한 기본적인 지식만 있으면 누구나 Bootstrap을 사용할 수 있다
반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정된다
모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임 워크의 일부이다.

Bootstrap 기본 템플릿

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>