Cộng đồng Hỏi & Đáp của Inflearn

pjw03024

câu hỏi đã được viết

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web

A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..

Đã giải quyết

Viết

100

Đã chỉnh sửa

이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Just 쇼핑몰</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="container">

        <header>

            <div class="header-logo">
                <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a>
            </div>

            <div class="navi">

                <ul class="menu">
                    <li>탑
                        <div class="sub-menu">
                            <a href="#none">블라우스</a>
                            <a href="#none">티</a>
                            <a href="#none">셔츠</a>
                            <a href="#none">니트</a>
                        </div>
                    </li>
                    <li>아우터
                        <div class="sub-menu">
                            <a href="#none">자켓</a>
                            <a href="#none">코트</a>
                            <a href="#none">가디건</a>
                            <a href="#none">머플러</a>
                        </div>
                    </li>
                    <li>팬츠
                        <div class="sub-menu">
                            <a href="#none">청바지</a>
                            <a href="#none">짧은바지</a>
                            <a href="#none">긴바지</a>
                            <a href="#none">레깅스</a>
                        </div>
                    </li>
                    <li>악세서리
                        <div class="sub-menu">
                            <a href="#none">귀고리</a>
                            <a href="#none">목걸이</a>
                            <a href="#none">반지</a>
                            <a href="#none">팔찌</a>
                        </div>
                    </li>
                </ul>
            </div>

        </header>
        
        <div class="slide">

            <div class="slide-items">

                <a href="#none" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a>
                <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a>
                <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a>

            </div>

        </div>  
        
        <div class="items">

            <div class="news">
            
            <div class="tab-inner"></div>
              
              <div class="btn">
                <a href="#none" class="btn1">공지사항</a>
                <a href="#none" class="btn2">갤러리</a>
              </div>
            

              <div class="tabs">
                <div class="tab1">
                    <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a>
                    <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a>
                    <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a>
                    <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a>
                    <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a>
                </div>
                
                <div class="tab2">
                    <a href="#none"><img src="images/pic.jpg" alt="이미지1"></a>
                    <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a>
                    <a href="#none"><img src="images/pic2.jpg" alt="이미지3"></a>
                </div>
               </div>
            </div>


            </div>
            <div class="banner">
                <a href="#none"><img src="images/banner.jpg" alt="배너"></a>
            </div>
            <div class="shortcut">
                <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a>
            </div>

        </div>
        
        <footer>

            <div class="footer-logo">
                <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a>
            </div>
            <div class="copyright">
                
                <a href="#none">법적고지
개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장
<br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a>

            </div>

            <div class="SNS">
                <a href="#none"><img src="images/sns-01.png" alt=""></a>                
                <a href="#none"><img src="images/sns-02.png" alt=""></a>                
                <a href="#none"><img src="images/sns-03.png" alt=""></a>                
            </div>

        </footer>

    </div>

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

@charset "utf-8";

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

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

.container{
    width: 1200px;
    margin: auto;
}

