<!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></li> </ul> <div style="clear:both;"></div> </header> <!-- 헤드 --> <!-- 네비게이션 --> <nav> <ul> <li><a>건물정보</a></li> <li><a>호실별 정보</a></li> <li class="active"><a>임대료내역</a></li><!-- 선택 된 상태일때 addClass 'active'--> </ul> <div style="clear:both;"></div> </nav> <!-- 네비게이션 --> <!-- 리스트 --> <section> <!-- 리스트 1개당 ul반복 --> <ul class="room_info"> <li> <div class="date room_num"> <p>201호</p><!-- 호실 --> </div> </li> <li> <p style="margin:20px 0px 7px 0px;">2016.08.25</p> <p class="price">130,000원</p><!-- 금액 --> </li> <li class="status_box"> <div class="status logn_status rent_list brown"> <a>월세</a><!-- 상태([임대료내역]월세일때는 class = 'brown') --> </div> <div class="status logn_status rent_list long_orange"> <a>연체</a><!-- 상태([임대료내역]연체일때는 class = 'long_orange') --> </div> </li> <div style="clear:both;"></div> </ul> <!-- 리스트 1개당 ul반복 --> <ul class="room_info"> <li> <div class="date room_num"> <p>201호</p><!-- 호실 --> </div> </li> <li> <p style="margin:20px 0px 7px 0px;">2016.08.25</p> <p class="price">130,000원</p><!-- 금액 --> </li> <li class="status_box"> <div class="status logn_status rent_list brown"> <a>비용청구</a><!-- 상태([임대료내역]비용청구일때는 class = 'brown') --> </div> </li> <div style="clear:both;"></div> </ul> <ul class="room_info"> <li> <div class="date room_num"> <p>201호</p><!-- 호실 --> </div> </li> <li> <p style="margin:20px 0px 7px 0px;">2016.08.25</p> <p class="price">130,000원</p><!-- 금액 --> </li> <li class="status_box"> <div class="status logn_status rent_list brown"> <a>월세</a><!-- 상태([임대료내역]월세일때는 class = 'brown') --> </div> <div class="status logn_status rent_list long_orange"> <a>연체</a><!-- 상태([임대료내역]연체일때는 class = 'long_orange') --> </div> </li> <div style="clear:both;"></div> </ul> </section> <!-- 리스트 --> </div> </body> </html>