월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 제거 좀 이상한데요 ㅠㅠ 푸터가 안나와요 ㅠㅠ
<!Doctype html> <html lang="ko"> <head> <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><!--left--> <div class="right"> <div class="slide"> <div></div> </div><!--slide--> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div><!--items--> </div><!--right--> <footer> <div class="footer-logo"></div> <div class="copyright"></div> </footer> </div><!--container--> </body> </html> css는요 .container{ width:1000px; overflow:hidden; } .container > div{ /*border:1px solid blue;*/ height:800px; float:left; box-sizing:border-box; } .left{ width:200px; } .right{ width:800px; } header{} header > div{ border:1px solid red; } .header-logo{ height:100px; } .navi{ height: 400px; } .slide{} .slide>div{ border:1px solid green; height:350px; } .items{ overflow: hidden; } .items > div{ border:1px solid black; height:200px; float:left; box-sizing:border-box; /*해도 안올라감 .container > div에 left에 border:1px solid blue;가 있기때문이다.*/ } .news{ width:300px; } .banner{ width:250px; } .shortcut{ width:250px; } footer{overflow:hidden;} footer > div{ border:1px solid pink; height:100px; float:left; box-sizing:border-box; } .footer-logo{ width:200px; } .copyright{ width:600px; } .copyright div{ border:1px solid black; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
a태그 사용했을때 글자색 밑줄
저는 a태그를 사용하면 무조건 처음에는 글씨에 밑줄이랑 색상이 파란색으로 나타나는 코딩웍스님은 밑줄도 없고 글자색도 검은색으로 나타나는데 왜 그런건가요?매번 a태그 사용하면 글자색 밑줄 둘다 해줘야해서 불편하더라구요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
가로배치하기 clear:both 실습중에서요
자식요소에 float값을 주면 부모요소는 높이값을 잃는다고 했는데, 예제에서는 부모요소인 parent에 overfloww: hidden을 주지 않았음에도 왜 넘치지 않는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
에밋이 적용이 안 되는 문제 해결책을 찾았습니다
블라켓츠를 다시 깔아보기도 하고 에밋을 지웠다가 다시 깔아보기도 하고 올려주신 pdf 파일대로 설정을 바꾸기도 했는데 계속 안되다가 오른쪽 하단에 파일 설정을 text에서 html으로 바꾸니 정상적으로 작동하네요! 혹시 다른 분들도 몰라서 헤메실까봐 답글 남깁니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
블라켓츠 강의를 다 들은 후 비주얼 스튜디오 강의를 꼭 수강하여야 하나요?
시험장에서 두 개의 프로그램을 전부 사용하는지 궁금합니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
저는 에밋이 사용이 안 됩니다ㅠㅠ
html:5나 !를 입력하고 커서를 오른쪽에 둔 후 TAB키를 누르면 들여쓰기가 되고 에밋이 작동을 하지 않습니다. 어떤 게 문제일까요? 또한 새 파일을 만들었을때 파일명 수정을 하려고 하면 계속 오류메세지가 뜹니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
section태그 타이틀 블라인드 처리에 관련하여 질문드립니다.
div 대신 section 을 활용할 시 타이틀을 블라인드 처리하여 사용해도 되는지 문의드립니다. .blind { width: 1px; height: 1px; margin: -1px; position: absolute; overflow: hidden; clip: rect(0,0,0,0); }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
복습 중에 제이쿼리가 작동을 안합니다...
안녕하세요..! 필기 시험 합격 후에 제이쿼리 복습 중입니다. 아무리... 제이쿼리 파일을 다시 만들고 작성해봐도 active가 안먹어요... div에 class='box'로 클래스 줘서 해봐도 안되네요... 뭐가 문제일까요...?ㅠㅠ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
21년도 3회 웹디자인기능사 실기부터 vsc 설치된다고 하는데요.
21년도 3회차 실기부터 visual studio code 소프트웨어 설치 된다고 하는데 그럼 실기 연습시 블라켓말고 vsc로 연습해도 되나요? 에밋 자동설치되어있어서 시험장 가서 emmet 없을까봐 고심하지 않아도 될 거 같아서요.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
Tab Menu 제이쿼리 작성시 this
/* Tab Menu */ /* 1.Tab 기능먼저 2.active 넣기 */ $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) 꼭 여기서 this로 받지 안아도 상관이 없던데 this를 꼭 써야하는 경우가 있는건가요? this를 활용해야 할때가 언제인지 잘 모르겠습니다 알려주세요 ㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달창
선생님 안녕하세요!! 마지막으로 연습중인데 모달창을 만들었는데 html, css 모달창만든 부분을 눌러놓으면 홈페이지에 실시간으로 첨부사진처럼 파랗게뜨는데 그게 transform 적용하기 전의 좌표쪽에 표시되는거같아서 이건 괜찮은건지 여쭤봅니다. 모달창 기능은 잘되고있고, 홈페이지켰을때는 아무문제없어보이는데 여쭤봅니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
slide 너비값과 포지션 엡솔루트 2가지 질문 드립니다!
html -------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01슬라이드-타입01</title> <link rel="stylesheet" href="css/01style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="content"> <!-- Slide Animation --> <div class="slide"> <!-- position : relative --> <div> <!-- position : absolute --> <a href="#none"><img src="img/slide-01.jpg" alt="slide-01.jpg"></a><!-- a태그 반드시 필요 --> <a href="#none"><img src="img/slide-02.jpg" alt="slide-02.jpg"></a> <a href="#none"><img src="img/slide-03.jpg" alt="slide-03.jpg"></a> </div> </div> <!-- Slide Animation --> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="family-site"></div> </footer> </div> </body> </html> -------------------------- css -------------------------- .container { width: 1200px; margin: auto; border: 10px solid red; } header { height: 100px; border: 1px solid #333; } header > div { height: 100px; } .header-logo { border: 1px solid #333; width: 200px; float: left; } .navi { border: 1px solid #333; width: 600px; float: right; } .content {} .content > div {} /* Slide Animation */ .slide { /* border: 5px solid red; */ position: relative; height: 300px; /* 매우중요 : 자식div에 absolute때문에 높이값을 잃어버림, 때문에 부모요소에 명시해줘야함 */ overflow: hidden; } .slide > div { width: 3600px; height: 300px; /* border: 5px solid #333; */ 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; } /* 이동 */ } /* Slide Animation */ .items {} .items > div { height: 200px; border: 1px solid #333; float: left; box-sizing: border-box; } .news { width: 400px; } .banner { width: 400px; } .shortcut { width: 400px; } footer { clear: both; overflow: hidden; } footer > div { height: 100px; border: 1px solid #333; float: left; box-sizing: border-box; } .footer-logo { width: 300px; } .copyright { width: 700px; } .family-site { width: 200px; } -------------------------- .slide에 width 값 1200px는 필수가 아니라고 하셨는데요 그 이유가 .container에 width :1200px 를 주었기 때문에 필수가 아니라고 하신거 맞죠?? .slide는 블럭 요소이고 .container에 100% 차니까요.. 그래서 저도 이 코드에서 .slide에서 width : 1200px를 주지 않았는데, 이상하게 나옵니다. 그리고 한가지 질문이 더있는데요 position :absolute 를 준 요소는 높이값과 너비값 모두 잃어 버리게 되는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이어 팝업창 문의
세로형2칼럼레이아웃에서 팝업창 만들때 밑에 사진 처럼 입력했는데 디자인이 안나와요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달 레이어 팝업창 문의
삭제된 글입니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
<link rel="stylesheet" href="css/style.css" > 이렇게 써야하나요?
<link rel="stylesheet" href="css/style.css" type="text/css">시험볼때 이렇게 써야할까요? <link rel="stylesheet" href="css/style.css" >아님 이렇게 써야하나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
modal 창이 열리질 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</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="logo-head"></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 class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <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="btn-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-12</b></a> <a href="#none">개교 100주년 기념 야외 오페라 초청<b>2016-09-10</b></a> <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a> <a href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-07</b></a> <a href="#none">진행위원회(정회원) 선발 결과 <b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="btn-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gllery1"></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="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> </div> <div>상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49</div> </div> <div class="family-site"> <select> <option value="">패밀리 사이트:</option> <option value="">산업대학교</option> <option value="">정보통신부</option> <option value="">과학기술연구원</option> </select> </div> </footer> </div> </div> <div class="modal"> <div class="modal-content"> <h2>2020년도 장기인턴십 참가학생 모집</h2> <p> 산업대학교 2020년도 장기인턴십 참가학생 모집에 참가할 학생을 모집하오니 많은 관심있는 학생들의 지원 부탁드립니다. 재학생 최종선발학생은 2020학년도 1학기 코업, 코업프로젝트 교과목을 반드시 수강해야 합니다. 졸업학점 6학점 인정되며 매칭기간으로 전화문의가 많아 통화가 어려우니 문의는 가급적 이메일로 부탁드립니다. 참고사항으로 2020학년도 1학기 교과목 수강신청이 불가한 졸업자, 2020년 2월 졸업 예정자 및 수료자는 지원 불가합니다. 착오 없으시길 바랍니다. 자세한 문의사항은 현장실습지원센터 홈페이지를 참고해주세요. </p> <div class="close-modal">x 닫기</div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> ============================================ @charset 'utf-8'; body{ margin: 0; background-color: #fff; color: #222328; font-size: 15; } color{ text-decoration: none; color: #222328; } a{ text-decoration: none; } .container{} .header-inner{ /*border: 1px solid black;*/ background-color: #eee; } header{ height: 100px; width: 1200px; margin: auto; position: relative; z-index: 5; } header > div{ /*border: 1px solid black;*/ height: 100px; } .header-logo{ width: 200px; float: left; line-height: 130px; } .navi{ width: 600px; float: right; margin-right: 20px; } .content-inner{} .slide{ width: 1200px; margin: auto; } .slide > div{ border: 1px solid green; height: 300px; } .items{ width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 425px; } .gallery{ width: 425px; } .banner{ width: 350px; } .footer-inner{ /*border: 1px solid red;*/ background-color: #eee; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer > div{ height: 100px; /* border: 1px solid black;*/ float: left; box-sizing: border-box; } .copyright{ width: 1000px; float: left; } .copyright div{ height: 50px; /* border: 1px solid black;*/ text-align: center; } .copyright div:nth-child(1){ padding-top: 15px; box-sizing: border-box; } .copyright div:nth-child(1) a:hover{ text-decoration: underline; } .family-site{ width: 200px; line-height: 100px; text-align: center; } /*슬라이드*/ .slide{ overflow: hidden; } .slide > div{ width: 3600px; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -1200px; } 65% { margin-left: -1200px; } 70% { margin-left:-2400px; } 95% { margin-left:-2400px; } 100% { margin-left: 0; } } /*공지사항*/ .btn-inner{ width: 95%; margin: auto; } .btn{} .btn span{ display: inline-block; border: 1px solid black; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px;----- } .tab1, .tab2{ border: 1px solid black; padding: 0 15px;----- height:160px; } .tab1 a{ display: block; padding: 5px; border-bottom: 1px solid #ddd; text-decoration: nonel } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ text-align: center; padding-top: 23px; padding-bottom: 10px; } .tab2 img{ width: 120px; } .banner img{ width: 95%; } /*navi*/ /* .menu{} .menu li{} .menu li > a{} .sub-munu{} .sub-menu a{} */ .menu{ list-style: none; padding: 0; } .menu li{ /*border: 1px solid black;*/ display: black; float: left; width: 25%; box-sizing: border-box; margin-top: 51px; text-align: center; } .menu li > a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ /*background-color: #fff;*/ /*border: 1px solid black;*/ display: none; } .sub-menu a{ display: block; padding: 5px; color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color: #222328; } .sub-back{ width: 1200px; height: 150px; background-color: #000; position: absolute; top:100%; left: 0; z-index: -10; display: none; } /*modal*/ .modal{ background-color: rgba(0, 0, 0, 0.46); position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content{ width: 350px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0.13); } .close-modal{ float: right; border: 1px solid black; border-radius: 5px; padding: 0 10px; } ============================================= /*navi*/ $('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .sub-back').stop().slideUp() }) /*modal*/ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A3 ~ A4 헤더 영역
선생님께서 알려주신 방법대로 A1 ~ A2 타입은 잘 해결하였습니다! 그런데 A3 ~ A4 공개문제에서 헤더 로고 포토샵 지시 사항에서, " Header 폴더에 제공된 로고를 삽입한다. 로고의 색은 과제명에 맞게 반드시 변경하여 한다"에서 색 변경은 어떤 걸 의미하는 걸까요.. 예를 들어 이미 header 폴더에 제공된 로고 사진 +로 워드 타입 로고를 색 변경해서 새로 생성해서 합치라는 의미인 건가요.. 포토샵 문제로 감점될 까봐 완벽하게 이해하고 싶은데 A3 ~ A4 타입의 헤더 로고 지시사항 자체가 이해가 되지 않아서 어떻게 해결해야 되는 지 궁금합니다 ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
포토샵 저장 경고
선생님 안녕하세요! 1. 포토샵에서 로고 등을 제작 후 웹으로 저장을 눌러서 저장을하려고 하면 첨부사진과 같이 경고문?이 뜨는데 괜찮은건가요?? 경고문이 나고나서 확인버튼을 누르면 저장되기는 하지만 혹시몰라 여쭤봅니다! 2. 그리고 로고는 배경 흰색도 아예 지워야하는것 맞나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
로고사이즈, 네비게이션 서브메뉴
선생님 안녕하세요! 1. 로고 사이즈를 200x40 픽셀로 적혀있지않고 가로 세로 비율을 유지하여 하라고 하면 어떻게해야하나요?? (b4타입에 그렇게 적혀있어 여쭤봅니다) 2. 네비게이션 서브메뉴 내용이 각각 4개 4개 3개 3개 이런식으로 다르다면 네비게이션 5가지 유형중 3,4번 유형일 경우엔 서브메뉴 크기를 같게하려면 .sub-menu에 높이값을 지정해주면 되는것일까요? 3. 세로 2컬럼할때 문제 내용에선 로고크기를 200x40으로 하라고 적혀있는데 그렇다면 와이어프레임을 제작할땐 높이값을 100으로 주고 포토샵에서 로고를 제작할땐 세로를 40으로 주면 되는것일까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험 파일 제출 시 질문드립니다.
수험자 제공파일에 있는 jquery-1.12.4.js 파일은 그냥 마우스 우클릭해서 복사하기 한 후에 본인 비번호 폴더안 스크립트 파일에 붙여넣어기만 해도 되나요?