전체적으로 창을 줄이면 거기에 대한 반응을 안합니다

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

D유형(D3 최종본 제작) - 우측 메가 배경 메뉴, 크로스페이드 슬라이드, 뉴스 갤러리 탭 메뉴 #01

작성

206

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <div class="container">
        <div class="main-content">
            <div class="left">
                <header>
                    <div class="header-logo">
                        <a href="#none"><img src="images/D image/header-logo.png" alt="header-logo"></a>
                    </div>
                    <div class="navi">
                        <ul class="menu">
                            <li>
                                <a href="#none">menu-01</a>
                                <div class="sub-menu">
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">menu-01</a>
                                <div class="sub-menu">
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">menu-01</a>
                                <div class="sub-menu">
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">menu-01</a>
                                <div class="sub-menu">
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                    <a href="#none">sub-menu1</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="spot-menu">
                        <a href="#none">로그인</a>
                        <span>|</span>
                        <a href="#none">회원가입</a>
                    </div>
                </header>
            </div>
            <div class="right">
                <div class="slide">
                    <div class="slide-image">
                        <div class="slide-image-inner slide-items">
                            <a href="#none" class="slide-item"><img src="images/D image/slide-d-01.jpg" alt=""></a>
                            <a href="#none" class="slide-item"><img src="images/D image/slide-d-02.jpg" alt=""></a>
                            <a href="#none" class="slide-item"><img src="images/D image/slide-d-03.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="slide-banner">
                        <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a>
                        <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a>
                        <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a>
                    </div>
                </div>

                <div class="items">
                    <div class="shortcut">
                        <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a>
                        <div class="shortcut-content">
                            <h3>fkldmsklmclkmdclmd</h3>
                            <p>
                                fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbdsdkjskldjiojeoidjklcndslkchndsicjhdosicjewmfewfewfwedk <br>
                                <b>202039202</b>
                            </p>
                        </div>
                        <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a>
                    </div>
                    <div class="news-gallery">
                        <div class="tab-inner">
                            <div class="btn">
                                <a class="active" href="#none">공지사항</a>
                                <a href="#none">갤러리</a>
                            </div>
                            <div class="tabs">
                                <div class="tab1">
                                    <a class="open-modal" href="#none">안녕하세요 <b>2020</b></a>
                                    <a href="#none">안녕하세요 <b>2020</b></a>
                                    <a href="#none">안녕하세요 <b>2020</b></a>
                                    <a href="#none">안녕하세요 <b>2020</b></a>
                                </div>
                                <div class="tab2">
                                    <a href="#none"><img src="images/D image/gallery-01.png" alt=""><span>안녕</span></a>
                                    <a href="#none"><img src="images/D image/gallery-02.png" alt=""><span>안녕</span></a>
                                    <a href="#none"><img src="images/D image/gallery-03.png" alt=""><span>안녕</span></a>
                                    <a href="#none"><img src="images/D image/gallery-04.png" alt=""><span>안녕</span></a>
                                    <a href="#none"><img src="images/D image/gallery-05.png" alt=""><span>안녕</span></a>
                                    <a href="#none"><img src="images/D image/gallery-06.png" alt=""><span>안녕</span></a>
                                    <a href="#none"><img src="images/D image/gallery-07.png" alt=""><span>안녕</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer-logo">
                <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a>
            </div>
            <div class="footer-content">
                <div class="footer-link">
                    <a href="#none">djfjdsfjfs</a>
                    <span>|</span>
                    <a href="#none">djfjdsfjfs</a>
                    <span>|</span>
                    <a href="#none">djfjdsfjfs</a>
                    <span>|</span>
                    <a href="#none">djfjdsfjfs</a>
                    <span>|</span>
                    <a href="#none">djfjdsfjfs</a>
                    <span>|</span>
                    <a href="#none">djfjdsfjfs</a>
                </div>
                <div class="copyright">
                    dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds
                </div>
            </div>
        </footer>
    </div>
    <div class="modal">
        <div class="modal-content">
            <h2>안녕ㅎ라새요 여러분</h2>
            <p>
                dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds
            </p>
            <a href="#none" class="close-modal">X 닫기</a>
        </div>
    </div>

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

</body>
</html>

슬라이드에 object-fit도 안먹고 숏컷, 탭 부분도 창에 따라 줄어들어야 하는데 짤리는데 뭐가 문제일까요?

HTML/CSS jquery 웹-디자인

답변 4

현빈

질문자

right를 flex: 1;에서 calc로 바꿨더니 슬라이드랑 탭 메뉴는 해결이 됐는데 숏컷이 문제네요

코딩웍스(Coding Works)

지식공유자

시험 일주일 남았다고 긴장하지 마시고 지금 연습하고 만드는 것 처럼만 하시면 시험 잘 보실 수 있어요. 걱정하지 마세요~

현빈

질문자

// navi
$('.menu li').mouseenter(function(){
    $('.sub-menu').stop().fadeIn()
})
$('.menu li').mouseleave(function(){
    $('.sub-menu').stop().fadeOut()
})

