에러가 나는데... 어디가 잘못된건지 모르겠습니다.ㅠㅠ

웹디자인기능사 [2024년 합격 99%] 실기전체 A - F

작성

149

수정됨

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green복지재단</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <header>
            <h1>
                <a href="#">
                    <img src="images/logo.jpg" alt="">
                </a>
            </h1>

            <nav>
                <ul class="gnb">
                    <li><a href="#">재단소개</a>
                        <ul class="lnb">
                            <li><a href="#">설립취지</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">찾아오시는길</a></li>
                        </ul>
                    </li>
                    <li><a href="#">후원하기</a>
                        <ul class="lnb">
                            <li><a href="#">국내후원</a></li>
                            <li><a href="#">국외후원</a></li>
                            <li><a href="#">맞춤후원</a></li>
                        </ul>
                    </li>
                    <li><a href="#">자료실</a>
                        <ul class="lnb">
                            <li><a href="#">서식자료실</a></li>
                            <li><a href="#">사진자료실</a></li>
                            <li><a href="#">후원양식</a></li>
                        </ul>
                    </li>
                    <li><a href="#">스토리</a>
                        <ul class="lnb">
                            <li><a href="#">웹진</a></li>
                            <li><a href="#">보고서</a></li>
                            <li><a href="#">나의 후원</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="lnb_bg"></div>
            </nav>
        </header>

        <div class="slide">
            <ul>
                <li><img src="images/slide1.jpg" alt=""></li>
                <li><img src="images/slide2.jpg" alt=""></li>
                <li><img src="images/slide3.jpg" alt=""></li>
            </ul>
        </div>

        <section>
            <div class="board">
                <h2><a href="#">공지사항</a></h2>
                <ul>
                    <li>
                        <a href="#">
                            <p class="title">웹디자인 기능사 풀어보야요</p>
                            <p class="date">2023-12-15</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p class="title">웹디자인 기능사 풀어보야요</p>
                            <p class="date">2023-12-15</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p class="title">웹디자인 기능사 풀어보야요</p>
                            <p class="date">2023-12-15</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p class="title">웹디자인 기능사 풀어보야요</p>
                            <p class="date">2023-12-15</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="gallery">
                <h2><a href="#">갤러리</a></h2>
                <ul>
                    <li><a href="#"><img src="images/gallery1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/gallery3.jpg" alt=""></a></li>
                </ul>
            </div>
            
            <div class="banner">
                <h2><a href="#">배너</a></h2>
                <ul>
                    <li>
                        <a href="#">
                            <p class="icon"><img src="images/icon.jpg" alt=""></p>
                            <p class="title">시험유형은 모두 20가지</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p class="icon"><img src="images/icon.jpg" alt=""></p>
                            <p class="title">시험유형은 모두 20가지</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p class="icon"><img src="images/icon.jpg" alt=""></p>
                            <p class="title">시험유형은 모두 20가지</p>
                        </a>
                    </li>
                </ul>
            </div>
        </section>

        <footer>
            <h1><img src="images/logo_footer.jpg" alt=""></h1>
            <div class="lnfo">
                경기도 성남시 분당구 돌마로 46 (광천빌딩 5층)<br>
                그린컴퓨터에서 ui/ux 웹디자인+웹퍼블리셔 수업중 (강쌤)
            </div>
            <div class="family">
                <select>
                    <option value="">familysite</option>
                    <option value="">네이버</option>
                    <option value="">다음</option>
                    <option value="">네이트</option>
                </select>
            </div>
        </footer>
    </div>

    <div class="popup_box">
        <div class="popup">
            <h3>팝업제목</h3>
            "한정 기간, 특별 혜택! 최대 40% 할인과 선착순 사은품! 다양한 상품으로 쇼핑의 즐거움을 높이세요. 놓치지 마세요! 자세한 내용은 홈페이지에서 확인하세요. 지금 쇼핑 시작!"
            <button type="button">닫기</button>
        </div>
    </div>

    <script src="script/jquery-3.7.0.min.js"></script>
    <script src="script/action.js"></script>
</body>
</html>

파일업로드는 불가한건가요?ㅠㅠ

먼저 css파일을 선생님 코드로, html은 제가 짠 코드로 해보니 에러가 나서 html에서 문제가 발생했다는 사실을 알아서, html을 선생님 코드로 해보니 정상으로 나와서... 제 html 파일 업로드해봅니다. 어디가 문제인지 모르겠습니다.ㅠㅠ 이런 경우가 제법 되어서 왜 그런지 이번에 좀 확실히 짚고 넘어가야겠어요.ㅠㅠ 흐규...

그리고 a2유형 입니다!

HTML/CSS jquery

답변 2

두노피

지식공유자

css를 넣어봤는데 그냥은 확인이 어렵네요

아무래도 이메일로 보내줘보셔야겠어요

1215kkm@naver.com

이미지같은 파일,폴더 모두 압축해서 보내주시구요

혹시 이메일로 js첨부가 안되시면

action.js 를 action.jss 로 이름 바꿔서 보내주시면 되요~

sy4562

강사님. 해결하였습니다.

역시나가 역시나 입니다!

신경써주셔서 감사합니다.

두노피

지식공유자

안녕하세요~ 어떤 에러가 나나요? css 소스도 올려주세요~~~~~^^

sy4562

