[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌

5. 부트스트랩에서 제공하는 Base CSS

 5-1. 타이포그래피 (Typography)

  타이포그래피는 문자에 관한 디자인 관련된 부분입니다. 

  1) 텍스트 강조하기

   - 웹 화면의 텍스트 중 강조를 위한 여럿 요소들을 제공하고 있습니다. 

   - 문단 내에서 특별한 문장을 눈에 띄게 해주는 lead, 텍스트 중에서 강조가 필요한 단어에 이탤릭이나 볼드 속성을 부여하는 strong, em이 있습니다.

  

  2) 텍스트 눈에 띄게 하기 (lead)

   - lead 클래스는 문단 내에서 눈에 강조를 하여 눈에 띄게 하는 효과를 줍니다.

   - 사용법은 <p> 또는 <span> 태그로 감싸 준 뒤, 해당 태그의 클래스를 "lead"로 지정해주면 됩니다.

  아래 예제를 통해 확인 가능 합니다.

            <div>
                This is normal text.
                <p class="lead">This is lead text.</p>
            </div>
 

 

  3) 글씨 강조하기 (strong, emphasize)

   - 흔히, 워드 프로그램에서 강조를 위해 Bold(진하게)와 Italic(기울임) 동일한 효과를 부여하는 태그입니다.

 
            <div>
                This is normal text.<br>
                <strong>This is strong text.</strong><br>
                <em>This is em text.</em>
            </div>

  4) 설명 첨자 달기 (abbreviation)

   - 단어의 축약에 관련된 태그입니다.

   - 약어인 부분을 <abbr> 태그로 감싸고, class는 "initialism"으로 지정해줍니다.

   - 마지막으로 해당 약어에 대한 설명을 title 속성에 기입합니다.

            <div>
                <abbr class="initialism" title="Hyper Text Markup Language">html</abbr>
                은 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍언어의 한 종류이다.
            </div>
 

 5-2. 코드 블록 (Code block)

  부트스트랩에서 코드를 표현하기 위해 총 3가지 타입의 코드 블록을 제공하고 있습니다. 설명하는 도중에 한 줄 또는 부분적인 코드를 위한 inline 타입, 앞에서 보았던 둥근 모서리 기반의 테두리로 감싸여진 basic block, 그리고 마지막으로 웹상에서 흔히 볼 수 있는 구글에서 제공하는 prettify 타입 입니다.

  1) 인라인 형식의 코드 블록 지정(inline)

   - 중간에 코드를 표현하기 위한 태그입니다. 아래처럼 내용을 작성하는 중간에 <code> 태그로 감싸면 코드 표현을 할 수 있습니다.

 
            <div>
                코드 블록 예제: <code>&lt;address&gt;</code>
            </div>
 

  2) 기본 블록(basic block)

   - 기본 블록은 둥근 테두리로 감싸진 박스 안에 코드를 넣어 두는 태그입니다. <pre> 태그를 사용하게 되고 이 예제 코드는 아래와 같습니다.

 
            <pre>
                    &lt;p&gt;Sample text here...&lt;/p&gt;
            </pre>

  3) Google prettify

   - 구글에서 만든 google prettify를 활용하면 이러한 부가 기능을 기본 코드 블록에 부여 할 수 있습니다.

   - 부트스트랩의 기본 요소가 아니기때문에 따로 라이브러리를 다운 받아서 css와 js를 적용하여 사용해야 합니다.

 5-3. 테이블 (tables)

  기본 html보다 더 멋진 테이블을 위한 옵션들 또한 부트스트랩이 제공하고 있습니다.

   .table-bordered: 둥근 코너와 바깥쪽 테두리를 추가합니다.

   .table-stripped: 홀수 행에 밝은 회색 배경을 추가합니다.

   .table-condensed: 셀 패딩을 8px에서 4px로 줄이게 됩니다.

 5-4. 버튼 (buttons)

  기본 html보다 더 멋진 테이블을 위한 옵션들 또한 부트스트랩이 제공하고 있습니다.

