프로그래밍 초보자이기 때문에 내용에 오류가있을 수 있습니다.
만약, 잘못이 있으면 수정하므로 점점 지적해 주세요.
이번에는 편리한 HTML/CSS 프레임워크인 Bootstrap으로 할 수 있는 것을 코드를 중심으로 몇 가지 소개합니다.
지난번 쓴 Bootstrap의 도입 방법의 계속입니다.
샘플 페이지로 내가 만든 포트폴리오 을 둡니다.

그리드 시스템

그리드 시스템은 반응형 웹 페이지를 만드는 경우 필수 기능입니다.
사이트의 가로폭을 균등하게 12등분하고 있어, 화면의 크기가 몇 때에 몇개의 그리드를 사용하는지로 컬럼을 설정해 갑니다.
이 기능을 사용하려면 먼저 큰 테두리를 .container로 둘러싸고 그 안에 .row를 만들어 최종적으로 화면 크기 (작은 쪽에서 xs, sm, md, lg, xl)와 그리드 수를 열에 씁니다. 합니다.

index.html

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-lg-4"></div>
        <div class="col-xs-6 col-lg-4"></div>
        <div class="col-xs-12 col-lg-4"></div>
    </div>
</div>

이 경우 xs의 화면 크기로 6 개의 그리드 수를 가진 열이됩니다.

네비게이션 바

우선 코드의 예입니다.

index.html

 <nav class="navbar navbar-expand-sm mt-3 mb-3">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">skill</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">contact</a>
                </li>
            </ul>
        </div>
    </nav>   

네비게이션 바는, 태그로 둘러싸고, 클래스를 .navbar로 합니다.

카드

index.html

<div class="card" style="width:15rem;">
  <img
    class="card-img-top"
    src="./images/HTMLcss.jpg"
    alt="Card image cap"
  />
  <div class="card-body">
    <h5 class="card-title">HTML/CSS</h5>
    <p class="card-text">I can make this page</p>
  </div>
</div>

카드 클래스에서는 상반부 태그에 이미지, 하반부 태그의 .card-body 클래스에 문자를 넣을 수 있는 카드를 만들 수 있습니다.
일부 요소를 정렬하고 싶을 때 유용합니다.

양식

index.html

<form
  id="contact-form"
  class="container jumbotron"
  action="[email protected]"
  method="post"
  enctype="text/plain"
>
  <h2 class="alert-info text-md-center">CONTACT</h2>
  <div class="form-group row">
    <label for="name1" class="col-sm-2">Name:</label>
    <input
      type="name"
      id="name1"
      class="form-control col-sm-4"
      placeholder="your name"
      data-required-error="prease input your name"
      required
    />
  </div>
  <div class="form-group row">
    <label for="email1" class="col-sm-2">Email:</label>
    <input
      type="email"
      id="email1"
      class="form-control col-sm-6"
      placeholder="your email address"
      data-required-error="prease input your name"
      required
    />
  </div>
  <div class="form-group row">
    <label for="message1" class="col-sm-2">Message:</label>
    <textarea
      id="message1"
      class="form-control col-sm-10"
      rows="3"
      placeholder="write your message"
      data-required-error="prease input your name"
      required
    ></textarea>
  </div>
  <button type="submit" class="btn btn-primary d-block mx-auto">
    Submit
  </button>
</form>

폼 클래스에서는, 전체를 태그로 둘러싸고, 텍스트계 폼은 하나하나를 .form-group 클래스안에 써, 클래스.form-control를 정의합니다.