'전체 글'에 해당되는 글 390건

네비게이션 바를 구현해보기에 앞서 버튼 드롭 스타일을 알고 넘어가자. 버튼과 앵커 타입이 있는데 방식의 차이일 뿐 결과는 차이가 없다.. dropdown 클래스로 버튼과 dropdown-menu 클래스를 감싸고 버튼에 클래스 dropdown-toggle 를 추가, 태그속성 data-toggle = "dropdown" 을 추가한다. dropdown-menu 에는 dropdown-item 클래스 추가

<div class="container mt-3">
     <h2 class="m-4">드롭 스타일</h2>
        <h5><code>버튼 드롭</code></h5>
        <div class="dropdown">
            <!-- 버튼과 드롭다운-메뉴를 감싸는 .dropdown/.dropup /.dropright 충분한 공간이 있어야함 -->
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-header">링크모음</div>
                <a class="dropdown-item" href="http://www.daum.net" target="_blank">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <div class="dropdown-header">액션모음</div>
                <a class="dropdown-item" href="#" target="_blank">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
                <a class="dropdown-item" href="#">Action 3</a>
            </div>
        </div>
    </div>
    <div class="container mt-3">
        <h2 class="m-4">프로그래스 스타일2</h2>
        <h5><code>앵커 드롭</code></h5>
        <div class="dropdown">
            <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
                Dropdown button
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </div>
    </div>

네비게이션 바

nav =>  .navbar  .navbar-expand- ( xl | lg | md | sm )
( extra large, large, medium, small)

ul  =>  .navbar-nav 

li  =>  .nav-item 

a => .nav-link 

기본 네비게이션 만들어보기

<nav class="navbar navbar-expand-sm bg-light">
        <!-- 리스트 : 부트스트랩은 모바일 우선이라 화면이 작으면 아래로 쌓아서 내려온다 -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

부트스트랩 메뉴 (네비게이션 바)에 스타일 주기

navbar-dark => 글자색 화이트

navbar-light => 글자색 블랙

bg-color => ( .bg-primary, .bg-success, .bg-info, .bg-warning, 
.bg-danger, .bg-secondary, .bg-dark, .bg-light)

a => .active  : 현재 active 한 링크 상태로

a => .disabled  : 링크 안되는 상태로

form-inline => form 태그 안의 요소들을 inline 요소로 바꾸어 Nav 안에 일렬로 배치
( 리스트 아이템들의 배치와 마찬가지)

input . form-control => input 텍스트창을 보기좋게 디자인

ml-auto => 폼 요소들을 오른쪽으로 이동 ( Flex 배치)

data-target => 리스트 + 폼 을 감싸는 div#collapsibleNavbar

navbar-expand-md

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- 리스트 : 부트스트랩은 모바일 우선이라 화면이 작으면 아래로 쌓아서 내려온다 -->
        <ul class="navbar-nav navbar-dark">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link 3</a>
            </li>
            <li class="nav-item dropdown">
                <!-- 드롭다운 메뉴-->
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    Dropdown
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
        </ul>
        <!-- Search -->
        <form class="form-inline" action=""> 
             <!-- inline여야 간격이 없이 메뉴처럼 나온다-->
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <!-- form-control 입력창 꾸며주는 클래스 -->
            <button class="btn btn-success" type="submit">Search</button>
        </form>
    </nav>

<form class="form-inline ml-auto" action=""> 
     <!-- inline여야 간격이 없이 메뉴처럼 나온다. ml-atuo : 우측으로 붙게하기-->
     <input class="form-control mr-sm-2" type="text" placeholder="Search">
     <!-- form-control 입력창 꾸며주는 클래스 -->
     <button class="btn btn-success" type="submit">Search</button>
</form>

