inflearn logo
강의

講義

知識共有

ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)

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

291

작성자 없음

投稿した質問数 0

0

<!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

0

dunopi

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

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

1215kkm@naver.com

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

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

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

0

sy4562

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

 

역시나가 역시나 입니다!

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

0

dunopi

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

0

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;}

Json 플러그인 사용시 variable collection 없음

0

12

1

배리어블 목록 없음

0

21

3

Token 등록 방법 문의

0

18

1

6-6 실습 문의

0

23

2

섹션5 노션링크 는 따로 없나요?

0

29

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

32

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

27

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

24

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

54

2

강의에 나와있는 2025년 공개문제와 2026년 공개문제가 다릅니다

0

66

1

공지사항과 갤러리html파트 강의자료가 없음.

0

82

2

공지사항과 갤러리 html 폴더 및 파일 문의

0

160

1

제이쿼리 파일을 어디서다운받나요??

0

242

1

웹디자인기능사 실기 감점 요인 질문!

0

1172

1

position 질문

0

203

1

건의사항

0

294

3

D2유형 슬라이드 질문있습니다.

0

242

2

F1실무코드

0

169

1

F-1 메뉴 제이쿼리로 제작하는 강의

0

197

2

E4 유형 레이아웃에서 calc 질문있습니다.

0

160

1

css로 메뉴 만드는 부분

0

184

1

A-3 유형 코드

0

208

2

동일답안 (C2, C3유형) 수정부탁드립니다.

0

198

2

궁금한 부분들 질문 드립니다.

0

282

4