[Bootstrap] CSS 기능: 스타일 태그와 클래스

이번에는 Bootstrap에서 지원해주고 있는 기타 다른 CSS 기능들인 스타일에 대해서 살펴볼 것이다. 이전의 글에서 언급한대로 Bootstrap의 강점 중 하나는 모든 화면 크기의 브라우저나 기기에 따라서 반응형으로 최대한 유사한 사용자 경험을 제공해주고자 하는 것이므로 각종 버튼이나 폰트, 그리고 폼 양식을 작성할 때에도 이러한 기본적으로 Bootstrap에서 제공해주고 있는 CSS 기능들을 활용하면 좋을 것이다. 특히 Bootstrap에서는 표준에 정의되어있는 태그들에 대하여 동일한 스타일을 적용하는 것 이외에도 새로운 태그들도 정의하여 활용 가능하다. 이전에는 각종 태그들과 본문 등에 적용 가능한 기본 클래스들을 살펴보고 다음에는 폼 엘레멘트들과 테이블의 양식을 살펴볼 것이다.

*이전글

2016/05/19 - [자바스크립트 프레임워크] 시작 예고편

2016/05/21 - [Bootstrap] 소개

2016/06/23 - [Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)

* <h> 태그와 <small> 태그 스타일

먼저 폰트는 각 헤더에 해당하는 <h*> 헤더들이 있고, 이 헤더들의 안에 <small> 태그를 이용하면 제목에 가제를 넣는 기분으로 폰트 스타일을 설정할 수 있다. Bootstrap에서는 기본적으로 14px 크기의 폰트 사이즈를 사용하는데 <h5>가 해당 폰트 크기와 동일하게 설정되어있다. 각각의 태그가 어떻게 보이는지 아래와 같이 확인할 수 있다.

<h1> 태그

헤더1가제1

<h1> 태그 사용법

<h1>헤더1<small>가제1</small></h1>

<h2> 태그

헤더2가제2

<h2> 태그 사용법

<h2>헤더2<small>가제2</small></h2>

<h3> 태그

헤더3가제3

<h3> 태그 사용법

<h3>헤더3<small>가제3</small></h3>

<h4> 태그

헤더4가제4

<h4> 태그 사용법

<h4>헤더4<small>가제4</small></h4>

<h5> 태그

헤더5가제5

<h5> 태그 사용법

<h5>헤더5<small>가제5</small></h5>

<h6> 태그

헤더6가제6

<h6> 태그 사용법

<h6>헤더6<small>가제6</small></h6>

* <p> 태그 스타일과 lead 클래스

<p>태그는 <div>와 함께 HTML에서 가장 많이 사용하는 태그이기 때문에 본문의 내용을 <p>태그에 넣는 경우에 대한 기본 폰트 설정이 있다. 그리고 본문의 앞에 요약문처럼 크게 작성하고 싶은 경우에도 <p> 태그에 lead 클래스를 설정가능한 별도의 스타일을 제공해준다. 아래는 <p> 태그의 기본 스타일과 <p> 태그에 lead 클래스를 적용한 모습이다.

<p class="lead"> 태그

본문 요약 폰트

<p class="lead"> 태그 사용법

<p class="lead">본문 요약 폰트</p>

<p> 태그

본문 일반 폰트

<p> 태그 사용법

<p>본문 일반 폰트</p>

* 폰트 스타일 관련 태그

폰트 스타일을 설정할 수 있는 다양한 태그들을 추가로 지원해주고 있다. 최신 브라우저에서 기본적으로 지원해주는 스타일 태그도 있지만 이러한 태그들의 모습을 동일하게 설정해주고 있다. 원래는 각각의 스타일에 맞는 CSS들이 있지만, CSS를 몰라도 HTML만으로도 페이지의 스타일을 설정할 수 있도록 도와주고 있다. 같은 스타일이더라도 왜 이러한 스타일을 적용했는지에 따라 다르게 태그를 적절하게 사용하면 나중에 HTML 소스에 대한 유지보수가 유리할 것이다. 아래의 태그 종류를 보고 용도에 맞게 각 태그를 사용하면 된다. 

