[Bootstrap4] 02. 부트스트랩4 웹페이지 만들기

Posted by 낭만사업가 정대표 블로그 on 2022-02-27 05:03:19

부트스트랩4 웹페이지 만들기

1. HTML5 doctype 추가하기

Bootstrap 4는 HTML5 doctype이 필요한 HTML 요소와 CSS 속성을 사용합니다.

lang 속성 및 올바른 문자 집합과 함께 페이지 시작 부분에 항상 HTML5 문서 유형을 포함합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 4는 모바일에서 우선합니다.

Bootstrap 4는 모바일 장치에 반응하도록 설계되었습니다. 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.

적절한 렌더링 및 터치 확대/축소를 보장하려면 <meta> 요소 내부에 다음 <head> 태그를 추가하세요.

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

width=device-width 부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정합니다 (장치에 따라 다름).

initial-scale=1 부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정합니다. 

3. Containers

또한 부트스트랩 4에는 사이트 콘텐츠를 래핑하기 위한 포함 요소가 필요합니다.

선택할 수 있는 두 가지 컨테이너 클래스가 있습니다.

  1. .container 클래스는 반응형 고정 너비 컨테이너를 제공합니다.
  2. .container-fluid 클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 제공합니다.

화면 캡처 2022-02-27 050413.jpg

 
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Try it Yourself »

다음 예는 기본 Bootstrap 4 페이지(전폭 컨테이너 포함)에 대한 코드를 보여줍니다.

Container Fluid Example

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

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Total 164
번호 제목 글쓴이 조회 날짜
39 07-15
214 07-15
162 28 07-20
161 24 07-20
160 19 07-20
159 25 07-20
158 20 07-20
157 19 07-20
156 92 06-20
155 28 07-20
154 931 06-21
153 60 06-20
152 138 02-25
151 755 02-27
150 32 07-08
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!