header{
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.slide{
    height: 300px;   
    width: 1200px;
    border: red solid 1px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.items{
    height: 200px;
    border: red solid 1px;
    box-sizing: border-box;
    overflow: hidden;
}

footer{
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    overflow: hidden;
}

.items > div{
    height: 200px;
    float: left;
}

.footer>div{
    float: left;
    height: 100px;}

.header-logo{
    width: 200px;
    border: red solid 1px;
    box-sizing: border-box;
    float: left;
    margin-top: 25px;
}

.navi{
    width: 500px;
    border: red solid 1px;
    box-sizing: border-box;
    float: right;
    text-align: center;
}

.slide-items{
    border: red solid 1px;
    box-sizing: border-box;
    position: absolute;
    height: 300px;
    font-size: 0;
    left: 0;
    top: 0;
}

 
.news{
    width: 400px;
    border: red solid 1px;
    box-sizing: border-box;
    font-size: smaller;
}

.banner{
    width: 400px;
    border: red solid 1px;
    box-sizing: border-box;
    font-size: 0;
}

.shortcut{
    width: 390px;
    border: red solid 1px;
    box-sizing: border-box;
    font-size: 0;
}



.footer-logo{
    width: 250px;
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    float: left;
    margin: 20px;

}

.copyright{
    width: 700px;
    border: red solid 1px;
    box-sizing: border-box;
    text-align: center;
       height: 100px;
    padding-top: 10px;
    color: darkgray;
    float: left;
}

.sns{
    width: 250px;
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    float: left;
}

.sns a img{margin: 20px;}


/* 네이게이션 */

ul.menu{padding: 0px;
        list-style: none;}

.menu li{
    float: left;
    background: #fff;
    width: 25%;
    font-weight:bolder;
}

.sub-menu{
 display: none;
 background: #fff;
}

.sub-menu a {
    display: block;
    background: #fff;
}

.menu>li>a {display: block;
padding: 5px;}

ul.menu li:hover > a {
    color: #fff;
    background-color: black;
}

ul.menu li .sub-menu a:hover{
    color: #fff;
    background-color: black;
}




/* 탭메뉴 */

.btn{margin-left: 4px;}

.btn a{
    display: inline-block;
    border: #333333 1px solid;
    border-radius: 5px 5px 0 0;
    width: 100px;
    text-align: center;
    margin-right: -6px;
    background-color: #ddd;
    margin-bottom: -3px;
    border-bottom: none;
}


.tab-inner{width: 80%;
margin: auto;
border: 1px solid #000;
box-sizing: border-box;}

.tab1{border: 1px solid #000;
padding: 0 10px;}

.tab1 a{
    display: block;
    padding: 5px;
    border-bottom: #333333 1px solid;
}

.tab1 a:last-child{border-bottom: none;}

.tab1 a b {float: right;
font-weight: normal;}

.tab2{
    border: 1px solid #000;
    display: none;
    height: 165px;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
}

.btn a.active {background-color: #fff;}

$(".menu li").mouseenter(function(){
    $('.sub-menu').stop().slideDown()
})

$(".menu li").mouseleave(function(){
    $('.sub-menu').stop().slideUp()
})

$('.slide-item:gt(0)').hide()

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



$('.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')
    
})

$(this).addClass('active')
$(this).siblings().removeClass('active')

HTML/CSSjquery웹-디자인

Câu trả lời 4

codingworks

Người chia sẻ kiến thức

혹시 custom.js 를 아래처럼 하지 않으셨는지 파일명 확인해보세요.

제이쿼리 구문은 정상적입니다.

위에도 말했지만 일단 레이아웃에서 문제가 생기면 안됩니다.

레이아웃을 확실히 하시고 탬메뉴 또는 슬라이드 제작으로 넘어가세요.

codingworks

Người chia sẻ kiến thức

부모요소 div 구조를 벗어났기 때문에 레이아웃이 망가졌습니다.

일단 탭메뉴, 슬라이더 등 다른 것들 하시기 전에 레이아웃 잡는 연습을 좀 더 확실히 하시는게 좋을 것 같습니다.

codingworks

Người chia sẻ kiến thức

jquery도 텍스트로 복사해서 붙여넣기 해주세요. 그래야 제이쿼리 구문도 체크할 수 있습니다.

pjw03024

Người đặt câu hỏi

제이쿼리 지금 붙여넣기 했습니다. 늦은 시간 번거로우실텐데 빠른 답변해주셔서 감사해요 선생님~

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 박지원님께서 직면하신 문제에 대해 몇 가지 도움말과 해결책을 안내드리겠습니다.

문제 해결 안내

와이어프레임 구조 문제:
- HTML 및 CSS 구조 확인: HTML의 div 및 CSS의 float 관련 특성에서 문제가 발생할 수 있습니다. CSS 스타일에서 float을 사용하면 레이아웃이 깨질 수 있습니다. 이때, float을 사용한 요소 이후에 clearfix를 추가하거나 flexbox나 grid를 사용하여 레이아웃을 다시 구성하는 것을 추천드립니다.
메뉴바가 슬라이드를 밀어내는 문제:
- z-index 속성: 슬라이드 이미지보다 메뉴바가 위에 있도록 z-index 속성을 조정하세요. 예를 들어, 메뉴바에 z-index: 1000; 같은 값을 적용해 보십시오.
- 또한, position: relative;를 설정하여 메뉴바의 위치를 명확히 지정할 수 있습니다.
Hover 효과 미적용 문제:
- CSS 셀렉터 확인: .menu> 및 .sub-menu에서 정확한 셀렉터 사용 여부를 확인하세요. 예를 들어 .menu li:hover > a처럼 부모-자식 관계를 명확히 하여 스타일을 적용하세요.
- 스타일이 충돌하는 부분이 없는지 전체 CSS를 검토해 보세요.
탭 메뉴 작동 문제:
- JavaScript 코드 점검: siblings() 메소드를 사용할 때 철자 오류를 확인하고, 타이핑 실수가 없도록 점검하세요. JavaScript 관련 오타가 없는지 확인해 보세요. 예를 들어, .sibligs() 대신 .siblings()로 변경해야 합니다.
- jQuery의 click 이벤트가 정확히 작동하는지 확인하세요. ready 함수 안에 이벤트 초기화를 배치해 하나씩 디버깅해 보세요.

Cộng đồng Hỏi & Đáp của Inflearn

A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..

문제 해결 안내

관련 질문 URL