프로젝트에서 Bootstrap CSS 도우미 클래스 사용

빌렘 고리세
2015 년 10 월 7 일
11분 읽기

Bootstrap에는 뷰를 돕기 위해 설계된 여러 CSS 도우미 클래스가 포함되어 있다는 것을 알고 계셨나요? 테마 활동을 최적화하고 최대한 활용하는 데 관심이 있습니까? Mendix's Bootstrap 통합? 그렇다면 계속 읽어보세요.

헬퍼 클래스란 무엇인가

우선, 헬퍼 클래스란 정확히 무엇일까요? 개념을 완전히 이해하려면 한 걸음 물러나 CSS의 큰 그림을 살펴보는 것이 좋습니다. 많은 개발자가 CSS가 프로그래밍 언어가 아니라고 주장하지만, 좋은 CSS 관행은 잘 정립된 코딩 모범 사례와 매우 유사합니다. 특히 DRY(Don't Repeat Yourself)와 아키텍처 개념을 사용하여 구축하는 것(BEM, OOCSS, Smaccs가 가장 인기 있는 세 가지입니다)과 같은 관행입니다.

CSS 자체는 모든 코더가 첫 프로젝트에서 알고 있을 법한 '스파게티 코드'가 되는 경향이 매우 큽니다. 코드는 어디에나 있고, 적절한 구조는 없으며, 많은 코드 반복과 사용되지 않는 코드 조각이 결합되어 있습니다. CSS 자체는 범위 개념이 없고, HTML에 완전히 바인딩되어 있으며(좋은 종속성이 있습니다) 특이성과 같은 개념으로 인해 종종 매우 모호합니다.

논리적으로 많은 사람들이 현대에 이것은 제대로 된 안 된다고 생각했습니다. 그래서 그들은 HTML 뷰 자체가 바뀌더라도 CSS 코드를 더 모듈화하고, 확장 가능하고, 유지 관리 가능하고, 재사용 가능하게 만들기 위해 건축적 개념을 생각해냈습니다. Bootstrap의 CSS 코드는 이러한 관행의 아주 좋은 예입니다. 다음 CSS 규칙을 비교해보세요.


#newButton {
display: inline-block;
padding: 6px 12px;
color: #333;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #fff;
}

#deleteButton {
display: inline-block;
padding: 6px 12px;
color: #fff;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #f00;
}

이런 종류의 글쓰기로 중간 규모의 프로젝트조차 테마화한다고 상상해보세요(전체 애플리케이션의 모든 버튼을 타겟팅해야 하며, 기본적으로 같은 코드를 계속해서 작성해야 합니다). 더 나쁜 것은 애플리케이션의 작은 재설계조차 구현해야 한다고 상상해보세요. 다행히도 Bootstrap에서 찾을 수 있는 적절한 아키텍처와 모범 사례는 삶을 훨씬 더 쉽게 만들어줍니다.


.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
}
.btn-default {
color: #333;
background-color: #fff;
}
.btn-warning {
color: #fff;
background-color: #f00;
}

그리고 완전히 모듈식 CSS가 있습니다. HTML 요소에 클래스 이름을 결합하는 문제일 뿐입니다. (참고: 이런 방식의 쓰기의 이점은 예를 들어 10개의 버튼에 스타일을 지정하면 더 명확해지겠지만, 저는 반복적인 CSS 코드로 여러분을 지루하게 하고 싶지 않았습니다.)

기본적으로 우리는 개별 요소의 스타일링을 중단하고 요소에 시각적 동작을 추가하는 것을 시작했습니다. 우리는 모든 힘든 일을 대신 해주는 시스템이나 아키텍처를 만들고 있습니다. 여기서 헬퍼 클래스와 같은 개념이 등장합니다.

본질적으로 헬퍼 클래스는 "독립적인 시각적 동작 규칙"으로 설명될 수 있는데, 이는 특정 HTML 요소나 요소 그룹에 묶이지 않고, 코드 반복을 방지하면서도 원하는 동작을 달성하기 위해 객체의 추가 클래스로 사용된다는 것을 의미합니다. 기본적으로, 요소에 약간의 추가 동작만 필요할 때, 예를 들어 화면 왼쪽이 아닌 오른쪽에 배치된 버튼이 필요할 때 이점이 명확해집니다.