데스크탑-모바일 크기에 따른 변동형 디자인도 만들어보기

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- 제목 -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <!-- 리스트 : 부트스트랩은 모바일 우선이라 화면이 작으면 아래로 쌓아서 내려온다 -->
            <ul class="navbar-nav navbar-dark">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Link 3</a>
                </li>
                <li class="nav-item dropdown">
                    <!-- 드롭다운 메뉴-->
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                        Dropdown
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </li>
            </ul>
            <!-- Search -->
            <form class="form-inline ml-auto" action="">
                <!-- inline여야 간격이 없이 메뉴처럼 나온다. ml-atuo : 우측으로 붙게하기-->
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <!-- form-control 입력창 꾸며주는 클래스 -->
                <button class="btn btn-success" type="submit">Search</button>
            </form>
        </div>
    </nav>

  <div class="container-fluid">
        <h1>Bootstrap</h1>
        <h3><code>.jumbotron</code></h3>
        <div class="jumbotron">
            <h1 class="display-4">점보트론</h1>
            <p class="lead">점보트론(Jumbotron)는 소니에서 1985년 공개한 대형 스크린
                TV의 상표명으로 각종 스포츠 경기장 및 콘서트장에서 사용되었다.</p>
            <!-- lead : 일반 글자보다 크게 -->
            <hr class="my-3">
            <p>2001년 공식적으로 단종 되었으나 점보트론의 단어 자체는 일반명사화 되어
                대형 전광판을 통칭하기도 한다.</p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">자세히 알아보기</a>
            </p>
        </div>
    </div>

<div class="container">
        <!-- container는 어디든 쓸 수 있음. 공백 등의 값을 갖고 싸줌 -->
        <h2 class="m-4">버튼 스타일</h2>
        <h3><code>.btn .btn-primary</code></h3>
        <div class="row d-flex flex-wrap">
            <!-- 클래스명 앞글자가 대문자이면 안됩니다. -->
            <button type="button" class="btn">Basic</button>
            <button type="button" class="btn btn-primary m-1">Primary</button>
            <button type="button" class="btn btn-secondary m-1">Secondary</button>
            <button type="button" class="btn btn-success m-1">Success</button>
            <button type="button" class="btn btn-info m-1">Info</button>
            <button type="button" class="btn btn-warning m-1">warning</button>
            <button type="button" class="btn btn-danger m-1">danger</button>
            <button type="button" class="btn btn-dark m-1">dark</button>
            <button type="button" class="btn btn-light m-1">light</button>
            <button type="button" class="btn btn-link m-1">Link</button>
        </div>
        <div class="row mb-3">
            <button type="button" class="btn btn-outline m-1">basic</button>
            <button type="button" class="btn btn-outline-primary m-1">primary</button>
            <button type="button" class="btn btn-outline-secondary m-1">secondary</button>
            <button type="button" class="btn btn-outline-success m-1">Success</button>
            <button type="button" class="btn btn-outline-info m-1">info</button>
            <button type="button" class="btn btn-outline-warning m-1">warning</button>
            <button type="button" class="btn btn-outline-danger m-1">danger</button>
            <button type="button" class="btn btn-outline-dark m-1">dark</button>
            <button type="button" class="btn btn-outline-light m-1">light</button>
            <button type="button" class="btn btn-outline-link m-1">link</button>
        </div>
        <div class="">
            <h2 class="m-4">배지 스타일</h2>
            <h3><code>.badge .badge-primary</code></h3>
            <div>
                <span class="badge badge-primary">primary</span>
                <span class="badge badge-secondary">secondary</span>
                <span class="badge badge-success">Success</span>
                <span class="badge badge-info">info</span>
                <span class="badge badge-warning">warning</span>
                <span class="badge badge-danger">danger</span>
                <span class="badge badge-dark">dark</span>
                <span class="badge badge-light">light</span>
                <span class="badge badge-link">link</span>

            </div>
        </div>

  <div class="container">
        <h2 class="m-4">프로그래스 스타일</h2>
        <h3><code>.progress .progress-bar</code></h3>
        <div>
            <!-- Blue -->
            <div class="progress" style="height: 2em">
                <div class="progress-bar" style="width:10%"></div>
            </div><br>
            <!-- Green -->
            <div class="progress">
                <div class="progress-bar bg-success" style="width:20%"></div>
            </div><br>
            <!-- Turquoise -->
            <div class="progress">
                <div class="progress-bar bg-info" style="width:30%"></div>
            </div><br>
            <!-- Orange -->
            <div class="progress">
                <div class="progress-bar bg-warning" style="width:40%"></div>
            </div><br>
            <!-- Red -->
            <div class="progress">
                <div class="progress-bar bg-danger" style="width:50%"></div>
            </div><br>
            <!-- White -->
            <div class="progress border">
                <div class="progress-bar bg-white" style="width:60%"></div>
            </div><br>
            <!-- Grey -->
            <div class="progress">
                <div class="progress-bar bg-secondary" style="width:70%"></div>
            </div><br>
            <!-- Light Grey -->
            <div class="progress border">
                <div class="progress-bar bg-light" style="width:80%"></div>
            </div><br>
            <!-- Dark Grey -->
            <div class="progress">
                <div class="progress-bar bg-dark" style="width:90%"></div>
            </div><br>
            <!-- Striped -->
            <div class="progress">
                <div class="progress-bar bg-info progress-bar-striped" style="width:30%"></div>
            </div><br>
            <!-- Animated -->
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
            </div><br>
            <!-- Multi -->
            <div class="progress">
                <div class="progress-bar bg-success" style="width:40%">
                    Free Space
                </div>
                <div class="progress-bar bg-warning" style="width:10%">
                    Warning
                </div>
                <div class="progress-bar bg-danger" style="width:20%">
                    Danger
                </div>
            </div>
        </div>