<mark> 태그

하이라이트

<mark> 태그 사용법

<mark>하이라이트</mark>

<del> 태그

삭제 표시

<del> 태그 사용법

<del>삭제 표시</del>

<s> 태그

관련 없음 표시

<s> 태그 사용법

<s>관련 없음 표시</s>

<ins> 태그

추가된 내용

<ins> 태그 사용법

<ins>추가된 내용</ins>

<u> 태그

밑줄

<u> 태그 사용법

<u>밑줄</u>

<small> 태그

작은 글씨

<small> 태그 사용법

<small>작은 글씨</small>

<strong> 태그

강조

<strong> 태그 사용법

<strong>강조</strong>

<em> 태그

이탈릭

<em> 태그 사용법

<em>이탈릭</em>

* 텍스트 정렬 클래스

텍스트 정렬도 CSS를 바로 쓰지 않고 class를 추가함으로써 설정할 수 있도록 해주고 있다. 텍스트의 정렬 방법들을 Bootstrap에서 CSS 클래스로 제공해준다. 기본적으로 text-left 클래스는 왼쪽 정렬, text-center는 가운데 정렬, text-right는 오른쪽 정렬을 해주고, text-justify는 양쪽 정렬을 해줘서 텍스트가 양쪽면에 딱 맞게 정렬해주고, text-nowrap은 텍스트에 자동 줄바뀜이 적용되지 않도록 설정해준다.

text-left 클래스

Left aligned text.

text-left 클래스 사용법

<p class="text-left">Left aligned text.</p>

text-center 클래스

Center aligned text.

text-center 클래스 사용법

<p class="text-center">Center aligned text.</p>

text-right 클래스

Right aligned text.

text-right 클래스 사용법

<p class="text-right">Right aligned text.</p>

text-justify 클래스

Justified text. text-justify 클래스로 글이 양쪽 정렬된다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-justify 클래스 사용법

<p class="text-justify">Justified text....</p>

text-nowrap 클래스

No wrap text. text-nowrap 클래스로 자동 줄 바뀜이 적용 안 된다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-nowrap 클래스 사용법

<p class="text-nowrap">No wrap text....</p>

* 텍스트 변환 클래스

텍스트 변환 클래스는 현재 있는 텍스트를 변환해주는 클래스를 의미한다. 텍스트 변환 클래스는 한글에는 적용이 되지 않으므로 영문 사이트에서 많이 활용되지 한글로 된 사이트에서는 많이 사용되는 일이 없을 것이다. 그래도 사용되는 부분이 있다면 영문이 들어가는 제목이나 아이디 등과 같이 통일된 양식으로 영문이 표시되는 것을 원하는 부분일 것이다.

text-lowercase 클래스

Lowercased text.

text-lowercase 클래스 사용법

<p class="text-lowercase">Lowercased text.</p>

text-uppercase 클래스

Uppercased text.

text-uppercase 클래스 사용법

<p class="text-uppercase">Uppercased text.</p>

text-capitalize 클래스

capitalized text.

text-capitalize 클래스 사용법

<p class="text-capitalize">capitalized text.</p>

* 기타 태그들과 스타일

HTML5에서 제공해주고 있는 다양한 태그들에 대하여 브라우저마다 동일한 모습이 보여질 수 있도록 스타일을 설정하고 있다. 스타일을 설정하고 있는 태그의 목록으로 <abbr>, <address>, <blockquote>, <footer>, <cite> 등이 있다. 약자를 표시할 때에는 <abbr> 태그로 약자가 어떠한 의미인지 나타내는 기능을 자동으로 제공해준다. 아래의 약자 HTML에 마우스를 올려놓으면 <abbr title="HyperTestMarkup Language"> 속성에 넣은 값을 보여주는 것을 확인할 수 있다. <address> 태그는 의미적으로 웹페이지를 구성할 때 사용하는 태그이고, <blockquote> 인용구를 표현하기 위한 스타일을 적용해준다.

