묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
마우스 휠 감도 문제 / 스크롤시 화면 다다음으로 넘어감
스크롤했을때 한 페이지씩 넘어가다가도가끔씩 2개의 페이지가 샤샥하고 한번에 넘어갈때가 있는데마우스 휠감도 조절해봐도 안되네요 ㅠ방법이 있을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
폰트어썸 4.7 아이콘
코드 부트스트랩에 있는거 복사 붙여넣기 했는데 아이콘이 안나오고 자꾸 네모박스 나오는데 왜이러는걸까요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
8월 실기 시험 후기입니다!
안녕하세요! 오랜만에 질문글을 작성하게 되었습니다! 결론부터 말씀드리면 89점으로 합격했다고 오늘 연락을 받고 수첩형 자격증 신청을 마친 상태입니다 :)사실 다른 일과 병행을 하느라 공부를 제대로 하지 못하다가 급하게 한 달 벼락치기를 했는데요.. 현재 웹디자인 기능사를 준비하시는 분들에게 제가 했던 방법이 조금이라도 도움이 되면 좋을 것 같아 길게 작성하게 되었습니다.한 달 벼락치기라는 말에 의아하실 수 있을 것 같아 먼저 말씀드리면, 저는 영상, 광고, 디자인 계열 전공을 해서 작년 여름 웹디자인을 하기 위해 공부하고 필기를 따놓고 실기 준비보다 (디자인 계열로)취업을 먼저 해버려서 늦게 딴 케이스입니다 ^-^;;이전에 공부한게 있었기 때문에 한 달 벼락치기가 가능했습니다ㅜㅜ제가 공부한 방법에 대해 말씀드리면저는 강의를 보며 따라하는 방법이 아닌,제가 가진 정보로 직접 만들어보고 강의를 보며 선생님이 어떻게 하는지 보고 배우는 방식으로 공부했습니다.구체적인 예시를 들자면,A유형 레이아웃을 배웠다면 B유형은 직접 만들어보고와이어프레임 이론을 배웠다면, 그 이론만 가지고 제가 직접 먼저 만들었습니다.당장 공부할 때는 시간이 오래 걸리기는 하지만, 외워지는 정도도 빠르고 이렇게 한 번이라도 직접 만들게 되면 2-3번째 즈음엔 혼자서 만들 수 있게 되었습니다.또 영상 중간중간 선생님께서 말씀하신 것처럼 선생님께선 이전에 만든 것들을 복사해 넣더라도 저는 매번 하나하나 직접 쳐서 틀을 만들었던 것도 컸던 것 같습니다.어쩌면 당연한 공부방식일지 모르겠지만 시간을 많이 잡아먹고 제가 먼저 만들어보기 때문에 처음엔 안되는 것들이 생기는데 그때 왜일까? 생각하게 되고 선생님 강의를 들으며 왜 안되었는지 알게 되는 부분이 공부가 되는데 크다고 생각합니다.조금이라도 도움이 되었으면 하는 마음에 길게 작성하게 되었습니다. 감사합니다 :)
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
출강하고 있는 학원도 알수있을까요?
학원을 찾고 있는데 선생님이 현재 출강하고 있는 학원 반 정보도 알수있을까요? 단기 퍼블리싱 같은 수업반은 없나요?
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
디자인설정
ui디자인을 포토샵 대신 피그마로 해도 괜찮을까요?
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
수업자료를 다운받으면 오류가 납니다,,ㅠㅠ
수업자료 다운받으면 이렇게 뜨면서 압축해제도 되지않습니다,, gygy0604@naver.com 으로 자료파일 보내주시면 감사드리겠습니다.
-
미해결코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)
css float 이용하기 부분에서 :after 적용이 안됩니다
visual studio code를 사용하고 있습니다코드는 똑같이 사용했으나 :after를 사용해도 코드가 적용이 되지않습니다 자동완성을 사용해서 보니 ::after의 기능은 있어도 :after의 기능이 없어 ::after도 사용해봤지만 적용이 안됩니다 ㅜ visual studio code에서는 지원이 안되는 걸까요 아니면 저의 문제일까요
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
pom.xml의 dependencies 관련 질문
안녕하세요 해당 프로젝트를 이클립스가 아닌 인텔리제이로 만들고 싶어 글을 올리게 되었습니다.SpringMVC12 프로젝트(이게 7강에서 11강까지 다 모여있는 거겠죠...?)의 pom.xml에 사용한 것들을 스프링 이니셜라이저의 gradle(build.gradle)로 하고 싶은데 dependencies에 각각 어떠한 것들이 들어가 있는지 알 수 있을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D유형 숏컷부분 정렬문의합니다
위사진은 강의에쓰인 사진이고 밑에사진은 제가만드는곳인데 숏컷부분이 강의사진처럼 길게 오른쪽까지 안퍼지고 저렇게밖에 안되는데 어떻케 해야지 끝과끝 중앙으로 보기좋게 설정하나요 ?
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
혹시 마프는 언제 오픈 되나요?
선생님 강의 정말 감사하게 잘 듣고 있는 학생입니다~선생님께서는 코딩 멍충이도 술술 이해 시키는 놀라운 마력을 가지고 계시는 거 같아요항상 감사하는 마음 가지고 수업에 임하고 있습니다. 많이 바쁘시겠지만 혹시 언제 마프가 오픈되는지 알 수 있을까요? 이번 강의 마무리하고 곧 마프로 선생님 강의 듣고 싶은 학생입니다. 존경합니다~ 박매일 선생님!!
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
E유형 레이아웃 관련 질문입니다..!
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>철길마을</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="container"> <div class="main-con"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="center"> <div class="banner"></div> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <div class="right"> <div class="slide"> <div class="slide-cons"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-con"> <div class="link"></div> <div class="copy"></div> </div> <div class="family"></div> </footer> </div> <!-- JS --> <script src="js/jquery-1.12.4.js"></script> <script src="js/script.js"></script> </body> </html>@charset "utf-8"; body { font-size: 15px; margin: 0; padding: 0; color: #333; background-color: #fff; } a { color: #333; text-decoration: none; } /* rayout */ .main-con { border: 1px solid #000; display: flex; } .left { width: 200px; border: 1px solid #000; box-sizing: border-box; } .center { border: 1px solid #000; box-sizing: border-box; width: 400px; } .right { border: 1px solid #000; box-sizing: border-box; flex: 1; } /* header */ header { position: relative; z-index: 10; } header > div { border: 1px solid #000; box-sizing: border-box; } .header-logo { height: 100px; } .navi { height: 350px; } /* banner */ .banner { border: 1px solid #000; height: 150px; box-sizing: border-box; } /* news */ .news { border: 1px solid #000; box-sizing: border-box; height: 200px; } /* gallery */ .gallery { border: 1px solid #000; box-sizing: border-box; height: 200px; } /* shortcut */ .shortcut { border: 1px solid #000; box-sizing: border-box; height: 150px; } /* slide */ .slide { border: 1px solid #000; box-sizing: border-box; width: calc(100vw - 600px); height: calc(100vh - 120px); } /* footer */ footer { display: flex; height: 120px; } footer > div { border: 1px solid #000; box-sizing: border-box; height: 120px; } .footer-logo { width: 200px; } .footer-con { flex: 1; } .footer-con > div { border: 1px solid #000; height: 60px; box-sizing: border-box; } .link {} .copy {} .family { width: 230px; }위와 같이 레이아웃만 짰을 때 이 사진처럼 .left와 .footer-logo의 너비 값이 같은 200px을 가지는데 레이아웃에선 footer-logo의 너비 값과 같지 않은 것처럼 보입니다. 계속해서 수정해본 결과 main-con의 너비값을 100vw로 주니 해결은 되는데 창에 조금의 스크롤이 생기는데 시험때 창에 스크롤이 생기면 감점 요인이 되는거겠죠..?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
팝업창 위치를 임의로 더 위로 올려도 괜찮나요?
계속되는 자잘한 질문에 죄송합니다 T.T이번 주 토요일에 시험을 앞두고 있어서 좀 더 확실하게 알고 넘어가고자 계속해서 질문하게 되는 것 같습니다..!팝업창 위치 관련해서 궁금한 점이 있습니다..modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 0.2); z-index: 11; display: none; } .modal-con { position: absolute; top: 50%; left: 50%; background-color: #fff; width: 500px; transform: translate(-50%, -100%); padding: 20px; border-radius: 20px; }위치 관련 질문이어서 .modal과 .modal-con 부분만 가져오게 되었습니다. 위와 같이 작성할 경우에 해당 사진처럼 브라우저 중앙에 위치하기는 하는데 안 예쁘기도 하고 시험지(?)에 나와있는 모달 제작 그림에선 팝업창이 슬라이드까지 가리고 있어서 더 올려주고 싶은데.modal-con { position: absolute; top: 50%; left: 50%; background-color: #fff; width: 500px; transform: translate(-50%, -100%); padding: 20px; border-radius: 20px; } .modal-con h2 { text-align: center; background-color: #000; color: #fff; padding: 10px; border-radius: 10px; }이런 식으로 .modal-con의 translate 뒷부분에 -50%, -100% 를 주어서 임의로 더 올려도 괜찮은지가 궁금합니다..!시험을 앞뒀다보니 저는 제 눈의 만족을 위해 저렇게 연습해왔는데 실제 시험에서 저렇게 작업해도 될지, 무조건 브라우저 중앙에 위치시키는 것이 좋을 지 확실하게 알고 가는 것이 좋을 것 같아서 질문드리게 되었습니다. 항상 감사합니다!!
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험 볼 때 익스텐션 설치 관련 질문입니다!
시험장에서 네트워크가 끊기는 것으로 알고 있는데 강의에서 영상으로 설명해주신 것은 비주얼 스튜디오 코드가 아니어서 확실한 정보를 얻기 위해 질문하게 되었습니다!초반 강의에서 말씀하신 필수로 설치해야 하는 익스텐션은 네트워크가 끊겨 있어도 설치가 가능한 건가요?? 또 인터넷이 연결되지 않아도 브라우저 창으로 live server가 가능한 것인지 궁금합니다..!
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
로고 제작 크기 관련 질문 드립니다.
보통 200X40 혹은 190X45 픽셀 크기로 작업하라고 로고 세부사항에 지시가 되어있는데header 폴더에 제공된 로고를 삽입한다.로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다. 이 부분에서 가로 세로 비율을 유지하라는 것이 정확히 어떤 의미인지 이해가 잘 가지 않습니다. 이러한 지시사항이 있을 땐 로고 작업 크기를 어떻게 하는 것이 좋을까요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
애니메이션이작동안되고 사진부분이 원래 빈공간이 생기는게 맞을까요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d터압 새로 2칼럼 d-1</title> <link rel="stylesheet" href="css/d-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="d-1images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="d-1images/slide-d-01.jpg" alt="slide1"></a> <a href="#none"><img src="d-1images/slide-d-02.jpg" alt="slide2"></a> <a href="#none"><img src="d-1images/slide-d-03.jpg" alt="slide3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="d-1images/banner-01.png" alt="bannerimage1"></a> <a href="#none"><img src="d-1images/banner-02.png" alt="bannerimage2"></a> <a href="#none"><img src="d-1images/banner-03.png" alt="bannerimage3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="d-1images/shortcut-01.png" alt="shortcutimage"> <div class="shortcut-content"> <h3> 얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인 </h3> <p> 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요. 2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지 2019.12.31<br> 보안강화 시스템 작업 안내 공지 2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제 <b>기간 : 2022년 12월 18일 ~ 12월 25일</b> </p> </div> <a href="#none"><img src="d-1images/shortcut-02.png" alt="shortcutlink"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b></a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="d-1images/gallery-01.png" alt="gallery-01"> </a> <a href="#none"> <img src="d-1images/gallery-02.png" alt="gallery-02"> </a> <a href="#none"> <img src="d-1images/gallery-03.png" alt="gallery-03"> </a> <a href="#none"> <img src="d-1images/gallery-04.png" alt="gallery-04"> </a> <a href="#none"> <img src="d-1images/gallery-05.png" alt="gallery-05"> </a> <a href="#none"> <img src="d-1images/gallery-06.png" alt="gallery-06"> </a> <a href="#none"> <img src="d-1images/gallery-07.png" alt="gallery-07"> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="d-1images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="d-1images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="d-1images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="d-1images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <!--modal--> <div class="modal"> <div class="content-modal"> <h2> 부여 가을연꽃축제 팸투어 모집 </h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다.<br> 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <div class="close-modal">X 닫기</div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; font-size: 15px; } a{ list-style: none; text-decoration: none; color: inherit; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .right{ flex: 1; } header{} header> div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } /*navigation*/ .menu{ list-style: none; padding: 0; margin: 0; width: 95%; margin: auto; margin-top: 15px; } .menu li { } .menu li > a { display: block; border: 1px solid #000; text-align: center; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .spot-menu{ height: 50px; text-align: center; } .spot-menu a:hover{ text-decoration: underline; } .slide{ height: 400px; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /*slide animation*/ .slid-image-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } .slid-image-inner a{} .slid-image-inner a img{} @keyframes slide{ 0%{ top: 0; } 10%{ top: 0; } 35%{ top: -400px; } 65%{ top: -400px; } 70%{ top: -800px; } 90%{ top: -800px; } 100%{ top: 0; } } .slide-banner img{ width: 150px; display: block; } .slide-banner{ position: absolute; top: 0; right: 10px; } .items{} .items > div{ border: 1px solid #000; } .shortcut{ height: 250px; display: flex; align-items: center; margin: 0 15px; gap: 50px; } /*news-gallery*/ .news-gallery{ height: 250px; } .tab-inner{ width: 90%; margin: auto; margin-top: 5px; } .tab-inner .btn{} .btn span{ border: 1px solid #000; width: 150px; padding: 4px; display: inline-block; text-align: center; border-radius: 10px 10px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -2px; background-color: #eee; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{ border: 1px solid #000; padding: 0px 15px; } .tabs>div{ } .tab1{} .tab1 a{ display: block; padding: 10px; border-bottom: 1px dashed #000; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 img{ margin: 47px 20px; width: 170px; align-items: center; } footer{ display: flex; height: 100px; align-items: center; } footer > div{ text-align: center; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 35px; box-sizing: border-box; } .sns{ width: 230px; } .sns img{ width: 70px; border-radius: 5px; } /*modal*/ .modal{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .content-modal{ width: 500px; height: 400px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } h2{ background-color: blue; text-align: center; padding: 5px; color: #fff; } p{ line-height: 2.5em; padding: 0 15px; } .close-modal{ float: right; padding: 5px 7px; border: 1px solid #000; margin-right: 25px; cursor: pointer; } /*navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*tab-inner*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) /*modal*/ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })사진첨부한곳처럼 빈공간이 나오는게 정상인건가요 ? 애니메이션 작동이 안되는데 사진때문에 그런걸까요 object-fit cover 해도 저상태에서 애니메이션 움직이지도 않아요,
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
혼자해보고 안되서 찾아보고 해도 해결안되서 문의합니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d터압 새로 2칼럼 d-1</title> <link rel="stylesheet" href="css/d-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="d-1images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"> <a href="#none"><img src="d-1images/banner-01.png" alt="bannerimage1"></a> <a href="#none"><img src="d-1images/banner-02.png" alt="bannerimage2"></a> <a href="#none"><img src="d-1images/banner-03.png" alt="bannerimage3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="d-1images/shortcut-01.png" alt="shortcutimage"> <div class="shortcut-content"> <h3> 얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인 </h3> <p> 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요. 2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지 2019.12.31<br> 보안강화 시스템 작업 안내 공지 2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제 <b>기간 : 2022년 12월 18일 ~ 12월 25일</b> </p> </div> <a href="#none"><img src="d-1images/shortcut-02.png" alt="shortcutlink"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> <div class="tabs"> <div class="tab1"> <a href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b></a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="d-1images/gallery-01.png" alt="gallery-01"> </a> <a href="#none"> <img src="d-1images/gallery-02.png" alt="gallery-02"> </a> <a href="#none"> <img src="d-1images/gallery-03.png" alt="gallery-03"> </a> <a href="#none"> <img src="d-1images/gallery-04.png" alt="gallery-04"> </a> <a href="#none"> <img src="d-1images/gallery-05.png" alt="gallery-05"> </a> <a href="#none"> <img src="d-1images/gallery-06.png" alt="gallery-06"> </a> <a href="#none"> <img src="d-1images/gallery-07.png" alt="gallery-07"> </a> </div> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="d-1images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="d-1images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="d-1images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="d-1images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; font-size: 15px; } a{ list-style: none; text-decoration: none; color: inherit; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .right{ flex: 1; } header{} header> div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } /*navigation*/ .menu{ list-style: none; padding: 0; margin: 0; width: 95%; margin: auto; margin-top: 15px; } .menu li { } .menu li > a { display: block; border: 1px solid #000; text-align: center; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .spot-menu{ height: 50px; text-align: center; } .spot-menu a:hover{ text-decoration: underline; } .slide{ height: 400px; } .slide-image{ border: 1px solid #000; height: 400px; } .slide-banner img{ width: 150px; display: block; } .slide-banner{ border: 1px solid #000; position: absolute; top: 0; right: 10px; } .items{} .items > div{ border: 1px solid #000; } .shortcut{ height: 250px; display: flex; align-items: center; margin: 0 15px; gap: 50px; } /*news-gallery*/ .news-gallery{ height: 250px; } .tab-inner{ width: 90%; margin: auto; margin-top: 5px; } .tab-inner .btn{} .btn span{ border: 1px solid #000; width: 150px; padding: 5px; display: inline-block; text-align: center; border-radius: 10px 10px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #eee; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{ border: 1px solid #000; padding: 0px 15px; } .tabs>div{ } .tab1{} .tab1 a{ display: block; padding: 10px; border-bottom: 1px solid #000; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{} .tab2 img{ display: none; width: 200px; } footer{ display: flex; height: 100px; align-items: center; } footer > div{ text-align: center; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 35px; box-sizing: border-box; } .sns{ width: 230px; } .sns img{ width: 70px; border-radius: 5px; } /*navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*tab-inner*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })탭메뉴부분이 .btn a 로 하면 탭메뉴들이 다망가져서 .btn > a했다가 아닌거같아서 span 으로했는데 제이쿼리가 안먹히는데요 또 난감한 질문드려서 죄송하네요,,선생님 저도 결제해서 강의보는데 모르는거있어서 하다가 안되서 문의글올린겁니다 그리고 초보인데 당연히 제가 맞는지안맞는지 틀렷는지도 궁금한거고요 .. 질문을 많이해서 지적받은거는 조금 그렇네요 결제해서강의보는데 배울려면 제대로배워야할거같아서 안되는거 봐달라고한건데 물론 제가 좀 많이 남겨놔서 죄송하다고도 했지만 하다가 막혀서 선생님 답변보고 질문할까말까 스트레스도받고 망설여지네요 혼자해도 안되서 도움의손길을 요청하는건데 댓글보고 조금 질문하기도 불편해졌네요 이번주시험이라 예민하기도하고 진도는안나가지고 마음만 급해져서 문의많이했습니다 귀찮게 해드려서 죄송하네요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 click 함수 오류
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/css/style.css" /> </head> <body> <script src="/js/code.jquery.com_jquery-3.7.0.js"></script> <script src="/js/custom.js"></script> <a class="show-btn" href="#">보이기</a> <a class="hide-btn" href="#">감추기</a> <div>Box</div> </body> </html> $(document).on('click', '.show-btn', function () { $('div').show(); }); $(document).on('click', '.hide-btn', function () { $('div').hide(); });click함수로 쓸때 작동이 안되고 on함수로 썼을 때 작동이 되는데 이유가 무엇인가요?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 시험 9시 시작하고 1시간 20분만에 나왔습니다.
B유형이 나왔구 선생님 강의 듣고 매일 연습한 결과 아주 완벽하게 끝내고 왔습니다!팁을 하나 드리자면 제가 맨처음에 시험을 시작할때 라이브서버나 한글버전의 비주얼 스튜디오가 설치되어 있지 않아서(영문버전) 일단 그냥 했는데 시험 도중에 웹 페이지에서 아무것도 CSS에 적은게 반영이 안되는겁니다... 감독관님을 손들며 부를 때 알게 되었죠 저장 누르면서 해야 적용될 것 같은데? 이생각을요 ㅠㅠ..(+추가드립니다! 시험장에서 영문버전 Auto Save 누르고 하였으나.. 적용이 안되어 비주얼 소프트웨어 문제인지 그거까지 둘다 Ctrl+S / 브라우저 F5를 번갈아가며 눌렀습니다 ;ㅅ;)Html, Css, jQuery를 저장하면서 홈페이지까지 F5로 새로고침을 계속 누르면서 해야되는게 많이 번거로웠습니다!저의 작업순서는 와이어프레임 작성 (8분) --> 포토샵 열고 파일 정리(이미지 등등 크기에 맞게 자르고 텍스트까지 전부다 마침) (20분) --> 헤더로고, 푸터 모든 영역 완성 (5분) --> 바로 슬라이드 완성 (5분) --> news, gallery 완성 (10분) --> Navi 완성 (10분+10분 서브백 어떻게하는지 중간에 까먹음...!!그래도 완성) --> 그리고 나머지는 검토시간(10분정도) 이 순서로 했던 것 같습니다.많은분들이 작업 순서를 고민하신다면 이렇게 해보시는걸 추천드립니다!(참고로....저는...시험 다 끝나고 제출할때까지도...용량 초과했는지 확인을 못했지만... 연습을 엄청나게 많이 해봤을때 아무리커봐야 2MB~3MB정도 일거라고 판단하여.. 95점정도의 고득점 예상합니다!) 다들 화이팅입니다!ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ아차! 추가로 영문버전은 단축키(줄 삭제 / 줄 복제 / 줄 이동) 이런거는 단축키에 들어가셔서 "line" 이것만 쳐도 바로 상단에 전부다 몰려있으니 꼭 시험 시작하기전에 단축키부터 설정하고 하시면됩니다. 한글버전도 마찬가지구 이게 시험 시간 단축의 큰 도움이 될겁니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘이 시험인데 C타입 와이어프레임이 갑자기 이상합니다!....
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>남도맛기행 축제</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { background-color: #fff; color: #222328; font-size: 15px; margin: 0; } a { color: inherit; text-decoration: none; } .container { border: 1px solid red; width: 1000px; overflow: hidden; } .container > div { /* border: 1px solid black; */ /* height: 1000px; */ float: left; box-sizing: border-box; } .left { width: 200px; } header {} header > div { border: 1px solid green; } .header-logo { height: 100px; } .navi { height: 400px; } .right { width: 800px; } .slide {} .slide > div { border: 1px solid pink; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid blue; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } .banner { width: 200px; } footer {} footer > div { border: 1px solid green; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 600px; } .copyright > div {}이게 갑자기이런식으로 밑에가 안밀리고 왼쪽으로 딱 붙어있는데 저도 실기 연습중에 처음으로 일어난 일이라 방법을 못찾고있습니다....도움이 필요합니다
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
e-2했는데 이게맞는가요 ??
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>e-2레이아웃연습</title> <link rel="stylesheet" href="css/e-2.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="center"> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="family-site"></div> </footer> </div> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .items{} .items > div{ border: 1px solid #000; } .news{ height: 250px; } .gallery{ height: 250px; } .slide-banner{ height: 200px; } .slide{} .slide > div{} .slide-image{ border: 10px solid blue; height: calc(100vh - 100px); } footer{ display: flex; } footer > div{ border: 1px solid green; height: 100px; } .footer-logo{ width: 200px; } .copyright{ flex: 1; } .family-site{ width: 230px; }선생님 강의하신대로 따라했는데 vh 하고나서 저게맞는지는 모르겠지만 사진에 빨간색 칠해놓은부분이 선생님화면이랑 다르게 길어보여서 그런데 혹시 잘못한부분이 있을까요 ? 계속 문의드려 죄송하네요 ...