웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Css 부트스트랩 아이콘을 사용해봅시다 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] Css 부트스트랩 아이콘을 사용해봅시다

해피CGI윤실장 2017. 3. 8. 09:51
부트스트랩은 일종의 웹사이트 저작도구로 (반응형에 최적) 다양한 템플릿을 제공하고 있습니다.
css를 이용하여 라운드나 그라데이션등 효과를 주려면 css에 대한 지식이 있어야 하지만
부트스트랩을 사용한다면 코드만확인하여 붙여넣어서 사용할 수 있습니다.





아이콘을 사용하기 위해서 위 버튼태그의 3가지 클래스만 사용하면 바로 만들어낼 수 있습니다.

위와같이 사용하기 위해서는 먼저  head사이에 링크를 삽입하세요

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

삽입후 아래와같은 방법으로 사용할 수 있습니다.

<태그명 class="glyphicon glyphion-cloud"></태그명>

위와같이 사용하면 아래와같은 아이콘이 노출됨을 확인하실 수 있습니다.




다양한 아이콘 및 효과들은 데모링크에서 확인하실 수 있습니다.
단 부트스트랩은 ie8이상 버전에서만 작동을하니 참고 부탁드립니다.




지원브라우저

문서모드는 최신문서모드를 사용하세요

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

ie8+, 크롭, 파이어폭스, 오페라, 사파리, IOS, Android (특정css3는 ie9이상부터 작동이됩니다)

 

홈페이지바로가기 

Comments