<blockquote> 안에는 <p> 태그안에 인용 본문을 넣고 <footer> 태그 안에 인용 출처 또는 저자 이름을 넣고 이텔릭으로 책이나 사이트의 제목을 넣으면 된다.

<abbr> 태그

HTML 약자에 마우스 올려 놓으면 전체 내용이 표시된다.

<abbr> 태그 사용법

<abbr title="HyperText Markup Language">HTML</abbr>

<abbr> 작은 약자 태그

HTML 조금 작은 약자로 표시한다.

<abbr> 작은 약자 태그 사용법

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

<address> 태그

주소
Bellevue WA 98004

<address> 태그 사용법

<address> <strong>주소</strong><br/> Bellevue WA 98004 <br/> </address>

<blockquote> 인용 태그

인용구문

인용출처 제목

<blockquote> 태그 사용법

<blockquote> <p>인용구문</p> <footer>인용출처 <cite title="제목">제목</cite> </footer> </blockquote>

<blockquote> 우측 인용 태그

인용구문

인용출처 제목

<blockquote> 우측 인용 태그 사용법

<blockquote class="blockquote-reverse"> <p>인용구문</p> <footer>인용출처 <cite title="제목">제목</cite> </footer> </blockquote>

* 목록(<ol>, <ul>, <li>, <dl>, <dt>, <dd>) 태그

일반적으로 웹에서 목록을 나타낼 때 사용하는 <ol>, <ul>, <li>태그들의 스타일을 모든 브라우저에서 하나로 동일하게 표시되도록 스타일을 적용한다. 아래는 <ol> 태그는 순서가 중요한 번호가 있는 목록(ordered list)을 표시할 때 사용하고 <ul> 태그는 순서가 상관없는 목록(unordered list)를 나타낼 때 사용하고 그 안에 <li> 태그로 각 항목(list item)을 나타낸다. 아래는 <ol>과 <ul>태그를 이용하여 목록을 표시한 예이다. <ol> 태그나 <ul> 태그에 class="list-unstyled"를 적용하게 되면 아래와 같이 목록을 표시하는 점이 없는 목록을 표시할 수 있고, class="list-inline"을 적용하게 되면 일렬로 나열된 목록을 작성할 수 있다.

<ol> 태그

1. 순서가 중요한 목록1
2. 순서가 중요한 목록2
3. 순서가 중요한 목록3

<ol> 태그 사용법

<ol>
    <li>순서가 중요한 목록1</li>
    <li>순서가 중요한 목록2</li>
    <li>순서가 중요한 목록3</li>
</ol>

<ul> 태그

• 순서 상관없는 목록1
• 순서 상관없는 목록2
• 순서 상관없는 목록3

<ul> 태그 사용법

<ul>
    <li>순서 상관없는 목록1</li>
    <li>순서 상관없는 목록2</li>
    <li>순서 상관없는 목록3</li>
</ul>

<ul> 태그 스타일 없는 목록

• 스타일 없는 목록1
• 스타일 없는 목록2
• 스타일 없는 목록3

<ul> 태그 사용법

<ul class="list-unstyled">
    <li>스타일 없는 목록1</li>
    <li>스타일 없는 목록2</li>
    <li>스타일 없는 목록3</li>
</ul>

<ul> 태그 옆으로 나열된 목록

• 옆으로 나열된 목록1
• 옆으로 나열된 목록2
• 옆으로 나열된 목록3

<ul> 태그 사용법

<ul class="list-inline">
    <li>옆으로 나열된 목록1</li>
    <li>옆으로 나열된 목록2</li>
    <li>옆으로 나열된 목록3</li>
</ul>

다음은 특정 단어나 여러 가지 항목들에 대한 목록과 설명(Description)을 만들 때에는 <dl> 태그와 <dt>, <dd> 태그를 많이 사용한다. Bootstrap에서는 이러한 태그들도 모든 브라우저에서 동일하게 보이도록 스타일을 설정하고 있다. <dl> 태그는 목록 태그에서 <ul>이나 <ol> 태그와 동일하게 사용하면 되고, <dt>와 <dd> 태그는 하나의 쌍을 <li> 태그와 동일하게 사용하면 된다. <dl> 태그에 class="dl-horizontal" 클래스를 적용하게 되면 <dt>와 <dd>가 가로로 놓게 되고, 화면이 작아지게 되면 자동으로 세로로 다시 배치된다. 그 차이는 아래와 같이 살펴볼 수 있다.

