[Bootstrap] 3. Helper 클래스를 이용하여 텍스트를 꾸며보자

안녕하세요. 개발토끼 입니다. 

오늘은 부트스트랩에서 지원하는 helper 클래스를 이용해 텍스트를 꾸며보도록 하겠습니다. 

먼저 텍스트를 꾸미려면 텍스트가 있어야겠죠? 

그냥 지어내도 되지만 그냥 쉽게 dummy text를 복사 해서 사용해보도록 하겠습니다. 

구글에서 dummy text라고 검색해보세요.

구글 검색 결과 첫 번째, 웹 사이트로 들어가서 더미 텍스트를 복사 하겠습니다. 

- Dummy Text Generater 사이트 모습 -

이 사이트에 나와있는 일정량의 텍스트를 마우스로 드래그해 선택해서 복사합니다.

그럼 기존에 사용했던 부트스트랩 소스에서 <p> 태그를 이용해 붙여 넣기 합니다. 

그리고 ALT + F2를 눌러 크롬으로 실행 해봅시다.

그러면 위와 같이 텍스트가 출력됨을 볼 수 있을 것입니다. 

저는 예제를 잘 보일 수 있도록 body 태그를 text-align:center; 한 상태라서 가운데 정렬되어 보일 것입니다. 

그럼 이번엔 텍스트에 생상을 입혀볼까요?

단순히 color css를 이용해서 적용가능하지만, 

부트스트랩에서 사용가능한 class를 통해서 텍스트 색상을 바꿔보겠습니다. 

이전 시간에 배웠던 버튼과 동일하게 부트스트랩에서는 primary, success, warning, info, danger 등으로 색상을 지원하고 있습니다.

p 태그에 class를 text-primary라고 입력 하고 크롬으로 실행 해 봅시다.

- 파란색으로 표현된 텍스트 모습 -

이번엔 success, warning, info danger로 표현해봅시다.

위 소스에서 보실 수 있듯

부트스트랩에서 텍스트 색상 표현은 text-xxxxx 식으로 진행됨을 알 수 있습니다. 

크롬을 통해서 결과를 출력해볼까요?

첫 번째는 text-primary

두 번째는 text-success

세 번째는 text-warning

네 번째는 text-info

다섯 번째는 text-danger 입니다.

색상에 안목이 있으신 분들은 아마 아실겁니다. 

앞서 버튼 색상 구현과 약간 다르다는 것을요 ㅎㅎㅎㅎ

# 색상 꾸미기 이외 텍스트 꾸미기 class들

이번엔 부트스트랩에서 제공하는 helper 클래스들 중 색상을 변경해주는 클래스 이외에 다른 꾸미기 방법들을 알아보겠습니다. 

간단한 텍스트를 준비합니다. 

- 간단 텍스트 예제 -

앞서 테스트 한 텍스트 보다 짧은 것으로 준비해보았습니다. 

이렇게 짧은 텍스트를 준비한 이유는 텍스트가 어떻게 변화하는 지 잘 표현하기 위해서 입니다.

그럼 크롬으로 테스트 해봅시다.

- 크롬에서 P태그를 표현한 모습 -

이 기본 텍스트들을 제일 앞 단어만 대문자로 바꾸어 보겠습니다. 

부트스트랩에서는 text-capitalize 라는 클래스를 이용하면 

단어 하나하나 제일 앞에 있는 글자를 대문자로 변환이 가능합니다. 

- text-capitalize 적용된 코드 - 

이를 크롬에서 테스트 해볼까요?

보시면 각 단어마다 제일 첫 글자만 대문자로 변환 되었습니다. 

그럼 한글은요?

한글은 대소문자 구분이 없기 때문에 아무런 변화가 없습니다. 

영문자 표현일 경우 각 단어의 제일 앞 글자만 대문자로 변환이 됩니다. 

또는 

abcdefg... 

이런식으로 표현된 텍스트는 단어가 아님에도 불구하고 제일 앞글자인 a 만 대문자가 됩니다.

이번엔 소문자로 바꾸어 봅시다. 

text-lowercase 를 적용하면 아래와 같은 결과가 출력 됩니다.

기본 텍스트와 동일한 영문 소문자로 결과가 출력 되었습니다. 

이번엔 모든 텍스트를 대문자로 표현해볼까요?

text-uppercase를 소스 코드에 적어줍니다. 

기존에 텍스트가 모두 소문자였는 데 이제는 모두 대문자로 출력됨을 알 수 있습니다. 

이번엔 텍스트 정렬을 해봅시다. 

보통 css에서는 text-align:left 혹은 right , center 를 통해서 정렬이 가능합니다. 

부트스트랩에서는 이를 class로 적용이 되도록 구현이 되어있습니다. 

그래서 굳이 특별한 css 코드 작성 없이 단순 html 태그에 class 적용만으로도 충분히 텍스트 정렬이 가능합니다.

위와 같이 소스코드를 적고 크롬으로 테스트 해봅시다.

- 왼쪽, 중앙, 오른쪽 정렬된 모습 -

이로서 부트스트랩으로 텍스트를 꾸미는 방법을 알아보았습니다. 

그러면 부트스트랩이 어떻게 내부적으로 html 태그를 조정하는 지 알아봐야겠죠?

아래의 소스코드는 앞서 쓴 class가 어떻게 구현되어있는 지 나와있는 소스코드 입니다.

위 소스 코드를 보면 어떻게 텍스트를 조정하는 지 대략적인 감이 올 것입니다. 

오늘도 엄청 길게 적었네요. 

사실 부트스트랩이 어려운 부분이 없지만 UI 프레임워크인지라 코드와 출력결과를 같이 보여줘야 하기에 쫌 장황하게 적었습니다. 

다음시간엔 table 관련 부트스트랩 기능에 대해서 알아보도록 하겠습니다. 

긴 글 읽어주셔서 감사합니다. 

안뇽~