댓글 목록

부트스트랩4 색 (Colors)

페이지 정보

작성자 운영자 작성일 18-03-23 21:36 조회 1,391 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

Text Colors

부트스트랩4는 "색상을 통한 의미 부여"를 제공하기 위해 상황별 클래스를 제공합니다.


텍스트 색과 관련한 클래스:

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-light

<p class="text-muted">이 단어는 음소거를 표시합니다.</p>
  <p class="text-primary">이 단어는 중요함을 표시합니다.</p>
  <p class="text-success">이 단어는 성공을 표시합니다.</p>
  <p class="text-info">이 단어는 정보를 표시합니다.</p>
  <p class="text-warning">이 단어는 경고를 표시합니다.</p>
  <p class="text-danger">이 단어는 위험을 표시합니다.</p>
  <p class="text-secondary">보조 단어입니다.</p>
  <p class="text-dark">이 단어는 어두운 회색입니다.</p>
  <p class="text-light">이 단어는 밝은 회색입니다 (흰 배경위에).</p>
  <p class="text-white">이 단어는 흰색입니다 (흰 배경위에).</p>

4d11c0866ac03ac8530161bbbf99dd65_1521807717_3597.png
** 링크에 사용된 문맥 텍스트 클래스는 마우스를 올렸을 때(hover) 어두움(명암)을 추가하게 됩니다.

<a href="#" class="text-muted">Muted link.</a>
  <a href="#" class="text-primary">Primary link.</a>
  <a href="#" class="text-success">Success link.</a>
  <a href="#" class="text-info">Info link.</a>
  <a href="#" class="text-warning">Warning link.</a>
  <a href="#" class="text-danger">Danger link.</a>
  <a href="#" class="text-secondary">Secondary link.</a>
  <a href="#" class="text-dark">Dark grey link.</a>
  <a href="#" class="text-light">Light grey link.</a>

4d11c0866ac03ac8530161bbbf99dd65_1521808080_3007.png
효과는 코드를 작성하고 브라우저로 띄워서 마우스를 올려야 확인할 수 있습니다.


배경색 (Background Colors)

부트스트랩4에서 제공하는 배경색 클래스:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light


** 배경색은 텍스트색을 설정하지 않으므로 .text-*클래스와 함께 사용하는 경우가 있습니다.

<p class="bg-primary text-white">이 단어는 중요함을 표시합니다.</p>
  <p class="bg-success text-white">이 단어는 성공을 표시합니다.</p>
  <p class="bg-info text-white">이 단어는 어떤 정보를 표시합니다.</p>
  <p class="bg-warning text-white">이 단어는 경고를 표시합니다.</p>
  <p class="bg-danger text-white">이 단어는 위험을 표시합니다.</p>
  <p class="bg-secondary text-white">보조 배경색.</p>
  <p class="bg-dark text-white">어두운 회색 배경색.</p>
  <p class="bg-light text-dark">밝은 회색 배경색.</p>

4d11c0866ac03ac8530161bbbf99dd65_1521808587_5425.png
 


댓글목록 0

등록된 댓글이 없습니다.