<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="Wrap" style="height:100%"> <!-- 헤드 --> <header> <ul> <li><img src="img/btn_top_back_over.png" alt="back" width="20%"/></li> <li><p>청구서</p></li> <li><img src="img/btn_title_privacy.png" alt="privacy" width="22%"/></li> </ul> <div style="clear:both;"></div> </header> <!-- 헤드 --> <!-- 네비게이션 --> <nav> <ul> <li class="active"><a>월세</a></li><!-- 선택 된 상태일때 addClass 'active'--> <li><a>공과금</a></li> <li><a>퇴실정산서</a></li> </ul> <div style="clear:both;"></div> </nav> <!-- 네비게이션 --> <!-- 건물명/년도 --> <div class="year"> <ul> <li><a>파라곤 201</a></li> <li><a>2017</a></li> </ul> <div style="clear:both"></div> </div> <!-- 건물명/년도 --> <!-- 리스트 --> <section> <!-- 리스트 1개당 ul반복 --> <ul> <li> <div class="date"> <p>8월</p><!-- 날짜 --> </div> </li> <li> <p style="margin:20px 0px 7px 0px;">2017.01.12 (월세+관리비)</p> <p class="price">430,000원</p><!-- 금액 --> </li> <li class="status_box"> <div class="status orange"> <a>연체</a><!-- 상태(연체일때는 class = 'orange') --> </div> </li> <div style="clear:both;"></div> </ul> <!-- 리스트 1개당 ul반복 --> <ul> <li> <div class="date"> <p>7월</p><!-- 날짜 --> </div> </li> <li> <p style="margin:20px 0px 7px 0px;">2016.12.12 (월세+관리비)</p> <p class="price">250,000원</p><!-- 금액 --> </li> <li class="status_box"> <div class="status green"> <a>납입</a><!-- 상태(납입일때는 class = 'green') --> </div> </li> <div style="clear:both;"></div> </ul> </section> <!-- 리스트 --> </div> </body> </html>