종류	class=""	설명
	btn-default	그라데이션이 적용된 회색 기본 버튼
	btn-primary	시각적으로 강조해야 할 필요가 있거나 특별한 행동을 하는 것을 표시하는 버튼
	btn-success	성공한 행동이나 긍정적 행동을 표시하는 버튼
	btn-info	기본 버튼을 대체해서 사용할 수 있는 버튼
	btn-warning	주의 버튼
	btn-danger	위험이나 부정적인 영향이 있음을 표시하는 버튼
	btn-link	링크에 대해 표시하는 버튼

 5-5. 폼 (Form)

  아래는 입력창으로 많이 쓰는 폼입니다. 

  .form-vertical: 수직으로 왼쪽 정렬입니다.

  .form-inline: 왼쪽정렬로 인라인 수평으로 정렬합니다.

  .form-search: 둥근 텍스트형태의 검색을 나타냅니다.

  .form-horizontal: 오른쪽 정렬 수평입니다.

  1) 기본 폼 (basic form)

   - 추가 마크업이 없는 기본 형태의 폼입니다. 

   - <label> 태그를 이용해서 각 컴포넌트의 이름을 작성하고, <input> 태그에서 데이터를 입력받을 수 있는 컴포넌트를 추가합니다.

   

  예제를 통해 확인해 보겠습니다.

            <form class="well">
                <label>Label name</label>
                <input type="text" class="span3" placeholder="Type something..." />
                <span class="help-block"> 여기에 도움말 텍스트 입력 </span>
                <label class="checkbox">
                    <input type="checkbox"> Check me out
                </label>
                <button type="submit" class="btn">Submit</button>
            </form>
            

  2) 검색 폼 (Search form)

   - 아래 예제는 베이직 폼에 .form-search를 추가하고 .search-query를 사용하는 <input> 태그입니다.

            <form class="well form-search">
                <input type="text" class="input-medium search-query"/>
                <button type="submit" class="btn">Search</button>
            </form>

  3) 인라인 폼 (Inline form)

   - 클래스 속성에 form-inline을 추가하고 controls를 사용한 예입니다.

            <form class="well form-inline">
                <input type="text" class="input-small" placeholder="Email"/>
                <input type="password" class="input-small" placeholder="Password"/>
                <label class="checkbox">
                    <input type="checkbox"/> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
            </form>        

  4) 수평형 폼 (Horizontal form)

   - 회원 가입 페이지나 이메일을 전송할 때 더 많은 폼들로 페이지가 이루어진 것을 볼 수 있습니다.

   - 폼의 클래스를 form-horizontal로 지정합니다.

   - 구성방법은 각 컴포넌트의 최상위에 <div class="control-group">을 두고 레이블에는 "control-label" 클래스를 지정, 컴포넌트는 <div class="controls"> 하위에 구성하면 됩니다.

   - 아래 예제에서 각 컴포넌트의 클래스를 control-group으로 구성하고, 각각 위 법칙을 따르는 것을 볼 수 있을 것 입니다.

            <form class="well form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <label for="input01" class="control-label">Text Input</label>
                        <div class="controls">
                            <input type="text" id="input01" class="input-large"/>
                            <p class="help-block">
                                In addition to freeform text, any HTML5 text-based
                                input appears like so.
                            </p>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="optionsCheckbox" class="control-label">Checkbox</label>
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox" value="option1" id="optionsCheckbox" />
                                Option one is this and that be sure to include why it's great. </label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="select01" class="control-label">Select list</label>
                        <div class="controls">
                            <select id="select01">
                                <option>something</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="multiSelect" class="control-label">Multicon-select</label>
                        <div class="controls">
                            <select id="multiSelect" multiple="multiple">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="fileInput" class="control-label">File input</label>
                        <div class="controls">
                            <input type="file" id="fileInput" class="input-file"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="textarea" class="control-label">Textarea</label>
                        <div class="controls">
                            <textarea rows="3" id="textArea" class="input-xlarge"></textarea>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button class="btn-primary" type="submit">
                            Save changes
                        </button>
                        <button class="btn">
                            Cancel
                        </button>
                    </div>
                </fieldset>
            </form>

  5) 폼 컨트롤 상태와 검증

   - 위의 예제에서 좀 더 커스터마이징을 해 보도록 하겠습니다. 

   - 비활성 상태와 아웃라인(outline) 제거하고 그 공간에 대해서 box-shadow 와 :focus 등을 지원합니다.

            <form class="well form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <label for="focusedInput" class="control-label">Focused Input</label>
                        <div class="controls">
                            <input type="text" id="focusedInput" value="This is focused" class="input-xlarge focused"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">Uneditable input</label>
                        <div class="controls">
                            <span class="input-xlarge uneditable-input">Some value here</span>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="disabledInput" class="control-label">Disabled input</label>
                        <div class="controls">
                            <input type="text" disabled="" id="disabledInput" class="input-xlarge disabled"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="optionsCheckbox2" class="control-label">Disabled Checkbox</label>
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox" disabled="" value="option1" id="optionsCheckbox2"/>
                                This is a disabled checkbox
                            </label>
                        </div>
                    </div>
                    
                    <div class="control-group warning">
                        <label for="inputWarning" class="control-label">Input with warning</label>
                        <div class="controls">
                            <input type="text" id="inputWarning"/>
                            <span class="help-inline">Something may have gone wrong</span>
                        </div>
                    </div>
                    
                    <div class="control-group error">
                        <label for="inputError" class="control-label">Input with error</label>
                        <div class="controls">
                            <input type="text" id="inputError"/>
                            <span class="help-inline">Please correct the error</span>
                        </div>
                    </div>
                    
                    <div class="control-group success">
                        <label for="inputSuccess" class="control-label">Input with success</label>
                        <div class="controls">
                            <input type="text" id="inputSuccess"/>
                            <span class="help-inline">Woohoo!</span>
                        </div>
                    </div>
                    
                    <div class="control-group success">
                        <label for="selectError" class="control-label">Select with success</label>
                        <div class="controls">
                            <select id="selectError">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                            <span class="help-inline">Woohoo!</span>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button class="btn-primary" type="submit">Save changes</button>
                        <button class="btn">Cancel</button>
                    </div>
                    
                </fieldset>
            </form>

 5-6. 아이콘 (Icons)

  부트스트랩 UI의 아이콘 이미지는 Glyphicons에서 제공하는 아이콘 셋을 이용하고 있습니다. 아이콘 셋은 단일 이미지로 CSS 스프라이트(CSS Sprite) 기법을 적용해 사용하고 있습니다. 스프라이트 기법은 하나의 이미지 셋에 모든 아이콘을 담고 background-position을 사용해서 표현하는 방법입니다. 태그는 주로 <i> 태그를 사용하며 만약 검색 아이콘을 표현한다면 아래처럼 작성합니다.

