
w3.css
사용자 평가
CSS를 사용하여 “사용자 평가” 점수표를 만드는 방법을 알아보자.
사용자 평가 점수표를 만드는 방법
1단계) HTML 추가
<!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <span class="heading">User Rating</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> <p>4.1 average based on 254 reviews.</p> <hr style="border:3px solid #f1f1f1"> <div class="row"> <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>150</div> </div> <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>63</div> </div> <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>15</div> </div> <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>6</div> </div> <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> </div>
2단계) CSS 추가
* { box-sizing: border-box; } body { font-family: Arial; margin: 0 auto; /* Center website */ max-width: 800px; /* Max width */ padding: 20px; } .heading { font-size: 25px; margin-right: 25px; } .fa { font-size: 25px; } .checked { color: orange; } /* Three column layout */ .side { float: left; width: 15%; margin-top: 10px; } .middle { float: left; width: 70%; margin-top: 10px; } /* Place text to the right */ .right { text-align: right; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* The bar container */ .bar-container { width: 100%; background-color: #f1f1f1; text-align: center; color: white; } /* Individual bars */ .bar-5 {width: 60%; height: 18px; background-color: #04AA6D;} .bar-4 {width: 30%; height: 18px; background-color: #2196F3;} .bar-3 {width: 10%; height: 18px; background-color: #00bcd4;} .bar-2 {width: 4%; height: 18px; background-color: #ff9800;} .bar-1 {width: 15%; height: 18px; background-color: #f44336;} /* Responsive layout - make the columns stack on top of each other instead of next to each other */ @media (max-width: 400px) { .side, .middle { width: 100%; } /* Hide the right column on small screens */ .right { display: none; } }
기본 예시
예제 보기참고
W3C School - How TO - User Rating