Bootstrap 커스터마이징
(슬라이더,그래피콘)
4/19 개발일기
이제 기본적인 조회 화면은 준비가 완료됐고 메인화면 샘플을 만들자.
디자이너에게 받은 메인화면은 텍스트만 롤링되는 슬라이더 + 다양한 그래피콘으로 이루어져 있었다.
1. 텍스트만 롤링되는 슬라이더
부트스트랩에서 기본 제공하는 슬라이더는 이미지가 전체 롤링된다. 텍스트만 롤링되는 건 찾아보니 아래와 같이 누군가 친절하게 만들어두었다. 그래서 기본적으로는 이걸 참고했다.
그런데 희안하게 이 소스 은근히 복잡하다. 위 링크에 있는 javascript 안 써도 부트스트랩 기본 js만 잘 import 하면 텍스트만 잘 돌아간다(..) style 은 복+붙했다. div 형태도 너무 복잡해서 일부 변경했다. (그리드 클래스 삭제함) 그리고 나는 화살표로 된 prev, next 화면 넘기기 기능은 필요없고 동그라미 indicator만 필요해서 그걸 하단에 넣었다.
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
</ol>
**indicator 가 정상적으로 작동하려면 li data-target="" 안에 있는 값을 carousel 클래스를 가진 div의 ID값으로 작성해주어야 한다.
2. 그래피콘을 웹폰트로 전환
디자이너가 준 아이콘 샘플 중엔 부트스트랩 기본 웹폰트에 없는 것도 많았다. 그래서 searching 하다가 svg 파일만 있으면 웹폰트로 간단하게 전환이 가능하다는 걸 알았다. 아래 블로그를 참고했다.
아래 블로그에서 생략되어있는 부분들을 첨언하자면,
(1) 웹폰트로 전환-다운로드 받은 뒤 생성된 .eot, .svg, .tft, .woff 파일 등을 fonts 폴더에 넣는다.
(2) 예제로 생성된 css를 복사하여 자신의 css 파일에 붙인다.(url 수정 필요)
나의 경우 생성된 css 파일은 이렇다.
//custom icon
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?xws1pw');
src: url('../fonts/icomoon.eot?xws1pw#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?xws1pw') format('truetype'),
url('../fonts/icomoon.woff?xws1pw') format('woff'),
url('../fonts/icomoon.svg?xws1pw#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-transport:before {
content: "\e900";
}
.icon-database:before {
content: "\e901";
}
.icon-trophy:before {
content: "\e902";
}
이걸 그대로 복사해서 넣고, html 에서는 아래와 같이 입력하여 사용한다.
<span class="icon-trophy"></span>
