HTML-Layout 연습

임재헌·2023년 3월 24일
0

HTML

목록 보기
17/20
<!DOCTYPE html>   
<html lang="ko"> 
<head>
       <title> 레이아웃 연습 </title> 
    </head>
    <body>
        <!-- 연습) 동행복권 웹페이지 레이아웃 -->
        <!-- 참조 https://dhlottery.co.kr/ -->
        <div id="wrap"><!--this is wrap -->
            <div id="header"><!-- header 두부분으로 나눔-->
                <div><span>동행복권</span> &nbsp;
                <input type="button" value="로그인">
                <input type="button" value="회원가입">
                <input type="button" value="마이페이지">
                <input type="button" value="고객센터">
                </div>
                <div><!--소메뉴-->
                <h1 style="display: none;">대분류</h1>
                <ul style="list-style: none;">
                    <li> 복권구매</li>
                    <li>복권정보</li>
                    <li>당첨결과</li>
                    <li>판매점</li>
                    <li>이벤트</li>
                    <li>행복공감</li>                 
                </ul>
                </div>
            </div><!--header-->

            <div id="main"><!-- main -->
                <div id="sub">
                    <h2 style="display: none;">중분류</h2>
                    <span>판매점</span>
                    <br>
                    <ul style="list-style: none;">
                        <li>구입처안내</li>
                        <li>당첨판매점</li>
                    </ul>
                </div><!-- main 서브메뉴-->
                <div id="content">
                   <h3 style="display: none;">소분류</h3>
                   <span>로또6/45 판매점 조회</span><br>
                   <table border="1">
                        <tr>
                            <td><strong>지역검색</strong>
                                <br>
                                <form action="">
                                    <select name="도시" id="city">
                                        <option value="seoul">서울</option>
                                        <option value="busan">부산</option>                                        
                                        <option value="daejeon">대전</option>
                                        <option value="daegu">대구</option>
                                        </select>
                                        <select name="지역구" id="restrict">
                                            <option value="gangnam">강남구</option>
                                            <option value=" jongro">종로구</option>
                                            <option value="seocho">서초구</option>
                                            <option value="gurho">구로구</option>
                                            </select>
                                <input type="submit" value="조회">

                                </form>

                            </td>
                            <td><strong>상호/지역(읍/면/동)으로 검색</strong>
                                <br>
                                <form action="">
                                <select name="상호명 검색" id="name_search">
                                    <option value="name">상호</option>
                                    <option value="region">지역</option>
                                    </select>
                                <input type="text" maxlength="15" size="10" name="region" >
                                <input type="submit" value="조회">
                                </form>

                            </td>

                        </tr>



                   </table>
                   <hr>
                   <table border="1">
                    <tr>
                        <th>상호명</th>
                        <th>전화번호</th>
                        <th>소재지</th>
                        <th>위치보기 </th>
                    </tr>
                    <tr>
                        <td>도곡행운로또방</td>
                        <td>070-4211-6109</td>
                        <td>서울 강남구 도곡로4길 11 102호</td>
                        <td>
                            <a href=""><img src="../images/search.png"></a>
                        </td>

                    </tr>
                   </table> 
                </div><!-- main content-->
            </div><!-- main -->

            <div id="footer">
                <h1 style="display: none;">꼬리말</h1>
                <ol style="list-style: none;">
                    <li>이용약관</li>
                    <li>개인정보 처리방침</li>
                    <li>인쇄복권당첨금지급기준</li>
                </ol>
                주소: 06719 서울 서초구 남부순환로 2423 한원빌딩 4층<br>
                Copyright (c) 2018 복권위원회&동행복권. All rights reserved
            </div><!--footer-->

        </div>
    </body>
</html>

0개의 댓글

관련 채용 정보