월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문있습니다
강사님 안녕하세요, [A-4] 에 갤러리 구성에 마우스 오버시 투명도에 변화가 있어야 된다 라는 문제가 있는데 이부분은 강의 어느 부분에 설명이 되어 있을까요ㅠ?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
파일을 다운받았는데 엉뚱한 파일이 들어있어요
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요~~ 강의 잘 보고있습니다. 그런데 [모듈 제작 완성본] Flex 배치를 이용한 전체 레이아웃>>A타입>> A01>>index.html 파일이 잘못 올라 온 거 같아요 라디오버튼이 들어간 html 입니다. 확인 부탁드려요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이해가 안되네여
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 무슨말인지 하나도 이해가안되는데 쉽게설명해주실수있으실까여? 그리고 웹디자인기능사때 부모요소 자식요소 손자요소가 레이아웃에 쓰이는건가여? 아니면 어디에쓰이는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비쥬얼스튜디오코드 시험준비 익스텐션 설치
안녕하세요 웹디자인기능사를 준비중에 있는데 비쥬얼스튜디오코드가 처음이고, 코딩관련해서 노베이스입니다 실기시험장에가면 익스텐션이 설치되어있지 않고 익스텐션 항목은 보면 안된다고 하셨는데,[비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정]이 영상에서보면 한글패치라던가 라이브서버, 칼라피커 등 익스텐션 설치에 대한 내용이 나오는데, 이 부분은 무시하고 알려주신 4가지 단축키만 설정하면 되는건가요? 한국어팩이 없으면 언어가 영어라서 단축키 설정에서 어떤걸 변경해야될지 잘 모르겠어요.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
계속여쭤봐서 진심으로죄송합니다ㅜㅜ
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 선생님은 혹시 웹디자인 처음 공부할때 도움된 사이트나 책이나 강의가있었으면 추천해드릴수있을까요? 아니면 선생님만의 코딩공부법도 알려주시면 좋겠습니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃 공부를 더 하고싶어요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 레이아웃을 좀더 공부하고싶은데 선생님 강의중에서 어떤걸 더 들어야좋을까요? 또 이 강의에서 어떤게 레이아웃을 완벽히 공부하는데 도움이되는지 궁금합니다
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
라이브 서버가 네이버웨일에서는 안되는건가용?
안녕하세요 비주얼스튜디오 세팅부분 들으면서 선생님이 하시는거 따라 하는데 네이버 웨일 브라우저에서는 바디 부분에 글자 넣은게 반영이 안되는데 그래서 이 폴더에서 index를 우클릭하여 연결프로그램 -> edge 브라우저로 연결하면 텍스트가 반영이 되는데 문제는 주소가 이렇게 폴더위치로 뜨는데 이렇게 되면 안되는거 아닌가용?ㅠㅠ 어떻게 하면 좋을까요 ㅠㅠㅠㅠㅠㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의내용 중복 구매 환불 관련..
안녕하세요, 웹디자인기능사 실기 준비를 위해 강의를 찾다가 우연히 인프런에서 판매하고 있는 강의를 보고 구매를 하게 되었습니다. 추가로 구매할 강의를 찾던 중 아무래도 코딩 역량이 부족하여 '퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)'를 보고 이거를 먼저 보고 '[2022년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)'를 준비하면 되겠다 싶어 2개를 함께 결제하고 핵심이론 PDF 교재를 어제 다운로드 받았습니다. 그런데.. 오늘 코딩웍스 커뮤니티 웹 자격증 코스에서 '[2022년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)'를 구입하면 #2 '퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)'를 제공한다고 나온걸 보고 부리나케 찾아보니 같은 자료를 무료로 제공한다는 것을 보고 늦었으며 환불 받을 수 없다는 것을 알지만 그래도 문의드립니다. 환불은 어렵다는 것을 알고있어 '퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)' 강의에 추가로 제공될 수 있는 자료를 업로드 해주시면 감사드립니다..
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
교재에 대하여
■ 질문 남기실 때 꼭! 참고해주세요. 플렉스 교육내용을 듣고있는데요 교재 어느파일에 이 플렉스 내용이 들어있는지요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 시험을 쳤습니다!!
잘 만들긴 했는데요.. 집가면서 생각해보니까 빠트린게 조금 있어서 혹시나 실격이나 탈락할까봐 질문 드립니다. 제가 세로형을 풀었는데요 제가 비번을 A010으로 했는데 혹시 비번이 C010이 였다면 실격일까요..? 비번을 맞게 했다고 치고 title태그에 주제명을 안넣고 그냥 기본값으로 하고, 하단메뉴를 a태그 감싸야하는데 그것 못했습니다. 이 두가지 빼고는 다 잘했는데 혹시나 두개로 실격이나 불합격이 될까요..?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css외부링크시 실시간미리보기 적용이 안됩니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B1 혼자서 했는데요 문제가 있습니다..
브라우저 크기를 줄일 때는 정상적으로 나오다가 브라우저크기 초기화(100%)로 하면은 삐져나오는데 무슨 방법 없을까요..? 크기 85% 초기화 (100%)
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
33.3%??
따라하고 있는데 새로 만들었을 때 강의는 둘 다 제목부분에 100%로 뜨던데 저는 logo는 100%지만 slide는 33.3%로 나옵니다. 이거 상관없는건가요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
a태그로 텍스트를 묶었는데 링크가 생겨요.
navi 를 만드는데 밑에처럼 텍스트에 링크가 들어갑니다! <a href="#none">탑</a> 갑자기 a 태그로 묶으면 텍스트가 전부 링크처럼 밑줄이 생겨서 어떻게 해야 하나요?ㅠ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오 세팅부분
선생님 ㅠㅠ 비주얼 스튜디오 설치 및 사용법 영상 보면서 따라하는데, 여기서 우클릭 누르면 폴더추가가 있어야하는데 저에겐 왜 이런식으로 보일까요 ㅠㅠ 어떻게 해야 폴더 추가 할 수 있는게 되는지 알 수 있나요 ㅠㅠ 그리고 여기서 비주얼스튜디오 시작하기에서 어떤걸로 세팅해야할까요 ㅠ? 시험장에서도 이런식으로 세팅하기가 뜨나용?ㅠㅠ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 주석
선생님! 제이쿼리는 주석 단축키 입력시 /* */ 이렇게 나오지 않고 // 이렇게 뜨는데 이유를 알수있을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
메뉴에 padding-top을 주면 계단식으로 변합니다.
.menu 부분에 padding-top 값을 부여하면 계단식으로 변하는데 어떤 부분이 잘못 되었을까요? 도움 주시면 감사하겠습니다 @charset 'utf-8'; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { height: 100px; width: 1200px; margin: auto; position: relative; z-index: 10; } header > div { height: 100px; } .header-logo { line-height: 130px; width: 200px; float: left; } .navi { width: 600px; float: right; margin-right: 20px; } .content-inner {} .slide { width: 1200px; margin: auto; margin-bottom: 20px; } .slide > div { border: 1px solid blue; height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; } .items > div { height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .banner img { width: 95%; } .footer-inner { border: 1px solid green; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid yellow; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid #000; height: 50px; } .family-site{ width: 200px; } /* Slide */ .slide { position: relative; height: 300px; width: 1200px; overflow: hidden; } .slide > div { width: 100%; width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab1, .tab2 { border: 1px solid black; padding: 0 15px; height: 150px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid black; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; } .sub-menu { border: 1px solid black; background-color: #fff; } .sub-menu a { display: block; padding: 5px; color: #fff; } .sub-back { width: 1200px; height: 140px; background-color: #000; position: absolute; left: 0; top: 100%; z-index: -1; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험전 궁금한 부분!
질문1) 공지사항 문안 뒷부분(날짜) 잘려서 보이는 이유 (아래 사진에 빨간색 동그라미 부분) 질문2) Copyright 문안 줄바꿈 기준 가로형 레이아웃의 경우는 .copyright 의 width가 넓어서 상관없는데 세로형 레이아웃의 경우 줄바꾸기가 사진과 같이 애매해지는데 아무데나 줄바꿈 해도 되는지 혹은 폰트사이즈를 줄여도 상관없는지 궁금해요! 폰트사이즈는 최소사이즈가 따로 정해져있을까요? (아래 사진에 파란색 동그라미 부분) 질문3) 혼자 한번 해보았는데 전체적으로 문제 없는지 궁금해요! 질문4) 곧 시험인데 추가로 주의할만한 사항 따로 있을까요? html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Vallery Festival</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <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">Festival소개</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> <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> </ul> </div> </header> </div> <div class="right"> <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"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>운영위원장 후보자 추천을 받고 있습니다.</em><b>2020.01.09</b></a> <a href="#none"><em>홈커밍데이 진행위원회 결과를 다운로드 받으세요.</em><b>2020.01.07</b></a> <a href="#none"><em>카드결제 무이자 이벤트 한시적 10월 20일까지</em><b>2019.12.31</b></a> <a href="#none"><em>보안강화 시스템 작업 안내 공지</em><b>2019.12.20</b></a> <a href="#none"><em>부여 가을연꽃축제 10주년 콘서트 축제</em><b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </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 class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-header.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="familysite"> <select> <option value="">FamilySite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </footer> </div> </div> <!-- Modal --> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. <br><br> 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. <br><br> 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <!-- Modal --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> css @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container { width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} header > div {} .header-logo { height: 100px; line-height: 130px; } .navi { height: 400px; } /* Navigation */ .menu { list-style: none; padding: 0; position: relative; width: 90%; margin: auto; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: -30px; left: 100%; width: 100%; height: 200px; background-color: #000; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide */ .slide { width: 800px; height: 350px; overflow: hidden; } .slide > div { width: 2400px; font-size: 0; animation: slide 10s linear infinite; } .slide > div a {} .slide > div a img {} @keyframes slide { 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -800px; } 65% { margin-left: -800px; } 70% { margin-left: -1600px; } 95% { margin-left: -1600px; } 100% { margin-left: 0; } } .items { overflow: hidden; margin-top: 20px; } .items > div { height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; } .tab-inner .btn {} .tab-inner .btn span { border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; text-align: center; } .tab1, .tab2 { border: 1px solid #000; height: 160px; padding: 0 10px; } .tab1 a { display: block; border-bottom: 1px solid #000; padding: 5px; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em, .tab1 a b { float: left; } .tab1 a em { font-style: normal; width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; width: 30%; text-align: right; } .tab2 { text-align: center; } .tab2 a {} .tab2 a img { padding-top: 40px; width: 80px; } .tab2 a img:hover { opacity: 0.6; } .shortcut { text-align: right; width: 200px; } .shortcut:hover { opacity: 0.6; } .shortcut img { width: 95%; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; text-align: center; } .footer-logo { width: 200px; line-height: 130px; } .copyright { width: 400px; padding-top: 20px; } .familysite { width: 200px; line-height: 100px; } /* Modal */ .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); display: none; } .modal-content { width: 350px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; } .modal-content h2 {} .modal-content p {} .close-modal { border: 1px solid #000; float: right; padding: 5px 10px; } 제이쿼리 $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
IE에서 공지사항 갤러리탭이 안되요
active 준것이 IE환경에서 적용이 안되요 왜 안될까요 ??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
주석처리
선생님 실기시험때 html이나 css 그리고 제이쿼리에 구분하려고 주석 넣으면 감점이 될까요? (예를들면 modal 이나 navigation 혹은 news & gallery 등이요!) 밑 사진에 Navigation 처럼 중간중간 주석들어가있으면 감점인지 궁금해용ㅜ!!