본문 바로가기
2023/HTML

[HTML] 유진건설 홈페이지 기본적인 틀 만들기

by Or0i쿠 2023. 4. 11.
이미지 강제로 비율 맞추는 법
#contents .link>ul>li>img{
    width: 380px; height: 120px;
더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./CSS/style.css">
    <link rel="stylesheet" href="./CSS/all.css">
    <link rel="stylesheet" href="./CSS/all.min.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <div class="logo"><a href="#"><img src="./images/logo.png" alt=""></a></div>
            <nav class="nav">
                <ul>
                    <li><a href="#">회사소개</a>
                    <ul class="sub">
                        <li><a href="#">인사말</a></li>
                        <li><a href="#">조작구성도</a></li>
                        <li><a href="#">오시는 길</a></li>

                    </ul></li>
                    <li><a href="#">사업영역</a>
                        <ul class="sub">
                            <li><a href="#">전원주택</a></li>
                            <li><a href="#">도시재생</a></li>
                            <li><a href="#">인테리어</a></li>
    
                        </ul>
                    </li>
                    <li><a href="#">입주정보</a>
                        <ul class="sub">
                            <li><a href="#">입주단지</a></li>
                            <li><a href="#">입주캘린더</a></li>
                            
    
                        </ul>
                    </li>
                    <li><a href="#">고객센터</a>
                        <ul class="sub">
                            <li><a href="#">공지사항</a></li>
                            <li><a href="#">건축상담</a></li>
                            <li><a href="#">홍보자료실</a></li>
    
                        </ul></li>
                </ul>
            </nav>
            <div class="bgnav"></div>
        </header>

        <section id="banner" class="clearfix">
            <ul>
                <li><img src="./images/slide01.png" alt=""></li>
                <li><img src="./images/slide02.png" alt=""></li>
                <li><img src="./images/slide03.png" alt=""></li>
            </ul>
        </section>
        <section id="contents" class="clearfix">
            <div class="notice">
                <h3>공지사항</h3>
                <ul>
                    <li><a href="#">유진건설은 오는 5월 1일붙터 웹페이지 공사가 들어갑니다. 이용에 불편함을 드려서 죄송합니다.</a></li>
                    <li><a href="#">유진건설은 오는 5월 1일붙터 웹페이지 공사가 들어갑니다. 이용에 불편함을 드려서 죄송합니다.</a></li>
                    <li><a href="#">유진건설은 오는 5월 1일붙터 웹페이지 공사가 들어갑니다. 이용에 불편함을 드려서 죄송합니다.</a></li>
                    <li><a href="#">유진건설은 오는 5월 1일붙터 웹페이지 공사가 들어갑니다. 이용에 불편함을 드려서 죄송합니다.</a></li>
                </ul>
            </div>
            <div class="gallery">
                <h3>갤러리</h3>
                <ul class="clearfix">
                    <li><img src="./images/gal_img01.png" alt="갤러리 사진 1"></li>
                    <li><img src="./images/gal_img02.png" alt="갤러리 사진 2"></li>
                    <li><img src="./images/gal_img03.png" alt="갤러리 사진 3"></li>
                </ul>
            </div>
            <div class="link">
                <h3>바로가기</h3>
                <ul>
                    <li><a href="#"><img src="./images/banner.jpg" alt="마스크 착용 지침 안내"></a></li>
                </ul>
            </div>
        </section>
        <footer id="footer"class="clearfix">
            <div class="f_logo">
                <a href="index.html"><img src="./images/logo.png" alt=""></a>
            </div>
            <div class="f_menu">
                    <a href="#">회사소개</a>
                <a href="#">이용약관</a>
                <a href="#">무단복제</a>
                <a href="#">정보처리</a>
                <a href="#">회사소개</a>
            </div>
            <div class="f_link">
                <a href="#"><i class="fa-brands fa-facebook"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
            </div>
        </footer>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        $(".nav>ul>li").mouseover(function(){
            $(this).find(".sub").stop().slideDown(200)
            $(".bgnav").stop().slideDown(200)
            
        })
        $(".nav>ul>li").mouseout(function(){
            $(this).find(".sub").stop().slideUp(200)
            $(".bgnav").stop().slideUp(200)
            
        })

    </script>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color: black;}
