본문 바로가기
프론트엔드 개발자/CSS

클론코딩 레이아웃 만들기3

by 신디블로그 2023. 3. 29.
SMALL
새마을 금고

기업뱅킹

  • 인증보안센터
  • 서치
  • 점박이
    • <!DOCTYPE html>
<html lang="ko">
<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">
    <meta name="description" content="페이지설명">
    <title>새마을 금고</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--새마을 금고 시작 -->
    <div class="s-wrapper">
        <header class="s-header">
            <div class="inner-box">
                <h1 class="logo"><a href=""><span></span></a></h1>
                <h2>기업뱅킹</h2>
                <ul class="sub">
                            <li><a href="#">조회</a></li>
                            <li><a href="#">조회</a></li>
                            <li><a href="#">조회</a></li>
                            <li><a href="#">조회</a></li>
                            <li><a href="#">조회</a></li>
                            <li><a href="#">부가서비스</a></li>
                            <li><a href="#">부가서비스</a></li>
                            <li><a href="#">부가서비스</a></li>
                            <li><a href="#">부가서비스</a></li>
                            <li><a href="#">부가서비스</a></li>                              
                </ul>
                <li class="in"><span class="bo">인증보안센터</span></li>
                <li class="se"><span class="hide">서치</span></li>
                <li class="zz">점박이</li>

            </div>

        </header>
        <main class="s-main">
            <div class="innerbox">

            </div>

        </main>
        <footer class="s-footer">
            <div class="inner-box">
                <div class="footer-top"></div>
                <div class="footer-bt"></div>

            </div>

        </footer>






    </div>
    <!--새마을 금고 끝 -->
</body>
</html>
    /*레이아웃*/

.s-header .inner-box {
    width: 1394px;
    height: 80px;
    margin: 0 auto;
    background-color: bisque;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    position: relative;
}


.s-header .inner-box h1 {
    margin-right: auto;
    flex: none;
}

.s-header .inner-box h2 {
    position: absolute;
    top: 40px;
    left: 165px;
    font-size: 10px;
    color: rgb(7, 46, 46);

}

.s-header .inner-box li {
    flex: none;
    
}

.s-header .inner-box .logo a{
    display: block;
    width: 164px;
    height: 70px;
    background-image: url(../img/ui_ci_mg.png);
    background-repeat: no-repeat;
    background-position: center center;
}



.s-header .inner-box .sub {
    display: flex;

}

.s-header .inner-box .sub li {
    flex: none;    
    background-color: #fc0;
}

.s-header .inner-box .sub li a {
    display: block;
    font-size: 16px; 
    position: relative;
    line-height: 72px;
    padding: 0 19px;

}

.s-header .inner-box .sub li:hover a {
    color: blue;
}

.s-header .inner-box .sub li a::before {
    content: '';
    width: 0%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #000;
    transition: width 0.5s ease-in-out;
}

.s-header .inner-box .sub li:hover a::before {
    width: 100%;
}

.s-header .inner-box .in .bo {
    width: 104px;
    height: 30px;
    background-color: #eee;
    padding-left: 26px;
    position: relative; 
}

.s-header .inner-box .in .bo::after {

    width: 16px;
    height: 100%;
    position: absolute;
    content: '';
    background-image: url(../img/ui_btn_certifate2_active.png);
    background-repeat: no-repeat;
    background-position: center center;
    top: 0; left: 0;
}

.s-header .inner-box .se {
    background-image: url(../img/ui_ico_search.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}


.s-main .innerbox {
    width: 1394px;
    height: 988px;
    margin: 0 auto;
    background-color: chocolate;
}

.s-footer .inner-box {
    width: 1394px;
    margin: 0 auto;
}

.s-footer .footer-top{
    height: 74px;
    border-bottom: 1px solid #efefef;
    background-color: aqua;
}

.s-footer .footer-bt{
    height: 108px;
    background-color: rgb(31, 175, 12);
}

    LIST
    저작자표시 비영리 변경금지

    '프론트엔드 개발자 > CSS' 카테고리의 다른 글

    Html Css 애니메이션 사용하기 움직이는 동작법 완벽정리!!!  (0) 2023.03.31
    css reset폴더 만들기  (0) 2023.03.29
    html css 레이아웃 구성하기 1  (0) 2023.03.28
    html css 캐러셀 css 구현하기 (js X) +code , 체크박스 만들기  (0) 2023.03.24
    html css Tab Contents와 Slides Contents css 구성하기 (js X) +code 클론코딩  (0) 2023.03.24

    관련글

    댓글

    티스토리툴바