상세 컨텐츠

본문 제목

sdu html 강의 실습 1차

html, css

by bumychoi 2025. 4. 23. 17:41

본문

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chapter 9</title>
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
        crossorigin="anonymous"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: normal 12px 'Dotum';
        }

        a {
            text-decoration: none;
        }

        img {
            border: 0;
        }

        ul {
            list-style: none;
        }

        body {
            width: 980px;
            margin: 0 auto;
        }

        .logo {
            background: rgb(5, 191, 242);
        }

        #main_header {
            position: relative;
            height: 75px;
        }

        #main_header>h1.logo {
            position: absolute;
            left: 15px;
            top: 10px;
        }

        #main_header>div.login_menu {
            position: absolute;
            top: 10px;
            right: 0px;
        }

        #global_aside {
            position: absolute;
            left: 990px;
            top: 75px;
            width: 90px;
        }

        #global_aside>a {
            display: block;
            margin-bottom: 5px;
        }

        #global_aside>div>button {
            margin-bottom: 5px;
            display: block;
        }

        #top_gnb {
            overflow: hidden;

        }

        #top_gnb>ul {
            background: rgb(239, 235, 235);
            height: 30px;
            justify-items: center;
            text-align: center;
            justify-content: center;

        }

        #top_gnb>ul>li {
            float: left;
            width: 140px;
            height: 50px;

        }

        #bottom_gnb {
            overflow: hidden;
        }

        #bottom_gnb>div.menu {
            justify-items: center;
            align-items: center;
            text-align: center;
            float: left;
            width: 98px;
            height: 25px;
            background-color: rgb(28, 131, 242);
            border-bottom: dotted rgb(141, 134, 134) ;
            border-left: solid rgb(123, 192, 245);
        }
        #bottom_gnb > div.item_1:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_1:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_2:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_2:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_3:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_3:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_4:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_4:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_5:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_5:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_6:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_6:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_7:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_7:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
        #bottom_gnb > div.item_8:hover {font-weight: bold; color: white; background: blue ;}
        #bottom_gnb > div.item_8:active {font-weight: bold; color: rgb(49, 15, 172); background: rgb(203, 55, 203) ;}
    </style>
</head>

<body>
    <header id="main_header">
        <h1 class="logo">
            <a href="#"><img
        </h1>
        <div class="login_menu">
            <span><a href="#">로그인</a></span>
            <span><a href="#">회원가입</a></span>
            <span><a href="#">고객센터</a></span>
        </div>
    </header>
    <aside id="global_aside">
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
        <a><img src="http://placehold.co/90x160"></a>
    </aside>
    <nav id="top_gnb">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
                    type="button" role="tab" aria-controls="pills-home" aria-selected="true">지 역</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
                    type="button" role="tab" aria-controls="pills-profile" aria-selected="false">쇼 핑</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact"
                    type="button" role="tab" aria-controls="pills-contact" aria-selected="false">문 화</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact"
                    type="button" role="tab" aria-controls="pills-contact" aria-selected="false">여 행</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
                    type="button" role="tab" aria-controls="pills-profile" aria-selected="false">추 천</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact"
                    type="button" role="tab" aria-controls="pills-contact" aria-selected="false">전체보기</button>
            </li>

        </ul>
        <!-- <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
                tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"
                tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab"
                tabindex="0">...</div>
        </div> -->
        <nav id="bottom_gnb">
            <div class="menu item_1">1</div>
            <div class="menu item_2">2</div>
            <div class="menu item_3">3</div>
            <div class="menu item_4">4</div>
            <div class="menu item_5">5</div>
            <div class="menu item_6">6</div>
            <div class="menu item_7">7</div>
            <div class="menu item_8">8</div>
            <div class="menu item_9 active">9</div>
        </nav>
    </nav>


</body>

</html>

'html, css' 카테고리의 다른 글

실습 수정  (0) 2025.04.16
sdu html실습 태블릿 레이아웃  (0) 2025.04.16
계산기  (0) 2025.04.15
sdu 웹표준 수업 실습중 보완  (0) 2025.04.11
sdu 웹표준 수업 실습중  (0) 2025.04.11

관련글 더보기

티스토리툴바