<dl>태그

<dl> 태그는 용어나 항목에 대한 설명을 하고자 할 때 사용하면 된다. 아무런 스타일 없이 그냥 사용하면 <dt>는 볼드체, <dd>는 <dt> 태그의 아래에 나열되며, 사용법은 아래와 같다.

<dl>태그 사용법

<dl>

  <dt>사용법</dt>

  <dd>사용법에 대한 설명<dd>

</dl>

<dl> 가로 나열 태그

<dl> 태그 안의 내용을 가로로 펼치고 싶으면 <dl class="dl-horizonal">과 같이 스타일을 적용하면 된다. 만약 화면의 크기가 크면 옆으로 항목과 세부 내용을 펼칠 것이고, 화면이 작아지면 저절로 위의 일반적은 <dl> 태그와 같이 세로로 나열하게 변환한다.

<dl>태그 가로 나열 사용법

<dl class="dl-horizontal">

  <dt>사용법</dt>

  <dd>사용법에 대한 설명<dd>

</dl>

* 코딩, 수식 관련 스타일: <code>, <kbd>, <pre>, <var> 태그

Bootstrap에서는 코딩에 대한 내용을 작성할 때에 간간히 이용하기 편한 태그들에 대한 스타일도 설정해주고 있다. HTML에서 코딩과 관련해서 쉽게 사용할 수 있는 태그들은 바로 <code>, <kdb>, <pre> 태그이다. Bootstrap에서는 이들을 일반적으로 프로그래머들 사이에서 쉽게 접할 수 있는 스타일로 지정해서 보여준다. 여기서 <pre> 태그는 현재 있는 그대로의 스타일을 보여주는(preformatting) 태그로 소스에서의 들여쓰기 등과 같이 텍스트 모양을 그대로 유지하고자 할 때 유용하게 사용할 수 있다.

<code> 태그

<code> 태그를 사용하게 되면 특정 텍스트를 코드와 같이 모든 글자의 폭이 동일한 폰트로 표현된다.

<code>태그 사용법

<code>&lt;code&gt;</code>

<kbd> 태그

<kbd> 태그는 키보드 단축키를 쉽게 표현할 수 있도록 스타일이 적용된다.

복사=ctrl + c, 붙여넣기-ctrl + v

<kbd>태그 사용법

복사=<kbd>ctrl + c</kbd>, 붙여넣기-<kbd>ctrl + v</kbd>

<pre> 태그

<pre> 태그는 텍스트를 작성한 그대로의 스타일을 웹페이지에 보여준다. 특히 스페이스 인덴트를 웹페이지에서 보여줄때 활용하면 좋다.

(function () {
    console.log("Hello, world!");
}());

<pre>태그 사용법

<pre>
(function () {
    console.log("Hello, world!");
}())
;</pre>

<var> 태그

<var> 태그는 수식에서 변수를 나타낼 때 이탤릭체로 보여줄 때 사용하면 된다.

y = ax + b

<var>태그 사용법

<var>y</var> = a<var>x</var> + b

* <img> 태그 클래스

웹페이지에서 가장 많이 쓰이는 태그 중 하나인 <img>를 조금 더 이쁘게 보여주기 위하여 Bootstrap은 몇 가지 클래스들을 지원해주고 있다. 먼저 .img-responsive 클래스는 부모의 넓이에 맞춰서 이미지가 자동으로 크기가 변경되도록 하는 클래스로 특히 작은 화면에서 부모 엘레멘트가 작아질 때 자동으로 크기가 작아지기 때문에 모바일 웹페이지에서 쓰면 효과적이다. 이외에 이미지의 보여주는 테두리를 다르게 설정하기 위하여 둥근 모서리(.img-rounded), 원형 이미지(.img-circle), 그리고 액자테두리(.img-thumbnail) 클래스를 지원해준다.

