B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운... - 인프런

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.

해결된 질문

작성

@charset "UTF-8";

body{
    margin:0 ;
    background-color: #fff;
    color: #222328;
}

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



.header-inner{
    width: 1200px;
    margin: auto;
    line-height: 120px;
}

header{
    height: 100px;
    width: 1200px;
    margin: auto;
    z-index: 20;
    position: relative;
}

header>div{
   height:100px;}

.header-logo{
    width: 200px;
    height: 100px;
    float: left;
}

.navi{
    width: 800px;
    height: 100px;
    float: right;
}


.contents-inner{
    width: 1200px;
    margin: auto;
}

.slide{
    width: 1200px;
    height: 300px;
    position: relative;
    overflow: hidden;
   
}

.slide-items{
    width: 3600px;
    height: 300px;
    font-size: 0;
    position: absolute;
}

.items{
    width: 1200px;
    margin: auto;
    display: flex;
}

.items>div{
    height: 200px;
    width: 400px;
}

.footer-inner{
    border: #222328 1px solid;
    width: 1200px;
    margin: auto;
}

footer{
    height: 100px;
    width: 1200px;
    display: flex;
    overflow: hidden;
}

.footer-items{
    width: 1000px;
}

.footer-items div{
    height: 50px;
    border: #222328 1px solid;
}

.fmily-site{
    border: #222328 1px solid;
    width: 200px;
}

/* 갤러리,공지사항 */

.tab-inner{
    padding-top: 10px;
}

.tab1{
    border: #222328 1px solid;
    width: 93%;
    padding: 10px;
    margin: auto;
}

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

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

b{
    float: right;
    font-weight: normal;
}

.tab-inner>span{
    display: inline-block;
    border: #222328 1px solid;
    border-radius: 5px 5px 0 0;
    border-bottom: #fff 1px solid;
    margin-bottom: -1px;
    margin-left: 10px;
    width: 100px; 
    text-align: center;
}

.tab2{
    border: #222328 1px solid;
    width: 93%;
    padding: 10px;
    margin: auto;
    padding-top: 22px;
    text-align: center;
    height: 112px
}

.tab2 a img{
    width: 100px;
}
.banner a img{
    padding: 5px;
    width: 95%;
}

/* 메뉴 */

.menu{padding: 0;}

.menu li{
    float: left;
    width: 25%;
    list-style: none;
    text-align: center;
    display: block;
}

.menu li>a{
    display: block;
}

.sub-menu{
    background-color: #222328;
    border: 1px solid #222328
}

.sub-menu a{
    display: block;
    text-align: center;
    color: #fff;
    z-index: 8;
    display: none;
}

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

.sub-menu a:hover{
    color: #222328;
    background-color: #fff;
}

.sub-back{
    width: 1200px;
    height: 200px;
    background-color: #222328;
    position: absolute;
    left: 0;
    top:100%;
    z-index: -3;
    display: none;
}

.footer-items:nth-child(1){
    text-align: center;
}

setInterval(function(){
$('.slide-items').animate({left:'-1200px'},function(){
    $('.slide-items').css({left:0})
    $('.slide-items a:first-child').appendTo('.slide-items')
})    
}, 3500);

