Jam's story

[CSS] 아이콘에 스타일+ 막대그래프 +사원 이미지 본문

WEB/CSS

[CSS] 아이콘에 스타일+ 막대그래프 +사원 이미지

애플쩀 2022. 5. 25. 14:53 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>
table {
    width: 100%;
    border: 1px solid #ddd;
    border-spacing: 0;
    border-collapse: collapse;
}

th, td {
    text-align: center;
    padding: 16px;
}

th:first-child, td:first-child {
    text-align: left;
}

tr:nth-child(even) {
    background: #f2f2f2;
}

.fa-check {
    color: green;
}

.fa-remove {
    color: red;
}
</style>

</head>
<body>
    <table>
        <tr>
            <th style="width: 50%">Features</th>
            <th>Basic</th>
            <th>Pro</th>
        </tr>
        <tr>
            <td>Sample text</td>
            <td><i class="fa fa-remove"></i></td>
            <td><i class="fa fa-check"></i></td>
        </tr>
        <tr>
            <td>Sample text</td>
            <td><i class="fa fa-check"></i></td>
            <td><i class="fa fa-check"></i></td>
        </tr>
        <tr>
            <td>Sample text</td>
            <td><i class="fa fa-remove"></i></td>
            <td><i class="fa fa-check"></i></td>
        </tr>
        <tr>
            <td>Sample text</td>
            <td><i class="fa fa-check"></i></td>
            <td><i class="fa fa-check"></i></td>
        </tr>
        <tr>
            <td>Sample text</td>
            <td><i class="fa fa-remove"></i></td>
            <td><i class="fa fa-check"></i></td>
        </tr>
    </table>
</body>
</html>
Features Basic Pro
Sample text
Sample text
Sample text
Sample text
Sample text

 

 

별점

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.checked{
color:orange;
}
span.fa{
font-size: 25px;
}
.heading{
font-size:25px;
margin-right: 25px;
}
</style>
</head>
<body>
<h3>ex10</h3>
<!-- span[class=""]*6 -->
<hr style="border: 3px solid #f1f1f1" />
<span class="heading">평점 : </span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</body>
</html>
Insert title here

ex10

평점 :

막대그래프1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SS16 2022. 5. 25 - 오후 3:10:04</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https:/ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>
  *{    /* 0점 */
     box-sizing: border-box;
  }
  
  body{
     font-family: Arial;
     border:1px solid red;
     padding:20px;
     
     max-width: 800px;
     margin: 0 auto;
     height: 100%;
  }
  
  /* ::의사요소 */
  .row::after{
      content:"";
      clear:both;
      display: table;
  }
  
  .side{
     float: left;
     width:15%;
     margin-top:10px;
  }
  .middle{
     float: left;
     width:70%;
     margin-top:10px;
  }
  
  .middle .bar-container{
     width: 100%;
     background-color: #f1f1f1; 
     text-align: center;
     color:white;
  }
  
  .right{
     text-align: right;
  }
  
  /* 막패 그래프  */
  /* <div class="bar-1"></div> */
  .bar-1 {
     background-color: #f44336; 
     height: 18px;
     width: 20%; 
  }
  .bar-2{
     background-color: #3296F3; 
     height: 18px;
     width: 15%; 
  }
  .bar-3 {
     background-color: #00BCD4; 
     height: 18px;
     width: 75%; 
  }
  .bar-4 {
     background-color: #FF9800; 
     height: 18px;
     width: 86%; 
  }
  .bar-5 {
     background-color: #4caf50; 
     height: 18px;
     width: 40%; 
  }
  
</style>

<style>
  @media (max-width:400px){
    .side,  .middle{
      width:100%;
    }
    .right{
      display: none;
    }
  }  
</style>


</head>
<body>
<h3>ex10_02.html  - 막대 그래프</h3>

