구성품

탐색, 경고, 팝오버 등을 제공하기 위해 구축된 수십 개의 재사용 가능한 구성 요소.

두 가지 더 구체적인 변형과 함께 두 가지 기본 옵션.

단일 버튼 그룹

일련의 버튼을 .btnin 으로 감쌉니다 .btn-group.

  1. <div 클래스 = "btn-group" >
  2. <버튼 클래스 = "btn" > 왼쪽 </button>
  3. <버튼 클래스 = "btn" > 중간 </button>
  4. <버튼 클래스 = "btn" > 오른쪽 </button>
  5. </div>

여러 버튼 그룹

더 복잡한 구성 요소를 위해 <div class="btn-group">의 세트를 결합합니다 .<div class="btn-toolbar">

  1. <div 클래스 = "btn-toolbar" >
  2. <div 클래스 = "btn-group" >
  3. ...
  4. </div>
  5. </div>

수직 버튼 그룹

버튼 세트를 가로가 아닌 세로로 쌓은 것처럼 보이게 합니다.

  1. <div 클래스 = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

체크박스와 라디오 플레이버

버튼 그룹은 또한 하나의 버튼만 활성화될 수 있는 라디오 또는 임의의 수의 버튼이 활성화될 수 있는 체크박스로 기능할 수 있습니다. 이에 대한 JavaScript 문서 를 보십시오.

버튼 그룹의 드롭다운

머리!드롭다운이 있는 버튼 은 적절한 렌더링을 위해 .btn-group내 에서 개별적으로 래핑되어야 합니다 ..btn-toolbar

개요 및 예

.btn-group아무 버튼이나 사용하여 드롭다운 메뉴를 안에 배치 하고 적절한 메뉴 마크업을 제공하여 트리거합니다 .

  1. <div 클래스 = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. 동작
  4. <span 클래스 = "캐럿" ></span>
  5. </a>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

모든 버튼 크기에서 작동

버튼 드롭다운은 .btn-large, .btn-small, 또는 .btn-mini.

자바스크립트 필요

버튼 드롭다운이 작동하려면 Bootstrap 드롭다운 플러그인 이 필요합니다.

모바일과 같은 일부 경우에는 드롭다운 메뉴가 뷰포트 외부로 확장됩니다. 수동으로 또는 사용자 정의 JavaScript를 사용하여 정렬을 해결해야 합니다.


분할 버튼 드롭다운

버튼 그룹 스타일과 마크업을 기반으로 분할 버튼을 쉽게 만들 수 있습니다. 분할 버튼은 왼쪽에 표준 동작이 있고 오른쪽에 컨텍스트 링크가 있는 드롭다운 토글이 있습니다.

  1. <div 클래스 = "btn-group" >
  2. <버튼 클래스 = "btn" > 작업 </button>
  3. <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span 클래스 = "캐럿" ></span>
  5. </버튼>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

크기

추가 버튼 클래스 .btn-mini, .btn-small또는 .btn-large크기 조정을 활용합니다.

  1. <div 클래스 = "btn-group" >
  2. <버튼 클래스 = "btn btn-mini" > 동작 </button>
  3. <버튼 클래스 = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span 클래스 = "캐럿" ></span>
  5. </버튼>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

드롭업 메뉴

의 직계 부모에 단일 클래스를 추가하여 드롭다운 메뉴를 아래에서 위로 토글할 수도 있습니다 .dropdown-menu. .caret위아래가 아닌 아래에서 위로 이동하도록 메뉴 자체 의 방향을 뒤집고 위치를 변경합니다.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > 드롭업 </button>
  3. <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span 클래스 = "캐럿" ></span>
  5. </버튼>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

표준 페이지 매김

Rdio에서 영감을 받은 간단한 페이지 매김, 앱 및 검색 결과에 좋습니다. 큰 블록은 놓치기 어렵고 쉽게 확장 가능하며 큰 클릭 영역을 제공합니다.

  1. <div 클래스 = "페이지 매김" >
  2. <울>
  3. <li > <a href = "#"> 이전 </a></li>
  4. <li > <a href = "#"> 1 </a></li>
  5. <li > <a href = "#"> 2 </a></li>
  6. <li > <a href = "#"> 3 </a></li>
  7. <li > <a href = "#"> 4 </a></li>
  8. <li > <a href = "#"> 5 </a></li>
  9. <li > <a href = "#"> 다음 </a></li>
  10. </ul>
  11. </div>