h1,h2,h3,h4,h5,h6{}
img{display: block;}
body{background-color: bisque;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
#wrap{width: 1200px;margin: 0 auto;}

/* header */
#header{
    width: 100%; height: 100px; background-color: white;
}
/* .logo */
#header .logo{width: 150px; float: left; }
#header .logo>a>img{padding-top: 15px; padding-left: 15px;}
/* nav */
#header .nav{float: right; padding-top: 60px;}
#header .nav>ul{}
#header .nav>ul>li{width: 150px; height: 40px; float: left; background-color: #ff5050; position: relative;}
#header>.nav>ul>li:hover{background-color: #5B9DB5;} 
#header .nav>ul>li>a{display: block; text-align: center; line-height: 40px;
    color: white; 
}
/* .sub */
#header>.nav>ul>li>.sub{position: absolute; float: left; z-index: 10; 
    display: none;
}
#header>.nav>ul>li>.sub>li{width: 150px; height: 40px; 
    background-color: #fd9393;text-align: center; line-height: 40px;
}
#header>.nav>ul>li>.sub>li:hover{background-color: #FFC61A;} 

#header >.bgnav{width: 100%; height: 120px; background-color: #fd9393;
    float: left; z-index: 9;
    display: none;
}

/* banner */
#banner{width: 100%; height: 300px; overflow: hidden; z-index: 9;}

/* contentS */
#contents{width: 100%; }
#contents >div{width: 400px; height: 200px; float: left; padding: 10px;
background-color: white;}
#contents >div>h3{width: 120px; height: 40px; background-color: #ff5050; text-align: center; line-height: 40px; color: white;}
#contents >div>ul{border-top: 3px solid #ff5050; padding-top: 10px;}

/* .notice */

#contents .notice>ul{}
#contents .notice>ul>li{position: relative; padding-bottom: 5px; }
#contents .notice>ul>li::before{position: absolute;
content: ""; width: 3px; height: 3px; background-color: white;
left: 10px; top: 10px;
}
#contents .notice>ul>li>a{display: block; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; padding-left: 20px;}


/* .gallery */

#contents .gallery>ul{padding-top: 25px;}
#contents .gallery>ul>li{padding-right: 40px; float: left;}
#contents .gallery>ul>li:last-child{padding-right: 0;}
#contents .gallery>ul>li>img{}

/* link */

#contents .link>ul{}
#contents .link>ul>li{}
#contents .link>ul>li>a>img{
    width: 380px; height: 125px;
}

/* footer */
#footer{width: 100%;background-color: whitesmoke;}
#footer> div{float: left;}
#footer .f_logo{width: 200px; height: 100px;}

#footer .f_logo >a>img{filter: grayscale(100%); padding-top: 17px;}

#footer .f_menu{width: 800px; height: 100px; }
#footer .f_menu{text-align: center; line-height: 100px;}
#footer .f_menu >a{margin-right: 50px; position: relative; color: black; 
 display: inline;  }
#footer .f_menu>a::before{position: absolute; content: "";
     width: 1px; height: 15px; left: -25px;top: 5px; background-color: black;
}
#footer .f_menu>a:first-child::before{width: 0;}

#footer .f_link{width: 200px; height: 100px;
text-align: center; line-height: 110px; }
#footer .f_link>a{}
#footer .f_link>a>i{font-size: 30px; color: #ff5050; padding-left: 10px;}
저작자표시 비영리 동일조건 (새창열림)

'2023 > HTML' 카테고리의 다른 글

[html] 축제 홈페이지 만들기  (0) 2023.04.12
[html] 웹페이지 구상  (0) 2023.04.11
[HTML] 스크립트&폰트 설정  (0) 2023.04.11
[html] Tool  (0) 2023.04.10
[HTML] 스크립트 사용법 & 가상요소 활용  (0) 2023.04.07

관련글

티스토리툴바