https://getbootstrap.com/
https://startbootstrap.com/
https://bootswatch.com/

강좌를 업로드 하는 웹사이트

1. 부트스트랩

부트스트랩은 당장 웹 사이트를 개발하는 것에 초점을 맞추었다. 부트스트랩은 웹 디자인 프레임워크이다. 프레임워크란 자주 사용되는 기능들을 모아놓거나 자동화할 수 있도록 해서 개별의 편의성을 올려주는 것을 말한다.

반응형 웹 : 어떠한 화면에서 보던간에 각 화면에 맞게 페이지가 변경되는 웹페이지를 이야기 한다.

초기셋팅

<meta charset="utf-8"/>

화면에 맞추어서 디자인 조절
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

외부 리소스 가져오기
<link rel="stylesheet" href="css/bootstrap.css">

2. 점보트론

점보트론은 부트스트랩에서 홈페이지를 소개하는 메인 전광판이다. 점보트론 안에는 버튼 등 다양한 컴포넌트가 포함될 수 있다.

container은 모든 콘텐츠를 가지고 있는 작은 박스이다.
<div class="container">
  jumbotron을 만들자
  <div class="jumbotron">
    
    <h1 class="text-center"></h1>
    <p class="text-center"></p>
    
    a 태그로 버튼을 만들어 주고 동시에 하이퍼 링크는 미정으로 남겨놓는다.
    <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button"></a></p>
  </div>
</div>

출처 : 부트스트랩 글자 조절 https://c10106.tistory.com/3724

스타일 시트

부트스트랩의 CSS에서 자신만의 독특한 디자인을 만들고 싶을때 따로 추가적으로 스타일 시트를 활용

<style type="text/css">
  .jumbotron{
  	background-image: url('images/jumbotronBackground.jpg');
  	background-size: cover;
	text-shadow:black 0.2em 0.2em 0.2em;
  	color:white;
  }
</style>

container은 모든 콘텐츠를 가지고 있는 작은 박스이다.
<div class="container">
  jumbotron을 만들자
  <div class="jumbotron">
    <h1 class="text-center"></h1>
    <p class="text-center"></p>
    
    a 태그로 버튼을 만들어 주고 동시에 하이퍼 링크는 미정으로 남겨놓는다.
    <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button"></a></p>
  </div>
</div>

3. 내비게이션 바

<nav class="navbar navbar-default">
  나름의 컨테이너라고 볼 수 있다.
  <div class="container-fluid">
    <div class="navbar-header">
      가장 기본적인 버튼
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only"></span>
        버튼 내부 성분들
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">코딩교육</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">소개<span class="sr-only"></span></a></li>
        <li><a href="#">강사진</a></li>
        
        눌렀을 때 추가적으로 나오는 부분
        <li class="dropdown">
          caret은 아래쪽 화살표를 의미
            <a href="#" class="dropdown-togle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="false">강의<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">언어</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">안드로이드</a></li>
          </ul>
        </li>
      </ul>
      검색창 만들기
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="내용을 입력하세요.">
        </div>
        <button type="submit" class="btn btn-default">검색</button>
      </form>
      <ul>
        <li class="dropdown">
          <a href="#" class="dropdown-togle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">로그인</a></li>
            <li><a href="#">회원가입</a></li>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="jumbotron">
    <h1 class="text-center"></h1>
    <p class="text-center"></p>
    <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button"></a></p>
  </div>
</div>
외부 라이브러리를 가지고 오겠다.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
//js 폴더 안에 있는 bootstrap 파일을 가지고 오겠다.
<script src="js/bootstrap.js"></script>

4. 푸터

5. 모달

6. 미디어