옵션

비활성화 및 활성 상태

링크는 다양한 상황에 맞게 사용자 정의할 수 있습니다. .disabled클릭 할 수 없는 링크에 사용 .active하고 현재 페이지를 나타냅니다.

  1. <div 클래스 = "페이지 매김" >
  2. <울>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li 클래스 = "활성" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

원하는 스타일을 유지하면서 클릭 기능을 제거하기 위해 범위에 대해 활성 또는 비활성화된 앵커를 선택적으로 교체할 수 있습니다.

  1. <div 클래스 = "페이지 매김" >
  2. <울>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li 클래스 = "활성" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

크기

더 크거나 작은 페이지 매김을 원하십니까? 추가 크기 .pagination-large의 경우 .pagination-small, 또는 .pagination-mini을(를) 추가합니다.

  1. <div class = "pagination pagination-large" >
  2. <울>
  3. ...
  4. </ul>
  5. </div>
  6. <div 클래스 = "페이지 매김" >
  7. <울>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <울>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <울>
  18. ...
  19. </ul>
  20. </div>

조정

두 개의 선택적 클래스 중 하나를 추가하여 페이지 매김 링크의 정렬을 변경합니다. .pagination-centered.pagination-right.

  1. <div 클래스 = "페이지 매김 페이지 매김 중심" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

휴대용 소형 무선 호출기

가벼운 마크업 및 스타일을 사용하여 간단한 페이지 매김 구현을 위한 빠른 이전 및 다음 링크. 블로그나 잡지와 같은 간단한 사이트에 적합합니다.

기본 예

기본적으로 호출기는 링크를 중앙에 배치합니다.

  1. <ul 클래스 = "페이저" >
  2. <li > <a href = "#"> 이전 </a></li>
  3. <li > <a href = "#"> 다음 </a></li>
  4. </ul>

정렬된 링크

또는 각 링크를 측면에 정렬할 수 있습니다.

  1. <ul 클래스 = "페이저" >
  2. <li 클래스 = "이전" >
  3. <a href = "#"> & larr ; 이전 </a>
  4. </li>
  5. <li 클래스 = "다음" >
  6. <a href = "#"> 최신 & rarr ; </a>
  7. </li>
  8. </ul>

선택적 비활성화 상태

호출기 링크는 .disabled페이지 매김의 일반 유틸리티 클래스도 사용합니다.

  1. <ul 클래스 = "페이저" >
  2. <li class = "이전 비활성화" >
  3. <a href = "#"> & larr ; 이전 </a>
  4. </li>
  5. ...
  6. </ul>

라벨

라벨 마크업
기본 <span class="label">Default</span>
성공 <span class="label label-success">Success</span>
경고 <span class="label label-warning">Warning</span>
중요한 <span class="label label-important">Important</span>
정보 <span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

배지

이름 예시 마크업
기본 1 <span class="badge">1</span>
성공 2 <span class="badge badge-success">2</span>
경고 4 <span class="badge badge-warning">4</span>
중요한 6 <span class="badge badge-important">6</span>
정보 8 <span class="badge badge-info">8</span>
10 <span class="badge badge-inverse">10</span>

쉽게 접을 수 있습니다

쉽게 구현할 수 있도록 :empty콘텐츠가 없을 때 레이블과 배지는 CSS 선택기를 통해 축소됩니다.

영웅 유닛

사이트의 주요 콘텐츠를 보여주는 가볍고 유연한 구성 요소입니다. 마케팅 및 콘텐츠가 많은 사이트에서 잘 작동합니다.

안녕하세요, 세계입니다!

이것은 단순한 영웅 유닛으로, 주요 콘텐츠나 정보에 특별한 관심을 불러일으키기 위한 단순한 점보트론 스타일 구성 요소입니다.