<i class="icon-search"></i>

 아래와 같은 아이콘이 나오게 됩니다.

6. 컴포넌트 (Components)

 부트스트랩에서는 CSS들을 보다 더 웹에서 풍요롭게 표현 할 수 있게 컴포넌트를 제공합니다.

 6-1. 다양한 버튼과 효과에 대해서 알아보기

  1) 버튼 그룹 (Button groups)

   - 버튼 그룹을 이용하면 여러 개의 버튼들을 모아서 하나의 복합된 컴포넌트로 표현 할 수 있습니다.

            <div class="btn-group">
                <a class="btn">메인</a>
                <a class="btn">카페</a>
                <a class="btn">블로그</a>
                <a class="btn">쇼핑</a>
            </div>

 - 커스터마이징을 해서 버튼 그룹을 여럿 나열 할 경우, 아래와 같이 사용합니다.

  

            <div class="btn-toolbar">
                <div class="btn-group">
                    <a class="btn">메인</a>
                    <a class="btn">카페</a>
                    <a class="btn">블로그</a>
                    <a class="btn">쇼핑</a>
                </div>
                <div class="btn-group">
                    <a class="btn">사전</a>
                    <a class="btn">증권</a>
                    <a class="btn">뉴스</a>
                </div>
            </div>

  2) 드롭다운 버튼 (Button dropdowns)

   - 부트스트랩은 각각의 버튼에 세부 항목을 선택할 수 있도록 드롭다운 형식의 버튼을 제공합니다.

   - 아래 예제를 통해 버튼에 아이콘을 넣고 세부 항목을 입력해서 확인해 봅시다.

