<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML +CSS tag 방 D</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><a href="https://www.geeksforgeeks.org/create-a-search-bar-using-html-and-css/" target="_blank" class="ke-link">https://www.geeksforgeeks.org/create-a-search-bar-using-html-and-css/</a></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>    Create a Search Bar using HTML and CSS </title>  </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport"   content="width=device-width, initial-scale=1"   </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" target="_top" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css</a>"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style>     </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        /* styling navlist */</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        #navlist {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background-color: #0074D9;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            position: absolute;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            width: 100%;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }      </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        /* styling navlist anchor element */</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        #navlist a {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            float:left;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            display: block;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            color: #f2f2f2;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            text-align: center;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            padding: 12px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            text-decoration: none;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            font-size: 15px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .navlist-right{</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            float:right;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        /* hover effect of navlist anchor element */</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        #navlist a:hover {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background-color: #ddd;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            color: black;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>         </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        /* styling search bar */</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .search input[type=text]{</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            width:300px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            height:25px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            border-radius:25px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            border: none;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }    </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .search{</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            float:right;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            margin:7px;</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>         </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .search button{</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background-color: #0074D9;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            color: #f2f2f2;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            float: right;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            padding: 5px 10px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            margin-right: 16px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            font-size: 12px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            border: none;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            cursor: pointer;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </style></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Navbar items --></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div id="navlist"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#">Home</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#">Our Products</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#">Careers</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#">About Us</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#">Contact Us</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>         </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!-- search bar right align --></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="search"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>             </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <form action="#"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <input type="text"</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    placeholder=" Search Courses"</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    name="search"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <button></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <i class="fa fa-search"</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        style="font-size: 18px;"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </i></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </button></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </form></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- logo with tag --></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="content"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h1 style="color:green; padding-top:40px;"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            GeeksforGeeks</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </h1></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>         </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <b></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            A Computer Science</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            Portal for Geeks</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </b>                 </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><p></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            How many times were you frustrated while</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            looking out for a good collection of</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            programming/algorithm/interview questions?</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            What did you expect and what did you get?</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            This portal has been created to provide</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            well written, well thought and well</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            explained solutions for selected questions.</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </p></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html>                </b></span></p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>2023. 02. 05. 일  요일 23:49分</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>달솜이네(안 혜경)50分.발바닥쥐51.발목쥐51.잔뇨53分_두피+솔55입력06일00:01分.심 하윤.정 유나10分_</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>물마셔22分_대남 간첩 이 미옥26分</b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML +CSS tag 방 D</b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/howto/howto_css_searchbar.asp