더 알아보기

  1. <div 클래스 = "영웅 유닛" >
  2. <h1> 제목 </h1>
  3. <p> 태그라인 </p>
  4. <p>
  5. <a 클래스 = "btn btn-primary btn-large" >
  6. 더 알아보기
  7. </a>
  8. </p>
  9. </div>

페이지 헤더

h1페이지에서 콘텐츠 섹션을 적절하게 간격을 두고 분할하기 위한 간단한 셸입니다 . h1의 기본 small요소와 대부분의 다른 구성 요소(추가 스타일 포함) 를 활용할 수 있습니다 .

  1. <div 클래스 = "페이지 헤더" >
  2. <h1> 예제 페이지 헤더 <small> 헤더의 하위 텍스트 </small></h1>
  3. </div>

기본 썸네일

기본적으로 Bootstrap의 축소판은 최소한의 필수 마크업으로 연결된 이미지를 표시하도록 설계되었습니다.

고도로 사용자 정의 가능

약간의 추가 마크업으로 제목, 단락 또는 버튼과 같은 모든 종류의 HTML 콘텐츠를 축소판에 추가할 수 있습니다.

  • 300x200

    썸네일 라벨

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    동작 동작

  • 300x200

    썸네일 라벨

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    동작 동작

  • 300x200

    썸네일 라벨

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    동작 동작

썸네일을 사용하는 이유

썸네일(이전 .media-gridv1.4까지)은 사진 또는 비디오 그리드, 이미지 검색 결과, 소매 제품, 포트폴리오 등에 적합합니다. 링크 또는 정적 콘텐츠일 수 있습니다.

간단하고 유연한 마크업

썸네일 마크업은 간단 합니다. 요소 ul수에 관계없이 필요한 모든 것입니다. li또한 매우 유연하여 콘텐츠를 래핑하기 위해 약간의 추가 마크업으로 모든 유형의 콘텐츠를 허용합니다.

그리드 열 크기 사용

마지막으로 썸네일 구성 요소는 썸네일 크기를 제어하기 위해 .span2또는 와 같은 기존 그리드 시스템 클래스를 사용합니다..span3

마크업

앞서 언급했듯이 썸네일에 필요한 마크업은 가볍고 간단합니다. 연결된 이미지 의 기본 설정은 다음과 같습니다.

  1. <ul 클래스 = "썸네일" >
  2. <li 클래스 = "span4" >
  3. <a href = "#" 클래스 = "썸네일" >
  4. <img 데이터 -src = "holder.js/300x200" Alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

축소판의 사용자 정의 HTML 콘텐츠의 경우 마크업이 약간 변경됩니다. 어디에서나 블록 수준 콘텐츠를 허용하기 <a>위해 다음 <div>과 같이 교환합니다.

  1. <ul 클래스 = "썸네일" >
  2. <li 클래스 = "span4" >
  3. <div 클래스 = "썸네일" >
  4. <img 데이터 -src = "holder.js/300x200" Alt = "" >
  5. <h3> 썸네일 레이블 </h3>
  6. <p> 썸네일 캡션... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

더 많은 예

사용 가능한 다양한 그리드 클래스로 모든 옵션을 탐색하십시오. 또한 다양한 크기를 믹스 앤 매치할 수 있습니다.

기본 경고

.alert기본 경고 경고 메시지 에 대한 텍스트와 선택적인 해제 버튼을 줄 바꿈하십시오 .

경고! 스스로 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.
  1. <div 클래스 = "경고" >
  2. <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "경고" > × </버튼>
  3. <strong> 경고! </strong> 스스로를 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.
  4. </div>

닫기 버튼

data-dismiss="alert"속성 외에도 Mobile Safari 및 Mobile Opera 브라우저 는 태그 href="#"를 사용할 때 경고를 해제 해야 합니다.<a>

  1. <a href = "#" class = "닫기" data-dismiss = "alert" > × </a>

<button>또는 우리가 문서용으로 선택한 데이터 속성이 있는 요소를 사용할 수 있습니다 . 를 사용할 때 <button>반드시 포함해야 type="button"하며 그렇지 않으면 양식이 제출되지 않을 수 있습니다.

  1. <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "경고" > × </버튼>

