한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 리부트: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 웹 개발자 여러분! 부트스트랩 리부트의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 사람으로서, 제 지식과 경험을 여러분과 나누고 싶어 마음이 뛰어います. 커피 한 잔 (또는 차, 당신이 좋아하는 것)을 들고, 함께 뛰어보겠습니다!

Bootstrap - Reboot

부트스트랩 리부트는 무엇인가요?

시작하기 전에 작은 이야기를 들려드리겠습니다. 새로운 집으로 이사할 때를 상상해 보세요. 인테리어를 시작하기 전에 깨끗한 시작점이 필요하지 않을까요? 부트스트랩 리부트는 웹 개발에 대해 exactamente 그런 일을 합니다. 여러분의 웹 페이지에 새로운 도장을 칠하여, 일관된 기초를 만들어 줍니다.

부트스트랩 리부트는 다양한 브라우저에서 기본 HTML 요소를 일관성 있게 보이게 하는 CSS 스타일의 모음입니다. 브라우저 간의 universal 언어처럼, 여러분의 웹 사이트가 어디서 보여도 일관된 모습을 유지하도록 합니다.

접근 방식

부트스트랩 리부트의 접근 방식은 간단하면서도 강력합니다. 다음과 같은 목표를 가지고 있습니다:

  1. 웹 개발에 깨끗한 시작점을 제공
  2. 브라우저 간의 일관성을 보장
  3. 사용성과 접근성을 개선

이제 구체적인 내용으로 들어가보겠습니다!

페이지 기본 설정

부트스트랩 리부트는 전체 페이지에 대한 일부 기본 스타일을 설정합니다. 간단한 예제를 보겠습니다:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Awesome Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

이 예제에서 부트스트랩 리부트는 다음을 보장합니다:

  • 모든 요소의 box-sizing이 border-box로 설정
  • font-family이 기본 폰트 스택으로 설정
  • line-height이 1.5로 설정되어 가독성을 높임
  • body의 background-color이 흰색으로 설정

기본 폰트 스택

우리가 예전에 웹 사이트에 정확한 폰트를 지정했던 시절을 기억하시나요? 부트스트랩 리부트는 기본 폰트 스택을 도입합니다. 옷장에 항상 멋지게 보이는 옷을 가지고 있는 것처럼입니다!

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

이 폰트 스택은 여러분의 텍스트가 모든 장치에서 기본 폰트를 사용하여 멋지게 보이도록 합니다.

제목

제목은 책의 장标题처럼, 내용을 조직하고 더 쉽게 읽을 수 있도록 도와줍니다. 부트스트랩 리부트는 모든 제목 수준(h1에서 h6)에 일관된 스타일을 제공합니다.

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>

문단

문단은 여러분의 콘텐츠의 양식입니다. 부트스트랩 리부트는 그들이 쉽게 읽혀지고 적절한 간격을 유지하도록 합니다.

<p>This is a paragraph. It's easy to read thanks to Bootstrap Reboot's default styles.</p>
<p>Here's another paragraph. Notice the nice spacing between paragraphs?</p>

링크

링크는 인터넷의 고속도로처럼, 여러분의 웹 사이트의 다른 부분과 다른 웹 사이트로 연결됩니다. 부트스트랩 리부트는 그들이 쉽게 인식될 수 있도록 합니다.

<a href="https://example.com">This is a link</a>

기본적으로 링크는 파랑색이고 밑줄이 있습니다. 그것을 마우스 오버할 때, 밑줄이 사라집니다.

수평선

수평선은 노트북의 분页선처럼, 콘텐츠의 다른 부분을 분리하는 데 도움이 됩니다.

<hr>

부트스트랩 리부트는 수평선이 시각적으로 명확하지만 과하지 않게 보이도록 합니다.

목록

목록은 정보를 구조화하는 데 도움이 됩니다. 부트스트랩 리부트는 순서 있는 목록과 비순서 있는 목록 모두에 스타일을 제공합니다.

<ul>
  <li>This is an unordered list item</li>
  <li>Here's another one</li>
</ul>

<ol>
  <li>This is an ordered list item</li>
  <li>This is the second item</li>
</ol>

인라인 코드

때로는 텍스트 내에서 코드 조각을 강조해야 합니다. 부트스트랩 리부트는 이를 쉽고 시각적으로 매력적으로 만들어줍니다.

<p>Use the <code>console.log()</code> function to print to the console.</p>

코드 블록

큰 코드 조각을 사용할 때, 코드 블록을 사용할 수 있습니다. 부트스트랩 리부트는 그들이 쉽게 읽혀지고 시각적으로 구분되도록 합니다.

<pre><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}
</code></pre>

변수

프로그래밍에서 변수는 데이터를 담는 컨테이너입니다. 부트스트랩 리부트는 텍스트 내에서 변수를 표시하는 스타일을 제공합니다.

<p>The variable <var>x</var> represents the x-coordinate.</p>

사용자 입력

사용자가 입력해야 할 것을 보여줄 때, 부트스트랩 리부트는 여러분을 지원합니다.

<p>To save your work, press <kbd>Ctrl + S</kbd>.</p>

샘플 출력

때로는 프로그램의 출력이 어떤 모습일지 보여줘야 합니다. 부트스트랩 리부트는 이를 위한 스타일도 제공합니다.

<samp>This is what the output might look like.</samp>

테이블

테이블은 구조화된 데이터를 표시하는 데 좋습니다. 부트스트랩 리부트는 그들이 깨끗하고 쉽게 읽혀지도록 합니다.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

폼

폼은 사용자가 웹 사이트와 상호작용하는 방법입니다. 부트스트랩 리부트는 폼 요소에 일관된 스타일을 제공합니다.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

버튼 포인터

버튼은 상호작용 요소이며, 부트스트랩 리부트는 그들이 보이는 것을 보장합니다.

<button>Click me!</button>

버튼을 마우스 오버할 때, 커서가 포인터로 변경되어 클릭 가능을 나타냅니다.

기타 요소

부트스트랩 리부트는 다양한 다른 HTML 요소에 대한 스타일을 제공합니다. 간단한 예제를 보겠습니다:

<abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.

인용구

인용구는 중요한 인용이나 텍스트를 강조하는 데 좋습니다.

<blockquote>
  <p>To be or not to be, that is the question.</p>
  <footer>— William Shakespeare</footer>
</blockquote>

인라인 요소

부트스트랩 리부트는 인라인 요소가 일관되게 스타일이 적용되도록 합니다.

<p>This text is <strong>bold</strong>, this is <em>italicized</em>, and this is <u>underlined</u>.</p>

요약

<summary> 요소는 <details> 요소와 함께 사용되어 확장 가능/축소 가능 섹션을 만듭니다.

<details>
  <summary>Click to expand</summary>
  <p>This is the expanded content.</p>
</details>

HTML5 [hidden] 속성

부트스트랩 리부트는 HTML5 hidden 속성을 존중하여 요소를 숨깁니다.

<div hidden>This content is hidden.</div>

이제 여러분이 부트스트랩 리부트의 주요 측면을 다루었습니다. 연습이 완벽을 만드는 것을 기억하시고, 이 요소들을 자신의 프로젝트에서 실험해 보지 마세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset

이전 튜토리얼:
부트스트랩 - CSS 그리드
다음 튜토리얼:
Bootstrap - 타이포그래피