• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, BS클리어픽스, BS보이기 + BS숨기기, BS스크린리더, BS텍스트숨기기

Contextual Text Color (맥락글자색)

 

<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>

 

※ 일반텍스트 및 링크에 사용 가능. 링크 마우스허버 시 좀 더 짙어짐.

※ 다른 앵커 선택자로 인해 적용 안 될 때, 텍스트를 <span> 태그로 감싼 후 클래스 적용.

※ 스크린리더 같은 보조기기 사용자에겐 색정보 정달 안됨. 텍스트 이용해 별도 표시 필요. 

.sr-only 클래스 적용해 스크린리더 사용자를 위한 색깔 텍스트 정보를 가리는 것도 가능.

 

Contextual Background Color (맥락배경색

 

<p class="bg-primary">파란색배경</p>

<p class="bg-success">연녹색배경</p>

<p class="bg-info">연청녹배경</p>

<p class="bg-warning">아이보리배경</p>

<p class="bg-danger">연보라배경</p>

 

※ 일반텍스트 및 링크에 사용 가능. 링크 마우스허버 시 좀 더 짙어짐.

※ 다른 앵커 선택자로 인해 적용 안 될 때, 텍스트를 <div> 태그로 감싼 후 클래스 적용.

※ 스크린리더 같은 보조기기 사용자에겐 색정보 정달 안됨. 텍스트 이용해 별도 표시 필요. 

※ .sr-only 클래스 적용해 스크린리더 사용자를 위한 색깔 텍스트 정보를 가리는 것도 가능.

 

Close Icon (닫기아이콘) = Close Button (닫기버튼)

 

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

 

 

 

Caret (카렛 = 드롭다운화살표기호・드롭업화살표기호)

 

<span class="caret"></span>

 

※ 드롭다운(아래쪽화살표)・드롭업메뉴(위쪽화살표)

 

 

Float (띄우기 = 정렬 = 왼쪽정렬・오른쪽정렬)

 

<div class="pull-left">왼쪽에 띄우기 float: left !important;</div>

<div class="pull-right">오른쪽에 띄우기 float: right !important;</div>

 

 

※ 요소 자체를 왼쪽이나 오른쪽에 배치할 때 사용.

※ 해당 클래스는 믹스인으로 사용 가능.

Naviagation bar에선 사용 금지. 대신, .navbar-left , .navbar-right 클래스 사용.

 

 

블럭요소 중앙정렬

 

<div class="center-block">...</div>

 

※ .center-block 클래스는 믹스인으로 사용가능.

 

 

Clearfix 클리어픽스 (= float 해제)

 

<div class="clearfix">Nicolas Gallagher가 개발한 the micro clearfix 사용.</div>

 

※ .clearfix 클래스는 믹스인으로 사용 가능.

 

 

Show・Hide (블럭요소 보이기・숨기기)

 

<div class="show">요소 보이기</div>

<div class="hidden">요소 숨기기 + 자리 차지 X</div>

<div class="invisible">요소 숨기기 + 자리 차지 O</div>

 

※ .show 요소는 블록레벨에만 사용 가능. (∵ display:block !important)

※ .show , .hidden 클래스는 믹스인으로 사용 가능.

※ .hide 클래스 사용금지. (즉, 스크린리더에서 효과 없는데다가, BS 3.01부터 폐기예고됨. )

※ .hide 클래스 대신에 (.hidden 또는, .sr-only) 클래스 사용.

.invisible 클래스 : 자리는 차지하면서 보이지만 않게 할 때 사용.

 

Screen Reader (스크린리더)

 

<a class="sr-only sr-only-focusable" href="#content">스크린리더에게만 노출</a>

 


 

// mixin

.skip-navigation {

  .sr-only();

  .sr-only-focusable();

}

 

※ .sr-only 클래스 단독 :  스크린리더 제외한 모든 기기에서 요소 숨기기.
※ .sr-only-focusable 클래스 추가 : focus 상태일 땐, 요소 보이게 하기.

※ .sr-only 와 .sr-only-focusable 클래스는 믹스인으로 사용 가능.

 

 

Text 숨기기 (= 이미지대체)

 

<h1 class="text-hide">텍스트내용을 숨기고, 배경이미지로 내용 대체.</h1>

 

 

※ .text-hide 클래스는 믹스인으로 사용 가능.

 

 

CSS

 

// Class

.pull-left {

  float: left !important;

}

.pull-right {

  float: right !important;

}


// mixin

.element {

  .pull-left();

}

.another-element {

  .pull-right();

}

 


 

// Class

.center-block {

  display: block;

  margin-left: auto;

  margin-right: auto;

}


// mixin

.element {

  .center-block();

}

 


 

// Mixin 자체

.clearfix() {

  &:before,

  &:after {

    content: " ";

    display: table;

  }

  &:after {

    clear: both;

  }

}


// mixin으로 사용

.element {

  .clearfix();

}

 


 

// Class

.show {

  display: block !important;

}

.hidden {

  display: none !important;

  visibility: hidden !important;

}

.invisible {

  visibility: hidden;

}


//  mixin

.element {

  .show();

}

.another-element {

  .hidden();

}

 


 

// mixin

.heading {

  .text-hide();

}

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
찾아주셔서 감사합니다. Since 2012