img-responsive 클래스

img-responsive 클래스 사용법

<img src="https://t1.daumcdn.net/cfile/tistory/2402964458CE53FF0F" class="img-responsive" alt="Responsive image"/>

img-rounded 클래스

img-rounded 클래스 사용법

<img src="https://t1.daumcdn.net/cfile/tistory/2402964458CE53FF0F" class="img-rounded"/>

img-circle 클래스

img-circle 클래스 사용법

<img src="https://t1.daumcdn.net/cfile/tistory/2402964458CE53FF0F" class="img-circle"/>

img-thumbnail 클래스

img-thumbnail 클래스 사용법

<img src="https://t1.daumcdn.net/cfile/tistory/2402964458CE53FF0F" class="img-thumbnail" />

* 기타 텍스트 관련 스타일 클래스

Bootstrap에서는 이외에 Bootstrap으로 개발한 웹페이지들이 통일성 있는 디자인을 제공하기 위하여 다양한 기본 스타일들을 제공해주고 있다. 대표적으로 글씨의 색이나 배경색을 다음 글에서 살펴볼 폼의 버튼 등과 매핑하여 동일하게 사용할 수 있는 색 체계를 제공해주고 있다. 색은 크게 기본색(primary), 성공색(success), 일반 정보색(info), 경고색(warning), 그리고 위험색(danger)을 제공해주고 있다. 대부분의 글자색이나 배경색, 그리고 버튼색 등은 이러한 색 체계를 갖추고 있어서 상황에 맞는 색을 쉽게 선택하여 웹페이지를 꾸밀 수 있다.

먼저 텍스트 색을 설정하는 클래스를 살펴보면 아래와 같다.

text-muted 클래스

text-muted 약한 텍스트색

text-muted 클래스 사용법

<p class="text-muted">text-muted 약한 텍스트색</p>

text-primary 클래스

text-primary 기본 텍스트색

text-primary 클래스 사용법

<p class="text-primary">text-primary 기본 텍스트색</p>

text-success 클래스

text-success 성공 텍스트색

text-success 클래스 사용법

<p class="text-success">text-success 성공 텍스트색</p>

text-info 클래스

text-info 정보 텍스트색

text-info 클래스 사용법

<p class="text-info">text-info 정보 텍스트색</p>

text-warning 클래스

text-warning 경고 텍스트색

text-warning 클래스 사용법

<p class="text-warning">text-warning 경고 텍스트색</p>

text-danger 클래스

text-danger 위험 텍스트색

text-danger 클래스 사용법

<p class="text-danger">text-danger 위험 텍스트색</p>

다음으로 텍스트의 배경색을 마찬가지로 각 상황에 따라 간단하게 클래스로 설정할 수 있다.

bg-primary 클래스

bg-primary 기본 배경색

bg-primary 클래스 사용법

<p class="bg-primary">bg-primary 기본 배경색</p>

bg-success 클래스

bg-success 성공 배경색

bg-success 클래스 사용법

<p class="bg-success">bg-success 성공 배경색</p>

bg-info 클래스

bg-info 정보 배경색

bg-info 클래스 사용법

<p class="bg-info">bg-info 정보 배경색</p>

text-warning 클래스

bg-warning 경고 배경색

bg-warning 클래스 사용법

<p class="bg-warning">bg-warning 경고 배경색</p>

bg-danger 클래스

bg-danger 위험 배경색

bg-danger 클래스 사용법

<p class="bg-danger">bg-danger 위험 배경색</p>

위와 같이 여러 가지 text-* 클래스들과 bg-* 클래스들은 폼 양식이나 테이블 등에도 동일하게 적용 가능하여 편리하게 정해져있는 색들로 홈페이지를 꾸밀 수 있다. 그러면 다음에는 실제로 웹페이지를 꾸밀때 많이 사용하는 여러 가지 폼 양식의 표현 방식들에 대해서 살펴볼 것이다.

* 다음글 예고

- [Bootstrap] CSS기능: 폼(form) 양식과 테이블(table) 스타일

* 읽을거리

Bootstrap 홈페이지: http://getbootstrap.com