// tab
$('.btn a:first-child').click(function(){
    $('.tab1').show()
    $('.tab2').hide()
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})
$('.btn a:last-child').click(function(){
    $('.tab2').show()
    $('.tab1').hide()
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})

// modal
$('.open-modal').click(function(){
    $('.modal').fadeIn()
})
$('.close-modal').click(function(){
    $('.modal').fadeOut()
})

// slide
$('.slide-item:gt(0)').hide();
setInterval(function(){
    $('.slide-item:first-child').fadeOut(500).next().fadeIn(500)
    $('.slide-item:first-child').appendTo('.slide-items')
}, 3500)

현빈

질문자

@charset "utf-8";

body {
    margin: 0;
    background-color: #fff;
    color: #000;
    font-size: 15px;
}

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

.main-content {
    display: flex;
}
.main-content > div {
}
.left {
    width: 200px;
}
.right {
    flex: 1;
}

/* header */
header {
    position: relative;
    z-index: 1000;
}
header > div {
}
.header-logo {
    height: 100px;
    padding-top: 10px;
    box-sizing: border-box;
}
.navi {
    height: 400px;
}
.spot-menu {
    height: 50px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
.spot-menu a:hover {
    text-decoration: underline;
}

/* slide */
.slide {
    position: relative;
    height: 400px;
}
.slide > div {
    border: 1px solid #000;
}
.slide-image {
    height: 400px;
}
.slide-banner {
    width: 150px;
    height: 300px;
    position: absolute;
    top: 0;
    right: 10px;
}
.slide-banner a {} 
.slide-banner a img {
    width: 150px;
    display: block;
} 
/* slide anima */
.slide-image-inner {
    height: inherit;
}
.slide-image-inner > a {
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: 100%;
}
.slide-image-inner a img {
    width: inherit;
    height: inherit;
    object-fit: cover;
}

/* shortcut */
.shortcut {
    height: 200px;
    display: flex;
    align-items: center;
    margin: 0 30px;
    gap: 50px;
}

/* news - gallery */
.news-gallery {
    border: 1px solid #000;
    height: 250px;
}

/* footer */
footer {
    display: flex;
}
footer > div {
    height: 120px;
    box-sizing: border-box;
}
.footer-logo {
    width: 200px;
    padding-top: 15px;
    box-sizing: border-box;
}
.footer-content {
    flex: 1;
}
.footer-content div {
    height: 60px;
}
.footer-link {
    padding-top: 20px;
    box-sizing: border-box;
}
.footer-link a,
.footer-link span {
    color: royalblue;
}
.footer-link a:hover {
    text-decoration: underline;
}
.copyright {
    padding: 10px 0px;
    box-sizing: border-box;
}

/* navi */
.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 95%;
    margin: auto;

}
.menu li {
    position: relative;
}
.menu li > a {
    border: 1px solid #000;
    display: block;
    padding: 5px;
    text-align: center;
}
.menu li:hover > a {
    background-color: #ccc;
}
.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: calc(100vw - 205px);

    background-color: rgba(0,0,0,0.2);
}
.sub-menu a {
    display: inline-block;
    width: 120px;
    text-align: center;
    color: #fff;
    padding: 6px;
    transition: 0.5s;
}
.sub-menu a:hover {
    background-color: #000;
}

/* tab */
.tab-inner {}
.btn {}
.btn a {
    border: 1px solid #000;
    display: inline-block;
    width: 100px;
    padding: 5px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    margin-right: -6px;
    background-color: #ccc;
    margin-bottom: -1px;
    border-bottom: none;
}
.btn a.active {
    background-color: #fff;
}
.tabs {}
.tabs > div {}
.tab1,
.tab2 {
    border: 1px solid #000;
    height: 160px;
    padding: 10px;
    box-sizing: border-box;
}
.tab1 a {
    display: block;
    padding: 7px;
    border-bottom: 1px solid #000;
}
.tab1 a b {
    float: right;
    font-weight: normal;
}
.tab1 a:last-child {
    border-bottom: none;
}
.tab2 {
    display: none;
    text-align: center;
    padding: 10px;
}
.tab2 a {
    display: inline-block;
    margin: 0 20px;
}
.tab2 a img {
    width: 170px;
    border-radius: 5px;
}
.tab2 a span {
    display: block;
}

/* modal */
.modal {
    background-color: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: none;
}
.modal-content {
    width: 400px;
    background-color: #fff;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.close-modal {
    border: 1px solid #000;
    padding: 5px;
    float: right;
}

코딩웍스(Coding Works)

지식공유자

시험이 일주일도 안남았다고 하셨는데 올리신 코드를 보면 임시 데이터인데 왜 그러죠?

이제 최종본 제작한다고 생각하시고 텍스트와 이미지 등 실제 데이터를 넣어서 모의고사 형식으로 실전 작업을 하셔야 합니다.

지금 질문은 넘어가고 실제 데이터 넣어서 만드세요. 그리고 안되면 지금처럼 전체 코드 올리세요.

그리고 아래처럼 이미지 경로도 하시면 안됩니다.

images/gallery-01.png 이렇게 하세요

인프런 커뮤니티 질문&답변

전체적으로 창을 줄이면 거기에 대한 반응을 안합니다