부트스트랩 사용법 (glyphicons 아이콘 넣기)

 

 

부트스트랩 사용법 (glyphicons 아이콘 넣기)

 

부트스트랩 참 많이도 들어보았는데, 정확히 무엇이고 어떻게 사용해야 할까요?

 

읽기만 하고는 도저히 이해가 가지 않아 직접 부트스트랩을 사용해 보기로 했어요.

 

그래서 오늘은 부트스트랩을 이용하여 메뉴 아이콘을 넣기를 해 볼 생각합니다.

 

이렇게 먼저 간단한 활용법을 배운 후에, 자세한 사용법을 이후 강좌에서 차차 살펴 볼까 해요.

 

일단 그래도 한 가지 알아두어야 할 것은...

 

 

부트스트랩(bootstrap)이란?

 

웹사이트를 만들 때 html, css, 자바스크립트 언어를 아는 사람은 직접 만들기도하고,

 

드림위버 같은 저작도구를 사용하기도 합니다.

 

부트스트랩도 일종의 웹사이트 저작 도구로(특히 반응형에 최적)  htm과, css에 기반한 템플릿을 제공합니다.

 

일종의 틀이나, 모형이라고 생각하면 쉽습니다. 

 

예를 들어, 아래와 같은 버튼을 만들려면, 색상이라든과 둥근 모서리 효과를 위해 여러가지 css 지식이 필요하지만

 

틀이 이미 만들어져 있다면 그 틀을 원하는 곳에 갖다 넣기만 하면 되겠지요. 

 

 

이 버튼을 사용하려면, 아래 빨간색으로 된 클래스명을 사용하기만 하면 됩니다, 정말 간편하죠?

 

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

 

 

하지만 그러기에 앞어 부트스트랩을 이용하려면 사전 세팅이 필요합니다.

 

 

부트스트랩을 이용하기 위한 사전 설정

 

1. head 사이에 style 위에 다음을 삽입

   부트스트랩 기본 css 입니다.

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

 

 

2. body가 끝나는 지점 바로 위에 다음을 삽입

 

  첫번째 줄은 jquery 파일이고, 두번째 줄은 자바스크립트 파일

 *단순히 아이콘만 사용할 셈이라면 이 파일 삽입은 필요하지 않음*

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 

삽입 위치가 어려우신 분은 아래 기본 템플릿을 다운받아 복사해서 사용하세요.

 

bootstrap_basic_template.txt

 

이제 부트스트랩 사전 설정이 끝났으니, 오늘 강좌의 목적인 메뉴 아이콘 넣기를 해 보겠습니다.

 

 

부트스트랩으로 메뉴 아이콘 넣기

 

1. 아래 부트스트랩 사이트로 이동합니다.

 

http://getbootstrap.com/components/

 

그럼 Glyphicons이라고 있는데, 이곳에서 메뉴 아이콘을 찾아봅시다.  

 

요렇게 생긴 아이콘입니다. 아이콘 밑에는 glyphicon glyphicon-align-justify 라고 써 있습니다.

 

이게 바로 이 아이콘의 클래스명입니다.

 

[HTML, CSS 기초] class, id 선택자

2. 사용법은 클래스명을 아래처럼 원하는 위치에 삽입합니다.

 

<태그명 class="glyphicon glyphicon-align-justify"></태그명>

 

티스토리에서는 화면 상단 오른쪽에 □ HTML 에 체크 표시한 후에 이 클래스명을 넣어줍니다.

 

 

저는, 어제 배운 강좌를  활용해 보았습니다.

 

css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴.

 

html

<div id="header">
<label for="toggle" onclick><span class="glyphicon glyphicon-align-justify"></span></label>
<input type="checkbox" id="toggle"/>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Noitce</a></li>
</ul>
</div>

 

 

어제는 이 자리에 'MENU' 라는 글자와 메뉴 아이콘 이미지를 사용했는데

 

오늘은 그 부분을 빼고, 부트스트랩 아이콘을 사용합니다.

 

그리고 아이콘을 우측에 놓기 위해 다음 css 설정을 해 주었어요.

 

css

label{display:block; text-align:right; padding: 4px 3%;}

 

▶실행화면

 

bootstrap example.html

 

 

 

하지만, 부트스트랩 사용 시 유의할 사항이 있습니다.

 

 

부트스트랩 사용 시 유의 사항(필독)

 

▶브트스트랩 지원 브라우저

 

ie8+, chrome, firefox, opera, safari, iOS, Android

 

(border-radius, box-shadow, transform, transition, placeholder는 ie9+부터)

 

출처: http://getbootstrap.com/getting-started/

 

최근 브라우저는 대부분 지원하지만 인터넷 익스플로러는 8 이상부터 지원합니다.

 

그러므로, 그 이하 버전에서 브트스트랩을 이용한 아이콘을 보면 전혀 표시되지 않겠지요.

 

또 티스토리를 모바일로 볼 때, 반응형 스킨을 사용하지 않을 경우에도 제대로 보이지 않습니다.

 

제 티스토리 또한 그렇습니다.

 

 

또한 IE 문서 모드 중 오래된 모드에서는 지원되지 않습니다. 항상 최신 문서 모드를 사용하세요

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")