기본 테이블

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
        <div class="container">
            <h2>Basic Table</h2>
            <h3><code>.table</code></h3>            
            <table class="table">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
</body>
</html>

줄무늬 테이블

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
        <div class="container">
            <h2>Basic Table</h2>
            <h3><code>.table</code></h3>            
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
</body>
</html>

게시판 Pagination : 페이지 이동 링크

 <nav>
      <ul class="pagination justify-content-center">
         <li class="page-item"><a class="page-link" href="">이전</a></li>
         <li class="page-item"><a class="page-link" href="">1</a></li>
         <li class="page-item"><a class="page-link" href="">2</a></li>
         <li class="page-item"><a class="page-link" href="">3</a></li>
         <li class="page-item"><a class="page-link" href="">다음</a></li>
      </ul>
 </nav>

실습하기 : 부트스트랩으로 간편한 게시판 모양 만들기

.table-striped

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
        <div class="container">
            <h2>게시판</h2>      
            <table class="table">
		<!--<table class="table table-striped table-hover">-->
              <thead>
                <tr>
                  <th>번호</th>
                  <th>제목</th>
                  <th>작성자</th>
                  <th>날짜</th>
                  <th>조회수</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>98</td>
                  <td>누가 부트스트랩 공부한다면서요?</td>
                  <td>존 김</td>
                  <td>2019.07.05</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>100</td>
                  <td>꺼진불도 다시보자</td>
                  <td>샘 표</td>
                  <td>2019.07.04</td>
                  <td>2</td>
                </tr>
                <tr>
              </tbody>
            </table>
          </div>
</body>
</html>

.pagination

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <div class="container">
        <h2>게시판</h2>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>날짜</th>
                    <th>조회수</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>98</td>
                    <td>누가 부트스트랩 공부한다면서요?</td>
                    <td>존 김</td>
                    <td>2019.07.05</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>꺼진불도 다시보자</td>
                    <td>샘 표</td>
                    <td>2019.07.05</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>101</td>
                    <td>악마의 음료 최고 레시피는?</td>
                    <td>강잔디</td>
                    <td>2019.07.05</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>102</td>
                    <td>샐러드 최대 몇접시</td>
                    <td>섭웨이</td>
                    <td>2019.07.05</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <nav>
            <ul class="pagination justify-content-center">
              <li class="page-item"><a class="page-link" href="">이전</a></li>
              <li class="page-item"><a class="page-link" href="">1</a></li>
              <li class="page-item"><a class="page-link" href="">2</a></li>
              <li class="page-item"><a class="page-link" href="">3</a></li>
              <li class="page-item"><a class="page-link" href="">다음</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

.table-dark .thead-dark

<table class="table table-dark table-hover">

 <thead>
                <tr class="thead-light">  <!-- thead-dark -->
                    <th>번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>날짜</th>
                    <th>조회수</th>
                </tr>
            </thead>

이전 부트스트랩 내용

오늘은 이어서 부트스트랩에서 마진 클래스, 패딩클래스 그리고 디스플레이 플렉스에 대해 정리합니다.

margin, padding 마진과 패딩