JavaScript를 통해 경고 닫기

빠르고 쉽게 경고를 해제 하려면 경고 jQuery 플러그인 을 사용하십시오.


옵션

더 긴 메시지의 경우 를 추가하여 경고 래퍼의 상단과 하단 패딩을 늘 .alert-block립니다.

경고!

스스로 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div 클래스 = "경고 경고 차단" >
  2. <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "경고" > × </버튼>
  3. <h4> 경고! </h4>
  4. 최선을 다해 확인하세요, 당신은...
  5. </div>

상황에 맞는 대안

경고의 의미를 변경하려면 선택적 클래스를 추가하십시오.

오류 또는 위험

오 스냅! 몇 가지를 변경하고 다시 제출해 보세요.
  1. <div 클래스 = "경고 경고 오류" >
  2. ...
  3. </div>

성공

잘했어요! 이 중요한 경고 메시지를 성공적으로 읽었습니다.
  1. <div 클래스 = "경고 알림 성공" >
  2. ...
  3. </div>

정보

머리! 이 경고는 주의가 필요하지만 그다지 중요하지 않습니다.
  1. <div 클래스 = "경고 경보 정보" >
  2. ...
  3. </div>

예제 및 마크업

기초적인

수직 그라디언트가 있는 기본 진행률 표시줄.

  1. <div 클래스 = "진행" >
  2. <div 클래스 = "막대" 스타일 = " 너비 : 60 %; " ></div>
  3. </div>

줄무늬

그라데이션을 사용하여 줄무늬 효과를 만듭니다. IE7-8에서는 사용할 수 없습니다.

  1. <div class = "progress progress-striped" >
  2. <div 클래스 = "막대" 스타일 = " 너비 : 20 %; " ></div>
  3. </div>

생기 있는

줄무늬를 오른쪽에서 왼쪽으로 움직이려면 에 추가하십시오 .active. .progress-striped모든 버전의 IE에서 사용할 수 있는 것은 아닙니다.

  1. <div class = "progress progress-striped active" >
  2. <div 클래스 = "막대" 스타일 = " 너비 : 40 %; " ></div>
  3. </div>

쌓인

여러 막대를 같은 곳에 배치 .progress하여 쌓습니다.

  1. <div 클래스 = "진행" >
  2. <div class = "bar bar-success" 스타일 = " 너비 : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " 너비 : 10 %; " ></div>
  5. </div>

옵션

추가 색상

진행률 표시줄은 일관된 스타일을 위해 동일한 버튼 및 경고 클래스 중 일부를 사용합니다.

  1. <div 클래스 = "진행 상황 정보" >
  2. <div 클래스 = "막대" 스타일 = " 너비 : 20 % " ></div>
  3. </div>
  4. <div 클래스 = "진행 진행-성공" >
  5. <div 클래스 = "막대" 스타일 = " 너비 : 40 % " ></div>
  6. </div>
  7. <div 클래스 = "진행 상황 경고" >
  8. <div 클래스 = "바" 스타일 = " 너비 : 60 % " ></div>
  9. </div>
  10. <div 클래스 = "진행 진행 위험" >
  11. <div 클래스 = "바" 스타일 = " 너비 : 80 % " ></div>
  12. </div>

줄무늬 바

단색과 유사하게 다양한 줄무늬 진행률 표시줄이 있습니다.

  1. <div class = "progress progress-info progress-striped" >
  2. <div 클래스 = "막대" 스타일 = " 너비 : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div 클래스 = "막대" 스타일 = " 너비 : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div 클래스 = "바" 스타일 = " 너비 : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div 클래스 = "바" 스타일 = " 너비 : 80 % " ></div>
  12. </div>

브라우저 지원

진행률 표시줄은 CSS3 그라디언트, 전환 및 애니메이션을 사용하여 모든 효과를 달성합니다. 이러한 기능은 IE7-9 또는 이전 버전의 Firefox에서는 지원되지 않습니다.

