월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
헤더로고 포토샵 제작부분 질문있습니다.
A3,A4, B3,B4, C3,C4 유형에서 Header 폴더에 제공된 로고를 삽입한다. 로고의 색은 과제명(가.주제)에 맞게 반드시 변경하여야 한다. ※ 로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다. (가로세로 비율을 유지하며 크기변경 가능) 이렇게 제작하라고 나오는데 헤더 로고 원본이미지를 색상변경하는거고 가로세로 비율 종횡비을 유지하라는 말이 잘 모르겠는데 어떻게 해야될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달 창은 뜨는데 모달백그라운드 컬러가 안먹히는 이유를 모르겠어요ㅜㅜ
아래 css에서 문제가 있을까요??ㅜㅜ .modal { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .modal-content { background-color: #fff; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%,50%); width: 350px; padding: 20px; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.541); display: none; } .close-modal { float: right; border: 1px solid #000; display: inline-block; width: 50px; padding: 3px; box-sizing: border-box; text-align: center; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
브라우저에 아무것도 보이지 않습니다.
안녕하세요. 강의 보면서 연습하는 중에 차례로 잘 따라하다가 CSS 컨테이너에 red라인을 넣었는데도 브라우저에서 아무것도 보이지가 않습니다. 잘못 입력된건 없는 것 같은데 뭐가 원인인지 도저히 모르겠어서 문의 드렸습니다. - 인터넷에 CSS 링크 연결 오류와 관련해 검색 해보고 크롬 캐시도 삭제 해보고 HTML에 연결된 CSS 링크에 ?ver=1, ?afer를 붙이는 등 여러 방법을 썼는데 계속 안보입니다. 제가 뭘 잘못한건지... - 평소 연습 할 때 '[다운로드] 이론학습 및 모듈제작 실습 폴더' 열어서 연습하는데 이번에는 바탕화면에 폴더를 새로 만들고 시작을 했습니다. 그 과정에서 뭔가 잘못된건지... 답답한 마음에 질문 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML5 시멘틱 태그로 CSS 레이아웃</title> <link rel="stylesheet" href="style.css?ver=1"> </head> <body> <div class="container"> <header> <article></article> <article></article> </header> <section class="box1"></section> <section class="box2"> <article></article> <article></article> <article></article> </section> <footer></footer> </div> </body> </html> ------------------------------------------------ .container { border: 1px solid red; width: 1200px; } header {} header article {} .box1 {} .box2 {} .box2 article {} footer {} <폴더위치> <브라우저>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
주제 관련 문의합니다.
안녕하세요. 실기 시험 볼 때 안내되는 시험 주제의 사이트를 총 3개를 만드는 건지 아니면 하나를 만드는건지 궁금합니다. 시간은 총4시간인데 ABC 형을 총 3개를 만드는 것이 맞는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비쥬얼 스튜디오 코드 사용중 질문
비쥬얼스튜디오 코드에서 js파일을 제작할때 따옴표가 쌍따옴표로 됩니다.브라켓에서는 홑따옴표였는데 차이가 있는지? 그리고 비쥬얼코드에서 addClass나 toogleClass는 예약어가 나오지 않던데 설정이 더 필요한지 문의드립니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
클래스 네임 관련하여 질문이있습니다.
안녕하세요 header와 footer에 클래스 네임을 주지않는 이유가 따로있나요? 자식선택자로 div가 있는데 클래스 네임이 없는 이유가 궁금합니다. 감사합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
border 디자인 및 공지사항 디자인
1) 가로 네비게이션에서 서브메뉴 a태그 갯수로 인해 이렇게 되는 부분은 어떻게 해결하면 좋을까요? 저부분에 border가 없습니다. 2) .btn span에 margin-bottom:-5px; 이라 입력했는데 위의 이미지처럼 span보다 아래 보더가 위로 올라오는데, 뭐가 잘못된걸까요? 다시 검토해보아도 잘못된 부분을 못찾겠습니다
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
navigation 뒤로 구현되고 있어요.
안녕하세요. 선생님 css에서 position: relative; 와 z-index:10px; 기입하고 나서 두번째 사진처럼 뜹니다. 앞으로 나오게 하려면 어떻게 해야 하나요? header { width: 1200px; height: 100px; margin: auto; position: relative; z-index:10px }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
Navigation 리스트가 뜨지 않아요.
B-4 산업대학교 Navigation 문의 드립니다. 아래 사진처럼 sub-menu 클릭 후 리스트가 조회가 되지 않아요. Navigation의 검정색 배경이 클릭한 상태입니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
내년 실기준비
내년 실기를 준비해야되는데요 블라켓츠는 이제 사용하지않나요? vsc로 연습하면될까요? 완전 초보인데 이강의 1강부터 따라가면될까요? 초보가 접근하기 쉬운 방법 좀 부탁드립니다...
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
안녕하세요 이번에 처음 웹디자인 기능사 실기시험을 준비하고 있습니다
수험표를 출력하면서 보니까 플러그인을 설치할 수 없다고 되어있는 부분이 있는데 어떤건지 궁금해서 문의 남깁니다 여기서 말하는 플러그인이 강의시간에 알려주신 , 추가로 설치해서 빠르게 완성할 수 있도록 알려주신 확장?다운로드가 안된다는걸까요?? (저는 현재 비쥬얼 스튜디오를 사용하고 있습니다)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인 실기 원서접수 관련
안녕하세요. 오늘 웹디자인기능사 실기 원서접수를 했는데요. 궁금한게 있어 문의 남깁니다. 시험 장소의 시설현황을 보니 블라켓 설치가 되어 있지 않는데 어떻게 해야 하나요? 강의 열심히 들으려고 해요 잘 부탁드립니다.^^
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
확장 기능 관리자
cnc확장기능관리자를 통해서 emmet을 검색해서 넣을려고 하는데 검색기능이 안되네요. 검색기능부분이 눌러지지 않아요. 무슨 문제때문일까요? 아래 부분에는 확장기능 레지스트리에 액세스 할 수 없습니다. 나중에 다시 설치 하십시오. 라고 떠있어요. 그리고 brakets을 열때 위와 같은 창이 뜨는데 무슨 문제일까요? + 추가 인터넷으로 방법을 찾아보다가 인터넷 연결이 안되면 검색이 안된다는 글을 봤어요. 근데 노트북으로 구글이나 그밖에 웹브라우저를 사용하고 있다는 것은 인터넷이 연결되어있는 것이 아닌가요?ㅠㅠ 제가 이 부분에 대해 잘 몰라서 다른 의미가 있는 건가 싶어요.. 인터넷없이 할 수 있는 방법으로 emmet을 확장 기능 관리자 내 검색을 통해 넣는 방법 아니라, zip으로 다운받아 아래에 드래그해 붙여넣어서 설치를 했어요. 설치됨에 emmet이 뜨는데 작동을 안해요. 확장 기능 관리자 창을 닫고 확인해보니 도움말 옆에 emmet이 뜨지 않고, !나 html:5+tap을 눌렀는데 안되요. 원인과 해결방법을 알려주시면 감사하겠습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
합격했습니다
오늘 드디어 3회차 실기 합격자 발표가 났어요! 결과는 합격입니다~ 다른거 신경쓰다 용량확인 안하고 제출하는 바람에 찜찜했는데... 열흘 전에는 혹시 용량초과로 실격일까 걱정했는데 합격 통지를 받고나니 점수가 왜 85점일까, 어디서 15점이나 깎였을까하는 생각이 드네요.. 사람 마음이 참...ㅎㅎ 그래도 선생님 덕분에 합격했습니다. 감사합니다. 다른 분들도 좋은 강의가 많겠지만 작년 가을에 이 시험 준비하면서 좋다는 강의 꽤 들어봤었는데 뭔가 복잡하고 기본 개념이나 그런건 알려주지 않으면서 시험은 그냥 외워서 보면 된다는 주입식 강의가 맘에 들지 않아 시간을 갖고 제대로 공부해보려고 올해로 미뤘거든요 그러다 인프런에 선생님 강의가 있는 것을 보고 작년에 유튜브에서 선생님 영상을 접하고 '이건 좀 다르네 찮은데~' 했던 기억이 나서 이 강의로 공부하고 합격까지 하게 됐습니다. 이제 다음 순서는 어떤 강의를 들으면 좋을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 B1 타입 연습중에 질문이요
■ 질문 남기실 때 꼭! 참고해주세요. <!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="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="로고"></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> </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="slide"> <div> <a href="#none"><img src="images/slide1.jpg" alt="슬라이드배너1"></a> <a href="#none"><img src="images/slide2.jpg" alt="슬라이드배너2"></a> <a href="#none"><img src="images/slide3.jpg" alt="슬라이드배너3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a href="#none">골든라이프 서비스 오픈안내</a> <a href="#none">재난기본소득 신청 안내</a> <a href="#none">오픈뱅킹 대상기관 확대 안내</a> <a href="#none">간편결재 이벤트 안내</a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery1.jpg" alt="갤러리1"></a> <a href="#none"><img src="images/gallery2.jpg" alt="갤러리2"></a> <a href="#none"><img src="images/gallery1.jpg" alt="갤러리3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="바로가기"></a> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="푸터로고"></a> </div> <div class="copyright"> <div> <a href="#none">이용상담</a> <a href="#none">보안프로그램</a> <a href="#none">사고신고</a> <a href="#none">개인정보처리방침</a> <a href="#none">신용정보활용체제</a> </div> <div>Copyright KB Kookmin Bank. All Rights Reserved</div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.min.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; * {margin: 0; padding: 0;} ul {list-style: none;} a {text-decoration: none; color: #333;} body { background: #fff; color: #333; font-size: 15px; font-family: "맑은 고딕"; line-height: 25px; } .container {} .header-inner { width: 100%; height: 100px; background: #eee; } header { width: 1200px; margin: auto; position: relative; z-index: 10; } header > div { height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide { width: 1200px; margin: auto; } .slide > div { height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; } .items > div { height: 200px; float: left; box-sizing: border-box; padding-top: 5px; } .news { width: 600px; } .banner { width: 300px; } .shortcut { width: 300px; } .footer-inner { width: 100%; height: 100px; background: #eee; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .copyright div { height: 50px; } /* 이미지&텍스트 */ .header-logo, .footer-logo { line-height: 9em; } .copyright div{ text-align: center; } .copyright div a { display: inline-block; padding: 5px; margin-top: 20px; } .copyright div a:hover { text-decoration: underline; } /* 슬라이드 배너 */ .slide { position: relative; overflow: hidden; height: 300px; } .slide > div { width: 3600px; float: left; 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; } } /* 네비게이션 */ .menu { margin-top: 3.5em; } .menu li { width: 150px; float: left; background: #fff; text-align: center; } .menu li > a { display: block; padding: 10px; font-weight: bold; border: 1px solid #000; transition: 0.5s; } .menu li:hover > a { background: #000; color: #fff; } .sub-menu { border-bottom: 1px solid #000; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background: #000; color: #fff; } .menu li:nth-child(1) .sub-menu { border-left: 1px solid #000; } .menu li:nth-child(4) .sub-menu { border-right: 1px solid #000; } .menu li:nth-child(3) .sub-menu { padding-bottom: 10px; } .menu li:nth-child(4) .sub-menu { padding-bottom: 10px; } /* 공지사항&갤러리 탭 */ .tab-inner { width: 98%; margin: auto; } .btn {} .btn span { display: inline-block; padding: 5px; width: 120px; text-align: center; border: 1px solid #000; border-radius: 5px 5px 0 0; background: #eee; border-bottom: none; margin-bottom: -1px; font-weight: bold; margin-right: -6px; } .btn span.active { background: #fff; } .tabs {} .tabs > div { border: 1px solid #000; height: 155px; box-sizing: border-box; } .tab1 { padding: 0 10px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab2 { display: none; } .tab2 a img { width: 180px; display: inline-block; padding: 5px; } /* 네비게이션 */ $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) /* 공지사항&갤러리 탭*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }) 선생님, B1타입 연습중에 items 부분에 문제가 생겨서 도저히 뭐가 잘못됐는지 찾질 못해서 이렇게 문의 드립니다. 이거 가지고 몇시간째 넘어가질 못하고 있네요... 공지사항 갤러리 탭 하는 과정에서 이렇게 배너부분과 바로가기 부분이 공지사항 div 뒤로 숨어버렸어요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css에서 charset 설정
css에서 charset utf-8로 설정하는데 설정하고 밑에 바디랑 a태그 기본 셋팅하려고 할때 앞에 띄어 쓰기가 되고 코딩 검사할 때도 이렇게 뜨는데 뭐가 문제인건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인 실기시험
선생님!! 웹디자인 기능사 실기시험 라이브서버 안될경우 왼쪽ㅇㅔ는 프로그램 오른쪽에는 브라우저를 열고 새로고침하면서 하라고 하셨는데 , 인터넷 연결도 안된다고 들었는데 브라우저 연결이 가능한가요?,,, 저는 비주얼스튜디오코드를 사용할 예정인데 그냥 폴더에서 index.html 을클릭하면 되는건지 어떻게 브라우저를 여는지 알려주시면 감사하겠습니다...
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험 막 치고 왔네요. @로 시작하는 명령어만 코드힌트 안나오는 경우
9월 2일 시험을 마치고 왔는데 역시 시험이라 긴장감에 멘탈이 흔들리더군요. 특히 @치고 난후 코드힌트가 안나와서요. 다른 건 예를 들어 fz 적고 탭키 누르면 바로 font-size 나왔어요. @charset이 안적혀서 직접 코딩했구요. 다른 건 특별히 에러가 나거나 하진 않았는데 그부분에서 제가 @charset:"utf-8";이라고 적은거 같아서 요. 그러고 다른 작업 코딩한다고 다시 확인을 못했는데 이것때문에 떨어지거나 하진 않겠죠? 시험은 대한투어가 나왔습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사시험
선생님 안녕하세요!! 9/5일에 웹디자인기능사 실기시험에 프로그램은 Visual studio code 을 사용하려하는데 만약 라이브서버 기능이 안된다고 하면 작업하고 있는 화면을 어떻게 확인하면 되는지 알려주세요ㅜㅜ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 웹디자인 기능사 시험치고 왔는데요.....
선생님 웹디자인 기능사 시험치고 왔는데요, 12번 Vally Festival이 시험으로 나왔어요.... 슬라이드가 이미지만 바뀌면 안되고, 이미지가 좌에서 우 또는 우에서 좌로 이동하게 하라고 해서.....이렇게 코드를 넣었고요... /*slide*/ .slide{ position: relative; width:800px; height: 350px; overflow: hidden; } .slide > div{ width:2400px; font-size: 0;/*font-size: 0;해야 width:3600px;이 되어 이미지가 가로로 배치된다*/ position: absolute; top:0; left:0; animation: slide 8s 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는 제가 말줄임표를 태그가 기억이 안나서,,, 제가 임의로 짤랏고요... 그리고.... .modal-content에 transform: translate(-50%, -50%); 넣는걸 깜빡했어요.... 나머지는 잘 했는데,,,, 합격할 수 있을까요? 네비게이션 작동도 잘됬었고, 슬라이드도 잘됬는데 합격 할수 있을까요?