m - (0 ~ 5) : 마진 클래스로 (...ml , mt , mb, mr)

 <div class="container">
      <div class="bg-danger m-5">한개의 div 입니다.</div>
      <div class="bg-info m-4">한개의 div 입니다.</div>
      <div class="bg-warning m-3">한개의 div 입니다.</div>
      <div class="bg-success m-2">한개의 div 입니다.</div>
      <div class="bg-primary m-1">한개의 div 입니다.</div>
</div>

p - (0 ~ 5) : 패딩 클래스 (...pl , pt , pb, pr)
w (width) - px , mx - auto

Flex

flex 시작  :  .d-flex 

수평정렬

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around

수직 정렬

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

아이템 각각의 (세로) 수직 정렬 방법
- 아이템 개별 정렬은 수직 정렬만 있고 수평정렬은 없다.

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch

.border : 부트스트랩으로 보더박스를 표시.
.wrap : 아이템이 화면끝으로 올 때 줄바꿈
.nowrap : 줄안바꿈

실습하기

.d-flex.flex-nowrap>(.p-2.border.bg-success{Item $})*9 //한번에 여러 아이템을 적을 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 flex</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .flex-height {
            height: 40vh; /* 뷰포트높이 % vw(가로) */
        }
    </style>
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <!-- flex -->
    <div class="d-flex p-3 bg-secondary text-white justify-content-end">
        <div class="p-2 bg-info">flex item 1</div>
        <div class="p-2 bg-warning">flex item 2</div>
        <div class="p-2 bg-primary">flex item 3</div>
        <!-- content-end/center/start(안적었을때 기본) -->
    </div>

    <div class="flex-height d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info align-self-start">flex item</div>
        <div class="p-2 bg-warning">flex item</div>
        <div class="p-2 bg-primary align-self-end">flex item</div>
    </div>

    <div class="container mt-3">
        <h2>Flex</h2>
        <div class="d-flex p-3 bg-success text-white">
            <div class="p-2">Home</div>
            <div class="p-2">Search</div>
            <div class="p-2 border ml-auto">Logout</div>
            <!-- 수직 제외하고는 같이 묶어서만 바뀌는 상위태그임-->
        </div>
    </div>

    <!-- wrap -->
    <div class="container mt-3"> 
        <h2>Wrap</h2> 
        <p><code>.flex-wrap:</code></p> 
        <!-- wrap : 아이템이 화면끝으로 올 때 줄바꿈 -->
        <div class="d-flex flex-wrap text-white bg-light"> 
            <div class="p-2 border bg-success">Item 1</div> 
            <div class="p-2 border bg-success">Item 2</div> 
            <div class="p-2 border bg-success">Item 3</div> 
            <div class="p-2 border bg-success">Item 4</div> 
            <div class="p-2 border bg-success">Item 5</div> 
            <div class="p-2 border bg-success">Item 6</div> 
            <div class="p-2 border bg-success">Item 7</div> 
            <div class="p-2 border bg-success">Item 8</div> 
            <div class="p-2 border bg-success">Item 9</div> 
        </div> 
        <br> 
        <p><code>.flex-wrap-reverse:</code></p> 
        <!-- nowrap : 줄안바꿈 -->
        <div class="d-flex flex-nowrap text-white bg-light">
            <div class="p-2 border bg-success">Item 1</div> 
            <div class="p-2 border bg-success">Item 2</div> 
            <div class="p-2 border bg-success">Item 3</div> 
            <div class="p-2 border bg-success">Item 4</div> 
            <div class="p-2 border bg-success">Item 5</div> 
            <div class="p-2 border bg-success">Item 6</div> 
            <div class="p-2 border bg-success">Item 7</div> 
            <div class="p-2 border bg-success">Item 8</div> 
            <div class="p-2 border bg-success">Item 9</div> 
        </div> 
     </div>

</body>

</html>

부트스트랩 클래스 container vs. container-fluid

화면 사이즈가 모바일 사이즈로 가면 container 클래스는 container-fluid 처럼 변한다. 부트스트랩의 클래스 container 안에 다른 container 클래스를 사용할 수 없다.

부트스트랩 Grid layout

총 12개의 칼럼을 쪼갠다고 보면 된다. 분류는 대형모니터, 일반, 태블릿, 핸드폰 정도로 나뉜다. 문법은 아래 표와 같이 쓰인다. 부트스트랩의 그리드 시스템에서는 화면사이즈가 작을때(모바일) 우선적으로 적용이 되고 설정한 화면 사이즈 이상일때 원하는 비율로 표시된다.