Internet Explorer 10 및 Opera 12 이전 버전은 애니메이션을 지원하지 않습니다.

텍스트 콘텐츠와 함께 왼쪽 또는 오른쪽으로 정렬된 이미지를 특징으로 하는 다양한 유형의 구성 요소(예: 블로그 댓글, 트윗 등)를 구축하기 위한 추상 개체 스타일입니다.

기본 예

기본 미디어를 사용하면 콘텐츠 블록의 왼쪽이나 오른쪽에 미디어 개체(이미지, 비디오, 오디오)를 띄울 수 있습니다.

64x64

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.
64x64

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.
64x64

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.
  1. <div 클래스 = "미디어" >
  2. <a class = "pull-left" href = "#" >
  3. <img 클래스 = "미디어 개체" 데이터 -src = "holder.js/64x64" >
  4. </a>
  5. <div 클래스 = "미디어 바디" >
  6. <h4 class = "media-heading" > 미디어 제목 </h4>
  7. ...
  8.  
  9. <!-- 중첩된 미디어 개체 -->
  10. <div 클래스 = "미디어" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

미디어 목록

약간의 추가 마크업으로 목록 내부의 미디어를 사용할 수 있습니다(댓글 스레드 또는 기사 목록에 유용).

  • 64x64

    미디어 제목

    Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.

    64x64

    중첩된 미디어 제목

    Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.
    64x64

    중첩된 미디어 제목

    Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.
    64x64

    중첩된 미디어 제목

    Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.
  • 64x64

    미디어 제목

    Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.
  1. <ul 클래스 = "미디어 목록" >
  2. <li 클래스 = "미디어" >
  3. <a class = "pull-left" href = "#" >
  4. <img 클래스 = "미디어 개체" 데이터 -src = "holder.js/64x64" >
  5. </a>
  6. <div 클래스 = "미디어 바디" >
  7. <h4 class = "media-heading" > 미디어 제목 </h4>
  8. ...
  9.  
  10. <!-- 중첩된 미디어 개체 -->
  11. <div 클래스 = "미디어" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

웰스

우물을 요소에 간단한 효과로 사용하여 삽입 효과를 줍니다.

봐봐, 난 우물 속에 있어!
  1. <div 클래스 = "잘" >
  2. ...
  3. </div>

선택 수업

두 개의 선택적 수정자 클래스로 패딩 및 둥근 모서리를 제어합니다.

봐봐, 난 우물 속에 있어!
  1. <div class = "well-large" >
  2. ...
  3. </div>
봐봐, 난 우물 속에 있어!
  1. <div 클래스 = "잘 작은" >
  2. ...
  3. </div>

닫기 아이콘

모달 및 경고와 같은 콘텐츠를 닫으려면 일반 닫기 아이콘을 사용하세요.

  1. <버튼 클래스 = "닫기" > × </버튼>

앵커를 사용 하려면 iOS 기기 href="#"에 클릭 이벤트가 필요합니다.

  1. <a class = "close" href = "#" > × </a>

도우미 클래스

작은 디스플레이 또는 동작 조정을 위한 단순하고 집중된 클래스입니다.

.당기기

요소를 왼쪽으로 띄우기

  1. 클래스 = "왼쪽으로 당기기"
  1. . 당기기 - 왼쪽 {
  2. 플로트 : 왼쪽 ;
  3. }

.당기기

요소를 오른쪽으로 띄우기

  1. 클래스 = "당기기"
  1. . 당겨 - 오른쪽 {
  2. 플로트 : 오른쪽 ;
  3. }

.음소거

요소의 색상을 다음으로 변경#999

  1. 클래스 = "음소거"
  1. . 음소거 {
  2. 색상 : #999;
  3. }

.clearfix

float모든 요소에서 지우기

  1. 클래스 = "clearfix"
  1. . 클리어픽스 {
  2. * : 1 ;
  3. &: 전에 ,
  4. &: { 이후
  5. 디스플레이 : 테이블 ;
  6. 내용 : "" ;
  7. }
  8. &: { 이후
  9. 클리어 : 둘 다 ;
  10. }
  11. }