* {margin: 0; padding: 0; list-style: none; text-decoration: none; color: #222;} .wrap {width: 1200px; margin: 0 auto;} header {width: 1200px; height: 100px; position: relative;} .slide {width: 1200px; height: 300px; background: #eee; overflow: hidden;} section {width: 1200px; height: 200px;} footer {width: 1200px; height: 100px; background: #333;} /* 헤더 */ header h1 {float: left; width: 200px; height: 40px; margin-top: 30px;} header nav {float: right; width: 800px; height: 100px; background: #ddd;} header nav li {float: left; width: 200px; height: 100px; line-height: 100px; text-align: center; font-size: 20px;} header nav li .lnb {position: absolute; width: 200px; z-index: 3; opacity: 0; visibility: hidden; transition: 0.5s;} header nav li .lnb li {height: 60px; line-height: 60px; } header nav li:hover {background: #37401c;} header nav li:hover a {color: #fff;} header nav li .lnb li a {color: #fff;} header nav .lnb_bg {position: absolute; width: 1200px; height: 180px; background: #657f20; left: 0; top: 100px; z-index: 2;opacity: 0; visibility: hidden; transition: 0.5s;} header nav:hover .lnb {opacity: 1; visibility: visible;} header nav:hover .lnb_bg {opacity: 1; visibility: visible;} /* 슬라이드 */ .slide ul {width: 3600px; height: 300px;} .slide ul li {width: 1200px; height: 300px; float: left;} /* @charset "UTF-8"; *{margin: 0; padding: 0; list-style: none; text-decoration: none; color: #222;} .wrap{width: 1200px; margin: 0 auto;} header{width: 1200px; height: 100px; position: relative;} .slide{width: 1200px; height: 300px; background: #eee; overflow: hidden;} section{width: 1200px; height: 200px;} footer{width: 1200px;height: 100px;background: #333;} header h1{float: left; width: 200px; height: 40px; margin-top: 30px;} header nav{float: right; width: 800px; height: 100px; background: #ddd;} header nav li{float: left; width: 200px; height: 100px; line-height: 100px; text-align: center; font-size: 20px;} header nav li .lnb{ width: 200px;position: absolute; z-index: 3; opacity: 0; visibility: hidden; transition: .5s;} header nav li .lnb li{ height: 60px; line-height: 60px; } header nav li:hover{background: #37401c;} header nav li:hover a{color: #fff;} header nav li .lnb li a{color: #fff;} header nav .lnb_bg{position: absolute; width: 1200px; height: 180px; background: #657f20; left: 0; top: 100px; z-index: 2; opacity: 0; visibility: hidden; transition: .5s;} header nav:hover .lnb{opacity: 1; visibility: visible;} header nav:hover .lnb_bg{opacity: 1; visibility: visible;} .slide ul{width: 3600px; height: 300px;} .slide ul li{width: 1200px; height: 300px; float: left;} */ /* 섹션 */ section .board {width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .board h2 {height: 50px; line-height: 50px; } section .board li {height: 30px; line-height: 30px;} section .board li p.title {float: left;} section .board li p.date {float: right;} section .gallery {width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .gallery h2 {height: 50px; line-height: 50px; } section .gallery li {width: 110px; height: 110px; float: left; margin-right: 15px;} section .gallery li img {width: 100%;} section .gallery li:last-child {margin-right: 0;} section .banner {width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .banner h2 {height: 50px; line-height: 50px; } section .banner li {height: 44px; line-height: 44px; } section .banner li p.icon {float: left;} section .banner li p.icon img {width: 30px; vertical-align: middle; margin-right: 8px;} section .banner li p.title {float: left;} /* section .board{width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box; } section .board h2{height: 50px; line-height: 50px;} section .board li{height: 30px; line-height: 30px;} section .board li p.title{float: left;} section .board li p.date{float: right;} section .gallery{width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .gallery h2{height: 50px; line-height: 50px;} section .gallery li{width: 110px; height: 110px; float: left; margin-right: 15px;} section .gallery li img{width: 100%;} section .gallery li:last-child{margin-right: 0;} section .banner{width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box; } section .banner h2{height: 50px; line-height: 50px;} section .banner li{height: 44px; line-height: 44px;} section .banner li p.icon{float: left;} section .banner li p.icon img{width: 30px; vertical-align: middle; margin-right: 8px;} section .banner li p.title{float: left;} */ /* footer h1{width: 200px; height: 40px; float: left; margin-top: 30px;} footer .info{width: 700px; height: 60px; float: left; margin-top: 20px; margin-left: 50px; color: #fff;} footer .family{width: 200px; height: 40px; float: right; background: #000; margin-top: 30px; margin-right: 10px;} footer .family select{width: 200px; height: 40px;} */ /* 푸터 */ footer h1 {width: 200px; height: 40px; float: left; margin-top: 30px;} footer .info {width: 700px; height: 60px; float: left; margin-top: 20px; margin-left: 50px; color: #fff;} footer .family {width: 200px; height: 40px; float: right; background: #000; margin-top: 30px; margin-right: 10px;} footer .family select {width: 200px; height: 40px;} /* 팝업 */ .popup_box {width: 100%; height: 100vh; position: absolute; background: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 3; display: none;} .popup_box .popup {width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%,-50%); padding: 20px; font-size: 18px; } .popup_box .popup button {position: absolute; right: 10px; bottom: 10px; width: 100px; height: 50px; background: #000; color: #fff; cursor: pointer;}

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

에러가 나는데... 어디가 잘못된건지 모르겠습니다.ㅠㅠ