실습하기 1

<style>
    body{
      background: aqua;
    }
    @media screen and (min-width:576px){
      body{
        background: red;
      }
    }
    @media screen and (min-width:768px){
      body{
        background: blue;
      }
    }
    @media screen and (min-width:992px){
      body{
        background: green;
      }
    }
    @media screen and (min-width:1200px){
      body{
        background: yellow;
      }
    }
  </style>

실습하기 2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 시작</title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
                body{
                  background: aqua;
                }
                @media screen and (min-width:576px){
                  body{
                    background: red;
                  }
                }
                @media screen and (min-width:768px){
                  body{
                    background: blue;
                  }
                }
                @media screen and (min-width:992px){
                  body{
                    background: green;
                  }
                }
                @media screen and (min-width:1200px){
                  body{
                    background: yellow;
                  }
                }
              </style>
</head>

<body>
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
	 <div class="container">
              <div class="row"> 한줄
                    <div class="col-sm-3 col-md-5" style="background: #cff">content1</div>
                    <div class="col-sm-3 col-md-1 bg-danger">I am single column</div>
                    <div class="col-sm-3 col-md-5" style="background: #cff">content1</div>
                    <div class="col-sm-3 col-md-1 bg-danger">I am single column</div>
                </div>
              </div>
              <div class="container-fluid">
                <div class="row">
                  <div class="col bg-info">I am single column</div>
                  <div class="col bg-warning">I am single column</div>
                   <div class="col bg-dark">I am single column</div>
                  <div class="col bg-danger">I am single column</div> 
                </div>
              </div>
</body>
</html>

   <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-3 col-lg-2" style="background:#CFF">Lorem ipsum dolor</div>
        <div class="col-sm-6 col-md-3 col-lg-2" style="background:#9FC">Lorem ipsum dolor</div>
        <div class="col-sm-6 col-md-3 col-lg-2" style="background:#CFF">Lorem ipsum dolor</div>
        <div class="col-sm-6 col-md-3 col-lg-2" style="background:#9FC">Lorem ipsum dolor</div>
      </div>
    </div>

html태그와 조금 형식과 디자인이 다르다. 글자 서식 (Typohography)의 기본세팅은 폰트 사이즈 (16px), line-height 1.5em, font-weight 400이다. ? em : 현재 폰트의 배수 ? rem: 기본폰트(16px) 의 배수이다. display는 애플 시스템 폰트가 기본이다. 각 상세한 부트스트랩의 폰트 사이즈는 아래 표를 참고.

텍스트 색상(Colors)

​
글자정렬 ( Alignment ) : .text-center/right/left
글자색 클래스 : <h1 class="text-center">텍스트 Colors</h1>

영문철자 : .text-lowercase/uppercase/capitalize
문단정렬 : .text-left/center/right/justify/nowrap

