국비 35일차_2

강지수·2024년 2월 1일

국비교육

목록 보기

68/97

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/default.css">
    <link rel="stylesheet" href="../css/print.css">
    <link rel="stylesheet" href="../css/subpage.css">
</head>
<body>
    
    <div id="wrap">
        <header>
            <div id="login"><a href="#">login </a>|<a href="#"> join</a></div>
            <div class="clear"></div>
            <div id="logo">
                <img src="../images/logo.jpg" width="265px" height="62px" alt="google_logo">
            </div>

            <div class="clear"></div>
            
            <nav id="top_menu">
                <ul>
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="#">COMPANY</a></li>
                    <li><a href="#">SOLUTION</a></li>
                    <li><a href="#">CUSTOMER CENTER</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
            </nav>
        </header>

            <div id="sub_img"><img src="" alt=""></div>
            <nav id="sub_menu">
                <ul>
                    <li><a href="#">Welcome</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Newstory</a></li>
                    <li><a href="#">Public Policy</a></li>
                </ul>
            </nav>



            
            <article>   
            <h1>Welcome</h1>
            <figure class="ceo">
                <img src="../images/company/timimg.png" width="196px" height="226px"  alt="ceo"
                style="border: 1px solid #ccc;">
                <figcaption>Tim Berners-Lee</figcaption>
            </figure>


            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, 
                libero faucibus porttitor bibendum, lorem purus sollicitudin lacus, ut laoreet
                sem dui non nibh. Fusce tempor, eros vulputate luctus malesuada, nunc nisi 
                rutrum massa, vestibulum rhoncus metus tellus in eros. Ut vehicula luctus cursus.
                Aliquam nunc neque, condimentum eu fringilla quis, feugiat in erat. Aliquam vel
                neque dolor, eu porttitor nulla. Cras ac dui metus, non viverra ligula. 
                Maecenas sed tortor justo. Duis vehicula nisl sed sapien egestas ut aliquet 
                purus mattis. Vestibulum vitae libero sapien, sed ultricies lacus. Morbi
                sapien metus, ullamcorper rhoncus cursus in, facilisis id felis. Aliquam id 
                elit lacus, at laoreet enim. Nullam quis purus dui, eu molestie augue.</p>
            <p>Nam venenatis neque quis tortor laoreet egestas hendrerit id diam. Nam adipiscing 
                urna non tortor ornare vel consectetur est cursus. Morbi sed libero quam, sed 
                scelerisque ligula. Vivamus vitae massa in quam hendrerit porttitor. Vivamus ac
                feugiat odio. In hac habitasse platea dictumst. Proin porta tempus ligula ut
                eleifend. Maecenas tincidunt elementum purus, nec venenatis nisl sodales vel. 
                Mauris at neque nisi, nec tincidunt nulla. Mauris porta, nunc et semper lobortis, 
                sem erat tempus massa, at porttitor dolor mi non sem.</p>
            <p>Phasellus lectus elit, sagittis quis aliquet vulputate, consectetur ac velit. Mauris 
                molestie, quam et ultrices fringilla, lectus magna auctor nisl, a congue tortor nisi
                eu magna. Phasellus eleifend tristique sapien sed eleifend. Nunc nunc sem, interdum 
                ac mattis in, mollis ut felis. Aenean varius, ligula id consequat condimentum, diam mauris
                ullamcorper arcu, ut porttitor libero neque sit amet velit. Ut gravida ultricies est, non
                mollis massa pharetra imperdiet. Duis commodo libero eget massa tempor eget lacinia mi
                elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at leo
                et massa euismod bibendum. Mauris consectetur dictum orci pretium hendrerit. Integer
                ipsum ligula, fringilla nec iaculis nec, ultrices eu diam. Nunc tellus nulla, fringilla 
                eu tempor ac, commodo at augue. Vestibulum vel congue tellus.</p>
            </article>
            
            <div class="clear"></div>

        <footer>
            <hr>
            <div id="copy">
                All contents Copyright 2011 ShopWeb Inc. all rights reserved<br>
                Contact mail : master@shoptech.com Tel: +82 64 123 4315 Fax +82 64 123 4321
            </div>
            <div id="social">
                <img src="../images/facebook.gif"  width="33px" height="33px" alt="facebook">
                <img src="../images/twitter.gif"  width="33px" height="33px" alt="facebook">
            </div>
        </footer>
    </div>
</body>
</html>

welcome.html

#sub_img{
    width: 971px;
    height: 179px;
    background-image: url(../images/company/sub_back.png);
    background-repeat: no-repeat;
    background-position: left top;
}
#sub_menu{
    width: 238px;
    float: left;
    margin: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    /* border: 1px solid black; */
}
#sub_menu  ul{
    margin: 20px 0 0 10px;
    list-style: none;

}
#sub_menu a{
    text-decoration: none;
    color: #666;
    display: block;
    height: 15px;
    width: 150px;
    padding: 7px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #999;
    background-image: url(../images/bullet.gif);
    background-repeat: no-repeat;
    background-position: right center;
}
#sub_menu a:hover{
    background-image: url(../images/bullet_orange.gif);
    background-repeat: no-repeat;
    background-position: right center;
    color:  #f90;
}
article{
    /* border: 1px solid #ccc; */
    float: right;
    width: 660px;
    margin-top: 20px;
    margin-right: 25px;
}
article h1{
    font-family: 'Times New Roman', Times, serif;
    font-size: 45px;
    color: #ccc;
    margin: 20px 0;
    font-weight: normal;
}
article p{
    padding-left: 10px;

}
figure.ceo{
    float: right;
    margin: 5px;
}
figcaption{
    text-align: center;
    color: #39f;

}

subpage.css