<!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.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 class="active"><a>호실별 정보</a></li><!-- 선택 된 상태일때 addClass 'active'--> <li><a>임대료내역</a></li> </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 class="room_user"> <p style="margin:20px 0px 7px 0px;">최봉수</p> <p class="price">01011112222</p><!-- 금액 --> </li> <li class="status_box"> <div class="status green"> <a>입주</a><!-- 상태(입주일때는 class = 'green') --> </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 class="room_user"> <p style="margin:20px 0px 7px 0px;"></p> <p></p><!-- 금액 --> </li> <li class="status_box"> <div class="status red"> <a>공실</a><!-- 상태(공실일때는 class = 'green') --> </div> </li> <div style="clear:both;"></div> </ul> <ul class="room_info"> <li> <div class="date room_num"> <p>201호</p><!-- 호실 --> </div> </li> <li class="room_user"> <p style="margin:20px 0px 7px 0px;">최봉수</p> <p class="price">01011112222</p><!-- 금액 --> </li> <li class="status_box"> <div class="status logn_status navy"> <a>퇴실예정</a><!-- 상태(퇴실예정일때는 class = 'navy') --> </div> </li> <div style="clear:both;"></div> </ul> <ul class="room_info"> <li> <div class="date room_num"> <p>201호</p><!-- 호실 --> </div> </li> <li class="room_user"> <p style="margin:20px 0px 7px 0px;">최봉수</p> <p class="price">01011112222</p><!-- 금액 --> </li> <li class="status_box"> <div class="status logn_status yellow"> <a>입실예정</a><!-- 상태(입실예정일때는 class = 'yellow') --> </div> </li> <div style="clear:both;"></div> </ul> </section> <!-- 리스트 --> </div> </body> </html>