실습하기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 시작</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">      
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <h1>Bootstrap</h1>
    <h2>Bootstrap</h2>
    <h3>Bootstrap</h3>
    <h4>Bootstrap</h4>
    <h5>Bootstrap</h5>
    <h6>Bootstrap</h6>
    <hr>
    <h1>태그&lt;small&gt;은 작은 문장</h1>
    <p><small>태그&lt;small&gt;은 작은 문장을 만들때 사용</small></p>
    <hr>
    <p>하나의 문장을 만들때 p 태그</p>
    <p>마크(mark)는 <mark>강조하는</mark>단어에</p>
    <hr>
    <blockquote cite="http://naver.com">
        <p>해리포터와 불의 잔에서 Harry Potter And The Goblet Of Fire
            <cite>조앤 K. 롤링</cite></p>
    </blockquote>
    <hr>
    <pre>
          pre 태그를 사용하면
          고정폭 폰트로 바뀌고,    스페이스
          와        줄바뀜이 그대로 나
          타 납 니 다   .
    </pre>

    <!-- 똑같은 결과.h1은 클래스로 정의가 되어있기 때문.클래스가 우선순위 -->
    <div>
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>
        <h3>h3. Bootstrap heading</h3>
        <h4>h4. Bootstrap heading</h4>
        <h5>h5. Bootstrap heading</h5>
        <h6>h6. Bootstrap heading</h6>
    </div>
    <div>
        <p class="h1">h1. Bootstrap heading</p>
        <p class="h2">h2. Bootstrap heading</p>
        <p class="h3">h3. Bootstrap heading</p>
        <p class="h4">h4. Bootstrap heading</p>
        <p class="h5">h5. Bootstrap heading</p>
        <p class="h6">h6. Bootstrap heading</p>
    </div>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>

    <!-- <li></li>  //리스트 -->
    <ul class="list-unstyled">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit
          <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
          </ul>
        </li>
        <li>Faucibus porta lacus fringilla vel</li>
        <li>Aenean sit amet erat nunc</li>
        <li>Eget porttitor lorem</li>
      </ul>

    <!-- 가운데정렬 -->
    <!-- <h1 class="text-center">텍스트 중앙정렬</h1> -->

    <!-- 텍스트색 -->
    <h1 class="text-center">텍스트 Colors, 텍스트 배경</h1>
    <p class="text-primary text-center">text-primary</p>
    <p class="text-secondary text-center">text-secondary</p>
    <p class="text-success text-center">text-success</p>
    <p class="bg-primary text-center">bg-primary</p>
    <p class="bg-secondary text-center">bg-secondary</p>
    <p class="bg-success text-center">bg-success</p>
    <p class="bg-danger text-center">bg-danger</p>
    <p class="bg-warning text-center">bg-warning</p>
    <p class="text-muted text-center">text-muted</p>
    <p class="text-white bg-dark text-center">text-white</p>

    <pre>(dd<code>ddd</code>)</pre>
    <code><xmp><h1>코드표현</h1></xmp></code>
    <blockquote>ss<code>ddd</code></blockquote>
    <kbd>ctrl+f</kbd>
	<br>
   <div class="container">
    <h2>부트스트랩 영문철자</h2>
        <code>.text-lowercase</code>
        <p class="text-lowercase">HTML</p>
        <p class="text-uppercase">HTML</p>
        <p class="text-right">HTML</p>
        <p class="text-nowrap">HTML</p>
	</div>
</body>
</html>

트위터에서 시작된 제이쿼리 기반의 오픈 소스 웹프레임워크. 시작은 디자이너 하나와 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다. 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것이며, 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻는 프레임워크이다. 

Bootstrap 사용 목적

1. 웹 사이트 디자인 때문에 개발 시간이 길어지는 문제를 해결
2. 모바일 환경에 적합한 반응형​ 웹 사이트 개발

​

프레임워크(Framework)

소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것.

프레임워크 vs 라이브러리(=모듈)

- 라이브러리 : 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합. 라이브러리는 자동차의 기능을 하는 부품을 의미
- 프레임워크 : 자동차의 프레임, 즉 기본적으로 구성하고 있는 뼈대

프레임워크의 장, 단점

장점

1) 효율적

- 아무것도 없는 것에서 코드를 일일이 짜는 것보다 시간과 비용이 훨씬 절약되며 생산성이 좋아집니다.

2) Quality 향상

- 버그 발생 가능성을 처리해줌으로써 개발자가 반복 작업에서 실수하기 쉬운 부분을 커버해줍니다. 다수의 개발자가 사용하며 수정하다 보니 이미 검증된 코드라고 볼 수 있습니다.

3) 유지 보수 효율적

- 프레임워크를 쓰지 않고 일일이 코드를 짜 놓은 경우, 회사 입장에서 개발 담당자가 바뀌어버리면 곤란해집니다. 그러나 Framework를 사용하면 코드가 보다 체계적이어서 담당자가 바뀌더라도 위험부담을 줄일 수 있으며 유지 보수에 안정적입니다.

​

단점

1) 학습시간이 길다

- 코드를 본인이 짜 놓은 것이 아니기 때문에, 프레임워크에 있는 코드를 습득하고 이해하는 데 오랜 시간이 걸립니다.

​

2) 제작자의 의도된 제약 사항

- 제작자가 설계한 구조를 어느 정도 유지한 채 코드에 살을 붙여나가야 합니다. 따라서 개발자는 자유롭고 유연하게 개발하는 데 한계가 있습니다.

​

​

​Bootstrap 설치

​

