월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 칸
C2타입 공지사항 부분 하고 있는데, items 부분 총 800px을 300,300,200으로 나눴거든요! 근데 글이랑 날짜가 한 줄에 다 안들어오고 내려가요ㅠㅠ 칸이 적어서 그런거 같은데.. 이런 경우는 폰트사이즈를 조절해야 할까요? 아니면 300px보다 늘려서 400px로 하면 한줄로 다 들어오긴 하는데, 이렇게 되면 공지사항 부분하고 갤러리 부분하고 width값이 보통 같게 하는데 400,400,0 이 돼서 안될거같은데.. 이런 경우에는 어떻게 해야되나요?!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 오류
제이쿼리 구문이랑 html에 제이쿼리도 연결 했는데 제이쿼리 구문에 빨간색 동그라미로 X 뜨는건 왜 그런건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
갤러리 탭에서 패딩 탑줄때
갤러리 탭에서 이미지에 패딩탑 값줄때 .gallery .tab말고 .gallery .tab img에 padding 값 주면 안되나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A타입 와이어프레임만들고 공지사항,갤러리 구성
삭제된 글입니다
- 미해결[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() })