<div class="dropdown">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-th-large"></i> <span class="caret"></span> </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li>
            전체선택
        </li>
        <li>
            선택안함
        </li>
        <li>
            읽음
        </li>
        <li>
            읽지않음
        </li>
        <li>
            별표
        </li>
        <li>
            별표없음
        </li>
    </ul>
</div>

  

 6-2. 여러 종류의 리스트 스타일 내비게이션들 (nav, tabs, and pills)

  1) 베이직 내비게이션 탭 (Basic navigation tab)

   - 내비게이션 탭은 <ul> 태그로 이루어져 있습니다. 

   - 즉, 기존에 사용하던 리스트와 동일하나 화면에 보이는 모습이 내비게이션 탭 형태 일 뿐입니다.

            <ul class="nav nav-tabs">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>

  아래는 사용자가 어떤 탭을 눌렀는지 혹은 현재 어떤 탭에 해당하는지를 쉽게 표현하는 방법을 보겠습니다.

            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>

 간단하게 li 클래스를 active를 먹여주면 됩니다.

 - 선 스타일보다 솔리드 스타일을 적용하고 싶으시면 nav-tabs를 nav-pills로 바꿔주시면 됩니다.

            <ul class="nav nav-pills">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
 

  2) 메뉴 버튼에서 드롭다운 스타일 적용하기

   - 한 줄로 쭉 메뉴를 나열하기 힘든 경우엔 메뉴에 한 탭을 드롭다운 스타일을 부여 할 수 있습니다.

            <ul class="nav nav-tabs">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li class="dropdown active">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Messages
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a>Read</a></li>
                        <li><a>Send</a></li>
                    </ul>
                </li>
            </ul>

  3) 스택 탭 (Stackable tab)

   - 기본적으로 스택 탭은 앞에서 살펴 본 내비게이션 탭과 유사합니다.

   - 다만, 이름에서 알 수 있듯이 각각의 메뉴가 스택 형식으로 쌓여 있을 뿐 기능적 요소는 같습니다.

            <ul class="nav nav-tabs nav-stacked">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
 

  4) 서브 네비게이션 (Sub Navigation)

   - 메인 네비게이션에 모든 항목을 등재하면 복잡하고 구성함에 있어서 불편함을 초래합니다.

   - 서브 네비게이션을 이용하여 세부 항목을 등재합니다.

 
            <div class="subnav">
                <ul class="nav nav-pills">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Buttons <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="">
                                <a>Button groups</a>
                            </li>
                            <li class="">
                                <a>Button dropdowns</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toogle="dropdown">Navigation <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="">
                                <a>Nav, tabs, pills</a>
                            </li>
                            <li class="">
                                <a>Navbar</a>
                            </li>
                            <li class="">
                                <a>Breadcrumbs</a>
                            </li>
                            <li class="">
                                <a>Pagination</a>
                            </li>
                        </ul>
                    </li>
                    <li class="">
                        <a>Labels</a>
                    </li>
                    <li class="">
                        <a>Typography</a>
                    </li>
                    <li class="">
                        <a>Thumbnails</a>
                    </li>
                    <li class="">
                        <a>Alerts</a>
                    </li>
                    <li class="">
                        <a>Progress bars</a>
                    </li>
                    <li class="">
                        <a>Miscellaneous</a>
                    </li>
                </ul>
            </div>

  5) 리스트형 네비게이션 (Navigation lists)

   - 네비게이션 링크를 그룹으로 형성화 할 수 있도록 도와주는 컴포넌트입니다.

            <ul class="nav nav-list">
                <li class="nav-header">List Header</li>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">Applications</a></li>
                <li class="nav-header"><a href="#">Another List Header</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
            </ul>

 * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다.