다연이네

[days01] 구글 글씨체 사용하기, 외부 아이콘 사용하기 본문

Web/CSS

[days01] 구글 글씨체 사용하기, 외부 아이콘 사용하기

　다연　 2020. 12. 3. 21:07
반응형

1. 구글 글씨체 사용하기 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
	body{
		font-family: "Sofia";
	}
	h3{
		/* style variant  weight  size/line-height family */
		font: italic small-caps bold 12px serif; /*일케 하나로 줄여서 설정 가능*/
		
		font-weight: bold; /* 100~900도 삽입 가능  */
	}
</style>

</head>
<body>
<!-- 구글 글꼴을 사용할 수 있다  -->
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>

 

 

2. 외부 아이콘 사용하기

  1) fontawesome

  2) 부트스트랩

  3) 구글

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- 위 스크립트 추가, 아이콘을 제공하는 라이브러리를 설치하지 않고 참조해서 쓰겠다  -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 부트스트랩을 다운로드나 설치하지 않고 사용  -->

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- 구글 아이콘  -->

<style>
	p.normal{
		font-variant: normal;
	}
	p.small{
		font-variant: small-caps; /* 작은 대문자 */
	}
</style>

</head>
<body>

<!-- 구글 아이콘  -->
<p>Google</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>


<!-- 부트스트랩 아이콘-->
<p>Bootstrap</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>



<!-- https://fontawesome.com/icons?d=gallery 여기 아이콘 참조한 것 -->
<p>Awesome icons + size + color</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart" style="font-size:36px; color:pink";></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<i class="fas fa-star" ></i>



<!-- 아이콘 추가 : 가장 간단한 방법 Font Awesome 라이브러리  -->

<p class="normal">Lorem ipsum dolor sit amet.</p>
<p class="small">Illum labore quaerat aperiam esse?</p>
</body>
</html>

 

 

위 아이콘을 이용해 메뉴바처럼 만들어보기

 

마우스를 올리지 않은 경우
마우스를 올린 경우

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 폰트어썸 아이콘 사용할거다 -->

<style>
	body{
	margin:0;
	}

	.active{
		background-color:#4CAF50;
	}
	.icon-bar{
		width:100%;
		background-color:#555;
		overflow: auto;
	}
	
	.icon-bar a{
		width:20%; /* a태그는 인라인 모드기때문에 너비 안잡힘 => float을 주면 됨 */
		float: left; /* 이거 주니까 icon-bar의 배경 속성 사라짐 => icon-bar 가서 overflow:auto 주자 */
		text-align: center;
		padding: 12px 0;
		color: white;
		font-size: 36px;
		
	}
	.icon-bar a:hover{
	background-color:#000;
	}

</style>

</head>
<body>


<div class="icon-bar">
	<a class="active" href="#"><i class="fa fa-home"></i></a>
	<a href="#"><i class="fa fa-search"></i></a>
	<a href="#"><i class="fa fa-envelope"></i></a>
	<a href="#"><i class="fa fa-globe"></i></a>
	<a href="#"><i class="fa fa-trash"></i></a>
</div>





</body>
</html>
반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days02] 페이징 처리  (0) 2020.12.04
[days02] 메뉴바 만들기 test  (0) 2020.12.04
[days01] CSS 텍스트: 색상, 정렬, 장식, 변환 등 + 글씨체  (0) 2020.12.03
[days01] max-width(height)와 오버플로우(스크롤바 외)  (0) 2020.12.03
[days01] 여백(margine)과 패딩(padding) + outline  (0) 2020.12.03
'Web/CSS' Related Articles more
Comments