카테고리

질문 & 답변
세부 분야

자격증 (디자인)
해결 여부

미해결

z-index 가 먹히지 않습니다

22.08.15 23:14 작성 조회수 190

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

똑같이 했는데 뭐가 문제일까요.... z-index : 10px; 을 했는데 네비게이션이 올라오질 않네요...ㅠㅠ

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

[최종본 제작] 가로 고정형(A1타입) – Part1

강의실 바로가기

답변 3

좋아요순

최신순

답변을 작성해보세요.

코딩웍스(Coding Works)

지식공유자

2022.08.16

또 한가지 body와 a의 색상값에 # 이 빠져있습니다. # 빼시면 안됩니다.

body {

margin: 0;

font-size: 15px;

background-color: #fff;

color: 222328;

}

a {

color: 222328;

text-decoration: none;

}

kmj77877

질문자

2022.08.17

와 역시,,, 너무 감사합니다! 이번에 시험 봅니다! 꼭 붙을게요 정말 감사해요!

코딩웍스(Coding Works)

지식공유자

2022.08.16

지금 3회차 시험기간이네요.

혹시 이번 기간에 시험 보시는거면 당일에 이런 실수 해서 못찾는거 보다는 지금 아시는게 훨씬 좋습니다.

일단 2가지인데..

@charset 'utf-8';
@charset "utf-8";

이것 때문에 .sub-menu가 슬라이드 아래로 숨은건 아니에요.

@charset 'utf-8'; 이라고 외따옴표를 사용해도 기능상으로는 전혀 문제가 없지만 VC에서 빨갱이로 표시해서 기분이 좀 나쁩니다.. 그래서 @charset "utf-8"; 이렇게 쌍따옴표로 해주세요.

그리고 메뉴가 가려진 부분은 z-index는 px 단위가 없습니다. 그냥 1,10,100 이렇게 순서라서 다음에 단위가 오면 절대 안됩니다. 이것 때문에 z-index가 안먹힌 거에요.

header {
    height: 100px;
    position: relative;
    z-index: 10px;
}

코딩웍스(Coding Works)

지식공유자

2022.08.15

다른 부분 때문에 그런거 같습니다.

전체 코드를 복사해서 올려주세요.

코드 캡쳐로 올리면 제가 테스트해보기 어렵습니다.

kmj77877

질문자

2022.08.16

그리고 @charset 'utf-8' 에서 왜 빨간색이 뜨는지 궁금하고 이를 고칠 수 있는 방법이 궁금합니다.

다른 건 다 정상적으로 됩니다.

코딩웍스(Coding Works)

지식공유자

2022.08.16

복사해서 올려달라고 말씀드렸는데 못보셨나봐요.

브라우저 화면은 캡쳐 해서 올려주시면 되는데 코드를 캡쳐해서 올려주시면 제가 바로 테스트를 못해보니까 답변드리는게 꽤 오래 걸려요.

코드를 복사해서 붙여넣기 해주시면 제가 바로 테스트 해볼 수 있습니다.

코드를 복사해서 붙여넣기 해주세요.

kmj77877

질문자

2022.08.16

<!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/logo-header.png" alt="header-logo">
                </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>
                                <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>
                </ul>
            </div>
        </header>
        <div class="slide">
            <div>
                <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a>
                <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a>
                <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a>
            </div>
        </div>
        <div class="items">
            <div class="news">
                <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 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/gallery-01.jpg" alt="gallery1"></a>
                            <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a>
                            <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner">
                <a href="#none"><img src="images/banner-01.jpg" alt="banner"></a>
            </div>
            <div class="shortcut">
                <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a>
            </div>
        </div>
        <footer>
            <div class="footer-logo">
                <a href="#none"><img src="images/logo-footer.png" alt="logo-footer"></a>
            </div>
            <div class="copyright">
            상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>
            사업장주소 : 서울특별시 강남구 테헤란로 123-56
            </div>
            <div class="sns">
                <a href="#none"><img src="images/sns-01.png" alt="facebook"></a>
                <a href="#none"><img src="images/sns-02.png" alt="twitter"></a>
                <a href="#none"><img src="images/sns-03.png" alt="insta"></a>
            </div>
        </footer>
    </div>

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