숫자는 제한되어 있지만 Bootstrap에는 우리가 사용할 수 있는 꽤 멋진 도우미 클래스가 있습니다. Mendix 프로젝트. 가장 중요한 것들을 나열하고 그 목적을 간략하게 설명하겠습니다.

Bootstrap 색상 도우미 클래스

색상 도우미 클래스는 텍스트 색상을 변경하는 클래스와 배경 색상을 변경하는 클래스의 두 가지 범주로 나눌 수 있습니다.

텍스트 색상:

.text-음소거
.text-primary
.text-성공
.텍스트-정보
.text-경고
.text-위험

배경색:

.bg-기본
.bg-성공
.bg-정보
.bg-경고
.bg-위험

이전에 Bootstrap 스타일링을 사용해 본 적이 있다면 "기본", "성공", "정보" 등을 버튼 유형이나 사용할 수 있는 것에서 알아볼 수 있을 것입니다. Bootstrap 전체에서 이러한 용어는 색상 유형을 정의하는 데 사용됩니다.

Bootstrap 위치 지정 도우미 클래스

종종 요소의 구체적인 스타일 자체는 페이지에서의 위치와 무관해야 합니다. 일반 레이아웃이 자동으로 지원하지 않는 위치를 수용하기 위해 요소를 올바른 위치에 배치하는 데 도움이 되는 몇 가지 도우미 클래스가 있습니다.

플로트 레귤레이터:

.풀-레프트
.풀-오른쪽
.클리어픽스

.pull-left 및 .pull-right 클래스를 사용하여 레이아웃에서 요소를 플로팅하여 각각 왼쪽 플로트 또는 오른쪽 플로트를 만들 수 있습니다. 플로팅 동작에서 가장 흔한 문제는 부모 컨테이너가 더 이상 콘텐츠의 크기를 알 수 없다는 사실입니다. .clearfix 헬퍼 클래스를 사용하여 이 문제를 해결하고 부모 컨테이너에 올바른 높이를 다시 제공할 수 있습니다.

콘텐츠 중앙 정렬:

.센터 블록

불행히도 콘텐츠를 가운데 정렬하는 것은 콘텐츠가 있는 맥락에 따라 크게 달라지는데, 특히 수직으로 가운데 정렬하는 콘텐츠의 경우 더욱 그렇습니다. .center-block 헬퍼 클래스는 알려진 너비를 가진 블록 수준 요소의 수평 가운데 정렬을 용이하게 합니다.

Bootstrap 가시성 도우미 클래스

위치 지정 요소 외에도 대화형 애플리케이션은 우리가 보고 있는 페이지의 상태 등으로 인해 가시성을 변경해야 하는 경우가 많습니다.

표준 가시성 도우미:

.보이지 않는
.숨겨진
.보여 주다

CSS는 두 가지 종류의 '숨기기' 콘텐츠를 사용합니다. 가시성을 none으로 설정하거나 표시를 none으로 설정하는 것입니다. 가시성을 none으로 설정하면 요소가 보이지 않지만 페이지 레이아웃에서 여전히 '플레이어'이므로 공간을 차지합니다. 표시를 none으로 설정하면 브라우저가 마치 요소가 존재하지 않는 것처럼 요소를 무시합니다. .invisible을 사용하여 항목을 보이지 않게 할 수 있고 .hidden을 사용하여 표시를 none으로 설정할 수 있습니다. .show 도우미 클래스는 실제로 .hidden 클래스를 상쇄하는 데 사용됩니다. 이러한 기본 가시성 도우미 클래스는 JavaScript 사용자 정의 위젯을 통해 사용자 정의 대화형 동작을 구축하는 데 큰 도움이 될 수 있습니다.

이국적인 가시성 도우미:

.sr-전용
.텍스트 숨기기

.sr-only 클래스는 요소가 화면 판독기에서만 매체로 표시됨을 의미합니다. .text-hide 클래스는 요소의 텍스트 콘텐츠를 숨기고 텍스트를 배경 이미지로 대체하는 데 자주 사용됩니다.

예제

가능성은 무한하지만 작은 예를 쉽게 보여줄 수 있습니다. 아래는 에서 만든 작은 애플리케이션의 두 스크린샷입니다. Mendix.bg-info는 페이지 헤더에 사용되었고, 텍스트 콘텐츠에는 .pull-right가 사용되었습니다. 세 개의 타일 헤더는 다른 텍스트 색상 클래스로 풍부해졌습니다. 모두 1분 이내에 완료되었습니다.