월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
type="text/css" 질문
<link rel="stylesheet" href="style.css" type="text/css"> 이렇게 적는 경우도 있던데 type="text/css"이 무엇인지, 적는 경우와 적지 않는 경우의 차이가 궁금합니다. 또 여기서는 <link>가 아니라 <style>태그 옆에 적은 이유가 뭔지 궁금해요.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 하이퍼링크 밑줄이 사라지지않아요
/*html*/ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>세로 레이아웃-1</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo">로고</div> <div class="navi"> <!--navi--> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> </ul> <!--navi--> </div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slide01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide03.jpg" alt="slide2"></a> </div> </div> <div class="contents"> <div class="news">공지사항/갤러리</div> <div class="banner">배너</div> <div class="shortcut">바로가기</div> </div> <footer> <div class="footer-logo">로고</div> <div class="copy"> <div>하단메뉴</div> <div>copyright</div> </div> </footer> </div> </div> <script src="script/jquery-3.6.0.min.js"></script> <script src="script/custom.js"></script> </body> </html> /*css*/ .container{ width: 1000px; /*border: 1px solid red;*/ overflow: hidden; } .container > div{ float: left; box-sizing: border-box; } .left{ width: 200px; border: 1px solid pink; } .right{ width: 800px; /* border: 1px solid blue;*/ } header{} header > div{ width: 200px; } .header-logo{ height: 100px; border: 1px solid green; } .navi{ border: 1px solid red; } .slide{ height: 350px; border: 1px solid #111; } .slide > div{ } .contents{ overflow: hidden; } .contents > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; border: 1px solid #222; } .banner{ width: 250px; border: 1px solid #333; } .shortcut{ width: 250px; border: 1px solid #444; } footer{ overflow: hidden; } footer > div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; border: 1px solid #444; } .copy{ width: 600px; border: 1px solid #555; } .copy div{ height: 50px; border: 1px solid #666; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; overflow: hidden; } .slide > div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{top: 0;} 30%{top: 0;} 35%{top: -300px;} 65%{top: -300px;} 70%{top: -600px;} 95%{top: -600px;} 100%{top: 0;} } /*navi*/ .menu{ text-decoration: none; list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 15px; } .menu li{ text-align: center; text-decoration: none; } .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; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } 텍스트 데코레이션 논을 주었는데도 사라지지가 않아용,, 뭐가 문제일까요???
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
밑 질문입니다 이미지도 첨부합니다
(사진)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이미지가 넘어가지 않습니다 확인부탁드려요 ㅠ_ㅠ
/*html*/ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>가로 고정형 레이아웃-1</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <div class="containar"> <header> <div class="header-logo">로고</div> <div class="navi"> <ul class=menu> <li> <a href="#none"></a> <div class="sub-menu"> <a href="">sub-menu-1</a> <a href="">sub-menu-2</a> <a href="">sub-menu-3</a> <a href="">sub-menu-4</a> </div> </li> <li> <a href="#none"></a> <div class="sub-menu"> <a href="">sub-menu-1</a> <a href="">sub-menu-2</a> <a href="">sub-menu-3</a> <a href="">sub-menu-4</a> </div> </li> <li> <a href="#none"></a> <div class="sub-menu"> <a href="">sub-menu-1</a> <a href="">sub-menu-2</a> <a href="">sub-menu-3</a> <a href="">sub-menu-4</a> </div> </li> <li> <a href="#none"></a> <div class="sub-menu"> <a href="">sub-menu-1</a> <a href="">sub-menu-2</a> <a href="">sub-menu-3</a> <a href="">sub-menu-4</a> </div> </li> </ul> </div> </header> <div class="slide"> <div><a href="#none"><img src="images/Slide01.jpg" alt="slide-1"></a></div> <div><a href="#none"><img src="images/Slide02.jpg" alt="slide-2"></a></div> <div><a href="#none"><img src="images/Slide03.jpg" alt="slide-3"></a></div> </div> <div class="contants"> <div class="news">공지사항/갤러리</div> <div class="banner">배너</div> <div class="shortcut">바로가기</div> </div> <footer> <div class="footer-logo">로고</div> <div class="copy">copyright</div> <div class="sns">sns</div> </footer> </div> <script src="script/jquery-3.6.0.min.js"></script> <script src="script/custom.js"></script> </body> </html> /*css*/ .containar{ width: 1200px; margin: auto; border: 1px solid green; } header{ height: 100px; } header > div{ border: 1px solid blue; height: 100px; } .header-logo{ width: 200px; border: 1px solid pink; float: left; } .navi{ width: 400px; float: right; border: 1px solid pink; } .silde{} .silde > div{ height: 300px; border: 1px solid red; } .contants{ overflow: hidden; } .contants > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 500px; border: 1px solid green; } .banner{ width: 350px; border: 1px solid red; } .shortcut{ width: 350px; border: 1px solid pink; } footer{ overflow: hidden; } footer > div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; border: 1px solid green; } .copy{ width: 800px; border: 1px solid pink; } .sns{ width: 200px; border:1px solid red; } /*navi*/ .menu{ display: none; } /*slide*/ .slide{ position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div{ position: absolute; width: 3600px; font-size: 0; 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;} } 분명 이미지를 넣었을때는 3개가 밑으로 나열되있는걸 확인했는데 width:3600해도 가로로 나열되지가 않더라구요 ㅠ 키프레임을 줘도 이미지가 하나만 나옵니당..
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
요렇게 따라해보았는데요,
요렇게 따라해 보았는데요 어느부분이 잘못됐는지 공지사항 부분의 디자인이 바뀌지 않네요ㅠㅠ .tab-inner.tab a { display:block; 디스플레이 블럭을해도 텍스트가 그대로 입니다. 어디가 잘못됐을까요? <!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> <article class="header-logo">로고</article> <article class="navi">네이게이션</article> </header> </div> </div> <div class="content-inner"> <section class="slide"> <article>이미지슬라이드</article> </section> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none">SMS 발송 서비스 개선작업 <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 <b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 <b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내 <b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 안내 <b>2019.12.20</b></a> </div> </div> </article> <article class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab"> <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> </article> <article class="shortcut">바로가기c.3</article> </section> <div class="footer-inner"> <footer> <article class="footer-logo">copyright</article> <article class="footer-content"> <div>sns</div> <div>패밀리 사이트</div> </article> </footer> </div> </div> </body> </html> ----------------------------------------- css부분은 이렇게 따라해보았는데요 body{ margin: 0; font-size: 15PX; color:#222; line-height: 1.6em; background-color: #fff; } a { text-decoration: none; color:#222 } .container{} .header-inner { background-color: #eee; } header { border:1px solid #ccc; width: 1200px; margin: auto; height: 100px; } header article { height: 100px; border: 1px solid #ccc; } .header-logo { width: 200px; float: left; text-align:center; line-height:100px; } .navi { width: 600px; float: right; text-align: center; line-height: 100px; } .content-inner{ width: 1200px; margin: auto; } .slide { width: 1200px; text-align: center; line-height: 100px; clear:both; } .slide article { border: 1px solid #ccc; height: 300px; } .items { overflow: hidden; /* margin-top: 20px;*/ } .items article { border: 1px solid #ccc; height: 200px; float: left; box-sizing:border-box; width: 33.3333%; } .news {} .gallery {} .shortcut{ text-align: center; line-height: 200px; } .footer-inner { background-color: #eee; } footer { width: 1200px; margin: auto; overflow: hidden; } footer article { border: 1px solid #ccc; height: 100px; float: left; box-sizing:border-box; } .footer-logo { width: 1000px; text-align: center; line-height: 100px; } .footer-content { width: 200px; text-align: center; line-height: 100px; } .footer-content div { border: 1px solid #ccc; height: 50px; text-align: center; line-height: 50px; } .tab-inner {} .tab-inner.btn {} .tab-inner.btn span { border: 1px solid black; display: inline-block; width: 100px; text-align:center; padding: 5px; border-radius: 5px; } .tab-inner.tab {} .tab-inner.tab a { display:block; } .tab-inner.tab a b { float: right; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 갤러리 별도구성도 제이쿼리로 기능구현해야 하나요?
공지사항 갤러리 탭으로 구성할때는 색깔구분해주면서 제이쿼리로 기능구현 하는데 별도로구성할때는 그냥 html/css만 해주면되나요? 문제를보니 여기도 색깔구분이 되어있어서 질문드립니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.sub-menu와 .sub-menu a css 속성 작성 중 로유
.sub-menu a{ background-color:#fff; border:1px solid #000; } .sub-menu a{ display:block; padding:5px; } .sub-menu의 배경색을 흰색으로 지정하면 서브메뉴 목록 전체가 흰색으로 채워져야 하는데 첨부한 이미지처럼 표시됩니다. padding 값을 3px로 변경하면 얼추 맞는데....menu li를 float 한 것과 연관이 있는 건가요? 선생님과 동일하게 작서했는게 결과가 다릅니다.ㅜㅜ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 sub-menu와 sub-menu a 에서 css 속성 지정시 오류
.sub-menu{ background-color:#fff; border:1px solid #000; } .sub- menu a{ display:block; padding:5px; } 지정시 서브메뉴 4번째 목록까지 흰 배경이 채워지지 않습니다.서브메뉴 a의 패딩 때문인 것 같은데 선생님 강의 내용대로 입력했는데 결과는 왜 다를까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
구분을 하려면 각각의 .left .right에 float속성을 사용하는 것 아닌가요..? .container > div에 float속성을 주어서 왼쪽 오른쪽이 나눠지는게 이해가 안갑니다 ㅠㅠ
구분을 하려면 각각의 .left .right에 float속성을 사용하는 것 아닌가요..? .container > div에 float속성을 주어서 왼쪽 오른쪽이 나눠지는게 이해가 안갑니다 ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer에 height를 100주고 왜 footer > div에 다시 주는건가요..??
footer에 height를 100주고 왜 footer > div에 다시 주는건가요..?? 이해가 잘 안가요 ㅠㅠ
- [2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
js파일 에러
삭제된 글입니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 메서드
안녕하세요 강사님, 27. 제이쿼리 필수 핵심이론 (요소탐색 메서드 - children, siblings)의 강의를 듣던 중 이해가 안되는 부분이 있어서 글남깁니다. 이전 강의에서 강사님께서 분명 display: Inline;과 Inline-block;의 경우 부모요소에 text-align: center; 를 받아야 하며, block의 경우 margin: auto;를 받아야 한다고 하셨는데, 왜 여기서는 아래에 보시다시피 display: block; 인데 margin: auto; 가 아닌 text-align: center;로 받는 건가요? <style> .menu { padding: 0; list-style: none; width: 200px; /* border: 1px solid red;*/ } .menu li > a { background-color: #000; color: #fff; display: block; text-align: center; padding: 5px; border: 1px solid #ddd; } .sub-menu { border: 1px solid black; display: none; } .sub-menu a { display: block; text-align: center; padding: 5px; } </style> </head> <body> <ul class="menu"> <li> <a href="none">MENU-1</a> <div class="sub-menu"> <a href="none">SUB-MENU-1</a> <a href="none">SUB-MENU-2</a> <a href="none">SUB-MENU-3</a> <a href="none">SUB-MENU-4</a> </div> </li> <li> <a href="none">MENU-2</a> <div class="sub-menu"> <a href="none">SUB-MENU-1</a> <a href="none">SUB-MENU-2</a> <a href="none">SUB-MENU-3</a> <a href="none">SUB-MENU-4</a> </div> </li> </ul> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> 항상 강사님의 자세한 답변과 강의에 다시 한번 감사드리며, 번거롭게 해드려 죄송합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
맥 체제는 브라켓츠 프로그램을 이용할 수 없나요?
노트북이 맥이라.. 연습은 윈도우로 해야할까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
Brackets 확장 기능 관리자 emmet 설치가 되지 않을때
집에선 Brackets 다운이 가능한데 회사에선 다운로드가 되지 않습니다. 그래서, Brackets 다운 검색해서 다운로드 하였습니다. 그런데, 회사 PC에선 Brackets 실행 후 확장 기능 관리자 - 설치 가능에서 emmet이 검색 되지 않아 설치 할 수가 없습니다. 에밋 어떻게 설치합니까? 별도로 emmet 파일을 다운 받아 설치할 순 없습니까? 그리고, 다운 받았다면 어디에 저장하면 가능할까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
탭버튼 질문입니다
.tab_inner > .btn > a에서 탭버튼의 border-bottom을 없애는 과정에서 border-bottom:none; margin-bottom:-1px; background-color:#fff; display : inline-block을 주셨는데 , display : block을 줬을 때는 border-bottom이 사라지지 않더라구요..! 왜 block속성을 지정했을 때는 border-bottom이 사라지지 않는지 궁금합니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드려요
블라켓츠에서 제이쿼리 만들어 저장을 하면 왼쪽옆에 빨간색으로 x모양이 생기는데 왜그런가요? 실행은 정상으로 되구요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
[2021년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)-ppt자료
안녕하세요, 강의 듣고 있는 수강생입니다! 혹시 강의 중에 나오는 ppt자료는 따로 받을 수 있는지 궁금합니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 ㅜ 브라켓을 설치했는데 에러라고 뜹니다ㅠㅠ
파일을 열던중에 에러가 발생했습니다 브라켓1,14,2-16MB 보다 큰 파일은 브라켓에서 열 수 없습니다 라고 떠요ㅠㅠ 그리고 레코딩-템프 저건 어떻게 여신건지 모르겠어요ㅠ 저는 getting started 라고 떠요ㅠ 그리고 파일 만들기를 눌러서 파일을 만들면 파일을 만들던 중에 에러가 발생했습니다. 대상 디렉토리를 변경할 수 없습니다 라고 뜹니다 제가 브라켓을 잘못 설치한걸까요?ㅠ 생초보라 하나도 모르겠네요ㅠㅠ 도와주세요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
에밋 설치 관련 질문 드립니다
안녕하세요 선생님! 해당 주소로 접속해서 에밋을 설치하려고 하는데 에밋은 단축키만 모여져있고 설치 파일이 아닌거죠?! pdf파일만 있어서요!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의연장
선생님 안녕하세요 작년 4월에 강의를 구입하고 , 건강상태가 좋지 않아 반년간 입원치료를 받았습니다. 지금부터 강의를 들을 수 있는 시간이 한달정도 남아있는데, 아직도 통원치료를 받고 있고, 올해는 꼭 따고 싶은데 강의시간이 얼마 남지 않아서 강의연장이 혹시 가능할지 여쭈어 보려고 글을 남겼습니다. 감사합니다.