kmj77877

질문자

2022.08.16

@charset 'utf-8';

body {
    margin: 0;
    font-size: 15px;
    background-color: #fff;
    color: 222328;
}
a {
    color: 222328;
    text-decoration: none;
}

.container {
    /* border: 1px solid red; */
    width: 1200px;
    margin: auto;
}
header {
    height: 100px;
    position: relative;
    z-index: 10px;
}
header > div {
    /* border: 1px solid blue; */
    height: 100px;
}
.header-logo {
    width: 200px;
    float: left;
}
.navi {
    width: 600px;
    float: right;
}

.slide {}
.slide > div {
    border: 1px solid green;
    height: 300px;
}
.items {
    overflow: hidden;
}
.items > div {
    /* border: 1px solid blue; */
    height: 200px;
    float: left;
    box-sizing: border-box;
}
.news {
    width: 500px;
}
.banner {
    width: 350px;
}
.shortcut {
    width: 350px;
}

footer {
    overflow: hidden;
}
footer > div {
    /* border: 1px solid green; */
    height: 100px;
    float: left;
    box-sizing: border-box;
}
.footer-logo {
    width: 200px;
}
.copyright {
    width: 800px;
}
.sns {
    width: 200px;
}

/* images & text */
.header-logo,
.footer-logo {
    line-height: 130px;
}
.copyright {
    text-align: center;
    padding-top: 30px;
}
.sns {
    text-align: center;
    line-height: 130px;
}

/* slide */
.slide {
    position: relative;
    width: 1200px;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
}
.slide > div {
    position : absolute;
    top: 0;
    left: 0;
    font-size: 0;
    animation: slide 10s linear infinite;
}

@keyframes slide {
    0% {
        top: 0;
    }
    30% {
        top: 0;
    }
    35% {
        top: -300px;
    }
    65% {
        top: -300px;
    }
    70% {
        top: -600px;
    }
    95% {
        top: -600px;
    }
    100% {
        top: 0;
    }
}

/* Navigation */
.menu {
    list-style: none;
    padding: 0;
    border: 1px solid red;
}
.menu li {
    border: 1px solid blue;
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
}
.menu li > a {
    border: 1px solid black;
    display: block;
    padding: 5px;
}
.menu li:hover > a {
}

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

/* Tab menu */
.tab-inner {
    width: 95%;
    margin: auto;
}
.btn {}
.btn a {
    border: 1px solid #000;
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    margin-right: -6px;
    border-bottom: none;
    margin-bottom: -1px;
    background-color: #ddd;
}
.btn a.active {background-color: #fff;}
.tabs {}
.tab1 {
    border: 1px solid #000;
    padding: 0 15px;
    /* display: none; */
}
.tab1 a {
    display: block;
    padding: 5px;
    border-bottom: 1px solid #000;
}
.tab1 a:last-child {border-bottom: none;}
.tab1 a b {
    float: right;
    font-weight: normal;
}
.tab2 {
    display: none;
    border: 1px solid #000;
    height: 165px;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
}
.tab2 img {
    width: 130px;
}

kmj77877

질문자

2022.08.16

/* Tab menu */

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

kmj77877

질문자

2022.08.16

복사해서 붙여넣기였군요ㅜㅜ 답변 기다리고 있겠습니다!

kmj77877

z-index 가 먹히지 않습니다

그리고 @charset 'utf-8' 에서 왜 빨간색이 뜨는지 궁금하고 이를 고칠 수 있는 방법이 궁금합니다.

이 글과 비슷한 Q&A

디자인영상 관련 문의입니다.

프로젝트3의 툴팁에서

Chapter 5 (실습) 댓글 컴포넌트 만들기

settings.jason 3가지