1. CDN으로 자동으로 받는 방법

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 시작</title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <div class="bg-danger text-white text-center">
        <h1>제목입니다.</h1>
        <p>문장입니다.</p>
    </div>
</body>
</html>

2. Local 에 직접 다운로드 받는 방법

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 시작</title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <div class="bg-danger text-white text-center">
        <h1>제목입니다.</h1>
        <p>문장입니다.</p>
    </div>
</body>
</html>

Ajax

Asynchronous JavaScript and XML의 약자로, Ajax 가 등장하기 이전에는 웹 브라우저가 어떤 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달해 주었다. 웹 브라우저는 서버로부터 받은 마크업 데이터(HTML)를 브라우저 창에 렌더링하는 일을 했다. 이 방법은 웹 브라우저에게도, 서버에게도 서로 불편했는데 브라우저는 매번 똑같은 레이아웃의 페이지를 처음부터 다시 렌더링해야 했고 서버 역시 매번 같은 페이지를 렌더링(이 경우에는 HTML 파일 생성)해야 해서 서로 부담이 되었다. Ajax 기술을 사용하지 않는 사이트가 특유의 깜빡거림 현상이 생기는 이유가 매번 페이지를 싹 지우고 처음부터 다시 모든 것을 그려내기 때문.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이때 서버와는  JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있다.

로드 함수

실습하기

jQuery-review1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery - 이벤트</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>
    <header>
        <h1>jquery Ajax</h1>
    </header>

    <!-- <div id="contents">
            <ul class="people"> 
                <li>첫번째</li> 
                <li>두번째</li> 
            </ul> 
    </div> -->
    <div id="container">
        <div id="result"></div>
        <ul id="users"></ul>
    </div>


    <script>
        // $("#contents ul.people li").each(function(){ 
        //         //console.log($(this)); 태그만
        //         console.log($(this).text()); //텍스트만
        // }); 

        //$('#result').load('test.html');
        // $('#result').load('test.html', function (
        //     responseTxt, statusTxt, xhr) {
        //     if (statusTxt == 'success') {
        //         alert('이상없음');
        //     } else if (statusTxt == 'error') {
        //         alert('에러: ' + xhr.statusText);
        //     }
        // });

        // $.get('test.html', function(data){  //메소드는 점을 찍는다. 
        // 		$('#result').html(data);
        // 	});

        // $.getJSON('user.json', function(data){
        // 	$.each(data, function(i, user){
        // 		console.log(i , user); //0 Object 1 Object ...
        // 		$('ul#users').append(`<li> ${user.first_name} </li>`);
        // 	});
        // });

        $.ajax({
            method: 'GET',                             // HTTP 요청 방식(GET, POST)
            url: 'https://jsonplaceholder.typicode.com/posts',   // 서버의 URL 주소
            dataType: 'json'                             // 서버에서 보내줄 데이터의 타입
        }).done(function (data) {       // HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
            console.log(data);
            $.each(data, function (i, item) {  //each(매개변수, 함수)
                $('#result').append(`<h3>${item.title}</h3><p>${item.body}</p>`)
            });
        });


    </script>
</body>

</html>

text.html

hello world
<!-- text.html 내용 -->

user.json

[
    {
        "id": 1,
        "first_name": "Jeanette",
        "last_name": "Penddreth",
        "email": "jpenddreth0@census.gov",
        "gender": "Female",
        "ip_address": "26.58.193.2"
    }, 
    {
        "id": 2,
        "first_name": "Giavani",
        "last_name": "Frediani",
        "email": "gfrediani1@senate.gov",
        "gender": "Male",
        "ip_address": "229.179.4.212"
    }, 
    {
        "id": 3,
        "first_name": "Noell",
        "last_name": "Bea",
        "email": "nbea2@imageshack.us",
        "gender": "Female",
        "ip_address": "180.66.162.255"
    }, 
    {
        "id": 4,
        "first_name": "Willard",
        "last_name": "Valek",
        "email": "wvalek3@vk.com",
        "gender": "Male",
        "ip_address": "67.76.188.26"
    }
]

실습 2 : 외부 데이터로 json 객체를 받아서 출력하기

https://jsonplaceholder.typicode.com/posts

JSON(JavaScript Object Notation)

JSON은 경량(Lightweight)의 DATA-교환 형식으로 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.