Inflearn コミュニティ Q&A

投稿した質問数

【2026年出題基準】ウェブデザイン技能検定実技試験完全ガイド

D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다

作成

@charset "UTF-8";

body{
    margin: 0;
    background-color: #ffffff;
    color: #333333;
}

a{
    text-decoration: none;
    color: #333333;
}

.container{
    width: 100%;
}

.main{
    margin: auto;
    display: flex;
    border: 1px #333333 solid;
    box-sizing: border-box;
}

footer{
    margin: auto;
}

.left{
    width: 200px;
    border: 1px #333333 solid;
    box-sizing: border-box;
}

.right{
    width: calc(100% - 200px);
    border: 1px #333333 solid;
    box-sizing: border-box;
}

.header-logo{
    height: 100px;
    border: 1px #333333 solid;
}

.navi{
    border: 1px #333333 solid;
    box-sizing: border-box;
    height: 100px;
}

.sub-menu{
    border: 1px #333333 solid;
    height: 100px;
}

.header-logo a img{
    object-fit: cover;
}

.slide{
    height: 400px;
    border: 1px #333333 solid;
    position: relative;
}

.slide-itmes{
    height: 400px;
    border: 1px #333333 solid;
    position: relative;
    overflow: hidden;

}

.silde-items-img{
    height: 400px;
    width: 300%;
    font-size: 0;
    position: absolute;
}

.silde-items-img a{
    border: 1px #333333 solid;
    height: inherit;
    width: calc(100% / 3);
    display: inline-block;
    box-sizing: border-box;
}

.silde-items-img a img{
    object-fit: cover;
    height: inherit;
    width: 100%;
}

.slide-banner{
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
}


.item1{
    height: 200px;
    border: 1px #333333 solid;
    box-sizing: border-box;
}
.item2{
    height: 250px;
    border: 1px #333333 solid;
    box-sizing: border-box;
}

.news{
    height: inherit;
}


footer{
    border: 1px #333333 solid;
    display: flex;
    justify-self: start;
    box-sizing: border-box;
    width: 100%;
}





footer>div{height: 100px;}

.footer-logo{
    background-color: #161111;
    width: 200px;
}

.copyright{
    background-color: aqua;
    width: calc(100% - 400px);
}

.sns{
    background-color: rgb(158, 69, 69);
    width: 200px;
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">

        <div class="main">
            <div class="left">
                <header>
                    <div class="header-logo">
                        <a href="#none"><img src="images/logo-b4-header.png" alt=""></a>
                    </div>
                    <div class="navi"></div>
                    <div class="sub-menu"></div>
                </header>
            </div>
            <div class="right">
                <div class="slide">
                    <div class="slide-items">
                        <div class="slide-items-img">
                            <a href="#none"><img src="images/slide-d-01.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="slide-banner">
                        <a href="#none"><img src="images/banne-a1-02.jpg" alt=""></a>
                    </div>
                </div>
                <div class="item1">
                    <div class="shortcut"></div>
                </div>
                <div class="item2">
                    <div class="news"></div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer-logo"></div>
            <div class="copyright"></div>
            <div class="sns"></div>
        </footer>

    </div>
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>

ovject-fit:cover;했는데 이미지가 유동적으로 변하지 않아서 글을 올립니다 창 넓이를 늘리면 슬라이드창에 맞춰 이미지 크기가 변해 붙지 않고 공백이 생겨납니다

HTML/CSSjquery웹-디자인

回答 3