<div class="row">
   
   <!-- bar start -->
   <div class="side">
      <div>1 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
      <div class="bar-container">   
         <div class="bar-1"></div>
      </div>
   </div> 
   <div class="side right">
      <div>20</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
      <div>2 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
      <div class="bar-container">   
         <div class="bar-2"></div>
      </div>
   </div> 
   <div class="side right">
      <div>15</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
      <div>3 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
      <div class="bar-container">   
         <div class="bar-3"></div>
      </div>
   </div> 
   <div class="side right">
      <div>75</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
      <div>4 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
      <div class="bar-container">   
         <div class="bar-4"></div>
      </div>
   </div> 
   <div class="side right">
      <div>86</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
      <div>5 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
      <div class="bar-container">   
         <div class="bar-5"></div>
      </div>
   </div> 
   <div class="side right">
      <div>40</div>
   </div>
   <!-- bar end -->
   
</div>

</body>
</html>
SS16 2022. 5. 25 - 오후 3:10:04

ex10_02.html - 막대 그래프

1 star
20
2 star
15
3 star
75
4 star
86
5 star
40

 

 

막대그래프2

<!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>
	*{
		box-sizing: border-box;
	}
	body{
		font-family: Arial;
		border: 1px solid red;
		padding: 20px;
		max-width: 800px;
		margin: 0 auto; /* 가운데 */
		height: 100%;
	}
</style>

<style>
	.heading{
		font-size: 25px;
		margin-right: 25px;
	}
	
	.fa{
		font-size: 25px;
	}
	
	.checked{
		color: orange;
	}
</style>

<style>
	.side{
		float: left;
		width: 15%;
		margin-top: 10px; 
	}
	.middle{
		float: left;
		width: 70%;
		margin-top: 10px;
	}
	.bar-container{ 
		width: 100%; /* 부모가 70%고 그에대해 100%로 꽉 채우겠단 */
		background: #f1f1f1;
		text-align: center;
		color: white;
	}
	.right{
		text-align: right;
	}
	
	.row::after{ /* 모두를 감싼 div  */
		content: "";
		clear: both;
		display: table;
	}
	

	.bar-5{width: 60%; height: 18px; background: #4CAF50;} /* 부모의 60%니까 */
	.bar-4{width: 30%; height: 18px; background: #3296F3;}
	.bar-3{width: 10%; height: 18px; background: #00BCD4;}
	.bar-2{width: 4%; height: 18px; background: #FF9800;}
	.bar-1{width: 15%; height: 18px; background: #F44336;}
</style>

<style>
@media screen and (max-width:600px){
	.side, .middle{
		width: 100%;
	}
	.right{
		display: none;
	}
}
</style>

</head>
<body>
<div class="row">

	<div class="side">
		<div>5 stars</div>
	</div>
	<div class="middle">
		<div class="bar-container">
			<div class="bar-5"></div>
		</div>
	</div>
	<div class="side right">
		<div>150</div>
	</div>
	
	<div class="side">
		<div>4 stars</div>
	</div>
	<div class="middle">
		<div class="bar-container">
			<div class="bar-4"></div>
		</div>
	</div>
	<div class="side right">
		<div>63</div>
	</div>
	
	<div class="side">
		<div>3 stars</div>
	</div>
	<div class="middle">
		<div class="bar-container">
			<div class="bar-3"></div>
		</div>
	</div>
	<div class="side right">
		<div>15</div>
	</div>
	
	<div class="side">
		<div>2 stars</div>
	</div>
	<div class="middle">
		<div class="bar-container">
			<div class="bar-2"></div>
		</div>
	</div>
	<div class="side right">
		<div>6</div>
	</div>
	
	<div class="side">
		<div>1 stars</div>
	</div>
	<div class="middle">
		<div class="bar-container">
			<div class="bar-1"></div>
		</div>
	</div>
	<div class="side right">
		<div>20</div>
	</div>
	
</div>
<hr style="border: 3px solid #f1f1f1" />
<span class="heading">평점: </span>
<!-- span.fa.fa-star.checked*5 -->
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</body>
</html>

1

Insert title here
5 stars
150
4 stars
63
3 stars
15
2 stars
6
1 stars
20
평점:

 

저작자표시 (새창열림)

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

[CSS] 여러 배경이미지 (다중 배경) 추가  (0) 2022.05.25
[CSS] border-radius  (0) 2022.05.25
[CSS] 특수성(특이성)  (0) 2022.05.25
[CSS] 검색창 만들기( 이미지 넣기, 크기늘리기)  (0) 2022.05.25
[CSS]속성선택자  (0) 2022.05.25
'WEB/CSS' Related Articles more
Comments