$('.menu li').mouseenter(function(){
    $('.sub-menu,.sub-back').slideDown()
})
$('.menu li').mouseleave(function(){
    $('.sub-menu,.sub-back').slideUp()
})

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

        <div class="header-inner">
            <header>
                <div class="header-logo">
                    <a href="#none"><img src="images/header-logo.jpg" alt=""></a>
                </div>
                <div class="navi">
                    <ul class="menu">
                            <li>
                                <a href="#none">대학소개</a>
                                <div class="sub-menu">
                                    <a href="#none">총장인사말</a>
                                    <a href="#none">학교소개</a>
                                    <a href="#none">홍보관</a>
                                    <a href="#none">캠퍼스안내</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">입학안내</a>
                                <div class="sub-menu">
                                    <a href="#none">수시모집</a>
                                    <a href="#none">정시모집</a>
                                    <a href="#none">편입학</a>
                                    <a href="#none">재외국민</a>
                                </div>
                            </li>
                            <li>
                                <a href="#none">정보서비스</a>
                                <div class="sub-menu">
                                    <a href="#none">대학정보알림</a>
                                    <a href="#none">정보공개</a>
                                    <a href="#none">정보서비스안내</a>

                                </div>
                            </li>
                            <li>
                                <a href="#none">커뮤니티</a>
                                <div class="sub-menu">
                                    <a href="#none">공지사항</a>
                                    <a href="#none">참여게시판</a>
                                    <a href="#none">자료실</a>

                                </div>
                            </li>
                            <div class="sub-back"></div>
                    </ul>
                </div>
            </header>
        </div>

        <div class="contents-inner">
            <div class="slide">
                <div class="slide-items">
                    <a href="#none"><img src="images/slide01.jpg" alt="슬라이드1"></a>
                    <a href="#none"><img src="images/slide02.jpg" alt="슬라이드2"></a>
                    <a href="#none"><img src="images/slide03.jpg" alt="슬라이드3"></a>
                </div>
            </div>
                <div class="items">
                <div class="news">
                    <div class="tab-inner">
                        <span>공지사항</span>
                        <div class="tab1">
                            <a href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-12</b></a>
                            <a href="#none">개교 100주년 기념 야외 오페라 초청 <b>2016-09-10</b></a>
                            <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a>
                            <a href="#none">진행위원회(정회원) 선발 결과<b>2016-09-07</b></a>
                            <a href="#none">산업대학교 동문회 개최일 변경<b>2016-08-30</b></a>
                        </div>
                    </div>
                </div>
                <div class="gallery">
                    <div class="tab-inner">
                        <span>갤러리</span>
                        <div class="tab2">
                            <a href="#none"><img src="images/img1.jpg" alt="이미지"></a>
                            <a href="#none"><img src="images/img2.jpg" alt="이미지"></a>
                            <a href="#none"><img src="images/img3.jpg" alt="이미지"></a>                            
                        </div>
                    </div>
                </div>
                <div class="banner">
                    <a href="#none"><img src="images/banner.jpg" alt=""></a>
                </div>
            </div>
        </div>

        <div class="footer-inner">
            <footer>
                <div class="footer-items">
                    <div><a href="#none">법적고지 개인정보취급방침 개인정보처리방침

<br>상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49</a></div>
                    <div><select>
                        <option value="">패밀리사이트</option>
                        <option value="">산업대학교</option>
                        <option value="">정보통신부</option>
                        <option value="">과학기술연구원
                        </option>
                    </select></div>
                </div>
                <div class="family-site">
                    <select>
                        <option value="https://www.naver.com">네이버
                        </option>
                    </select>
                </div>
            </footer>
        </div>
    </div>
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>

HTML/CSS jquery 웹-디자인

답변 2

코딩웍스(Coding Works)

지식공유자

.header-inner{

width: 1200px;

margin: auto;

line-height: 120px;

}

위에 line-height: 120px 가 네비게이션에 상속되어 간격이 넓어진 것입니다.

.header-inner의 높이를 line-height로 잡지 마시고 그냥 height로 잡으시면 됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

안단감님께서 웹사이트 레이아웃을 작성하시면서 네비게이션의 스타일 문제와 슬라이드 애니메이션에 대해 어려움을 겪고 계신 것 같습니다. 각각의 문제에 대한 해결책을 아래에 제시해 드리겠습니다.

문제 설명

네비게이션의 a태그 두께: 네비게이션 메뉴의 스타일이 의도한 바와 다르게 표시되어 깔끔하게 나타나지 않는 문제가 있을 수 있습니다.
슬라이드 문제: 슬라이드가 의도한 대로 작동하지 않는 현상일 수 있습니다.

문제 원인 및 해결책

1. 네비게이션의 a태그 두께 문제

네비게이션 스타일이 잘못된 경우는 일반적으로 padding이나 border 설정 때문입니다. 아래와 같이 스타일을 조금 조정해 보세요:

   .menu li>a {
       display: block;
       padding: 10px 5px;  /* a태그의 padding을 적절히 조정 */
       transition: 0.3s ease-in-out;  /* 매끄러운 전환 추가 */
   }

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

2. 슬라이드 문제

슬라이드가 예상한 대로 나타나지 않는 경우는 position이나 width 설정 문제일 수 있습니다. 슬라이드의 이슈는 주로 overflow 관련 문제일 수 있으니 .slide-items의 CSS를 조정해 보세요:

   .slide-items {
       width: 3600px; /* 1200px x 3개 슬라이드 이미지의 합 */
       height: 100%; 
       position: absolute;
       top: 0;
       left: 0;
   }

JavaScript 수정

슬라이드 애니메이션의 현재 구현은 문제가 없을 수 있지만, 만약 작동하지 않는다면 jQuery 코드가 body 태그 안쪽에 있어야 합니다. 몇 가지 애니메이션 시간이나 간격을 조정하시는 것도 추천드립니다.

setInterval(function() {
    $('.slide-items').animate({left: '-1200px'}, function() {
        $(this).css({left: 0});
        $('.slide-items a:first-child').appendTo('.slide-items');
    });
}, 3500);

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