월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
몇 가지 질문들
선생님! 1. 대부분의 모든 텍스트색을 지정해준 기본텍스트 색으로 지정해야 할까요? 2. footer의 하단 메뉴와 copyright css를 할 때 .copyright div:nth-child ()이를 first-child와 last-child로 해도 되는것일까요? 궁금하여 여쭤봅니다! 3. 수험자제공파일과 포토샵원본은 그럼 제출파일에서만 삭제해야할지, 아니면 컴퓨터 내에서도 아예 삭제해야하는지 여쭤봅니다. 4. 그렇다면 제출파일에는 폴더 구조 및 순서가 css / style.css images / 원본을 가지고 포토샵에서 만든 이미지들 script / custom.js와 오픈 소스 index.html 이렇게만 해도 되는것일까요? index.html은 따로 폴더 만들지 않고 해도 되나요?? 혹시나 실격처리될까봐 여러가지들 여쭤봅니다..ㅎㅎ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
유의사항
선생님 그리고 혹시 1. emmet 이 시험장에 깔려있지않으면 제가 임의로 블라캣 내에서 서류가방 눌러어서 설치해도 되는지, 감독님께 여쭤봐야하는건지 궁금합니다. 2. 유효성검사는 저희가 하는게 아닌 거 맞나요? 3. 최상위폴더에 index.html을 넣으라고 되어있는데, 다 만들고 보면 index.html이 마지막에 있는데 ( css images script index.html 이런식으로) 상관 없는것인가요?? 4. 수험자제공파일과 포토샵 원본 파일은 모든 작업을 마친 후에 작업파일 안에서 삭제를 하면 되는것인건가요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
최종본 제작 시
1, cs6버전을 설치하고 싶은데 설치하려고보니 중단된 제품이라고 뜨는데 어떻게해야할까요?? 2, 최종본을 제작해봤는데 banner와 shortcut 사이 간격이 첨부사진과 같으면 어떻게해야 더 넓힐수있을까요?? 우선 .banner img, .shortcut img { w98% 준 상태입니다!!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
와이어 프레임(css) 관련 질문입니다.
.slide{ position: relative; height: 300px; overflow: hidden; } .slide > div{ /*border: 1px solid red;*/ width: 3600px; font-size: 0; position: absolute; /*animation: slide 10s linear infinite;*/ 슬라이브 부분을 예로 해서 css의 구조를 잡을때 .slide{} 와 .slide div{} 두개로 나눠서 CSS 입력하는 의미가 어떤건가요? .slide는 무슨 의미와 역할이고 .slide div{} 했을때는 무슨 역할인지요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
jquery err message
Brackets 에서 jquery 실행시 동작은 잘되는데 오류메세지가 21개 발생하는데 이상이 없는 건가요 '$' was used before it was defined.$(function(){1 Expected exactly one space between 'function' and '('.$(function(){1 Expected exactly one space between ')' and '{'.$(function(){1 Missing space between ')' and '{'.$(function(){2 Missing 'use strict' statement.$('.text').css({'display':'none'});2 Missing space between ':' and 'none'.$('.text').css({'display':'none'});3 Expected exactly one space between 'function' and '('.$('.show-btn').click(function(){3 Expected exactly one space between ')' and '{'.$('.show-btn').click(function(){3 Missing space between ')' and '{'.$('.show-btn').click(function(){4 Missing space between ':' and 'block'.$('.text').css({'display':'block'});6 Expected exactly one space between 'function' and '('.$('.hide-btn').click(function(){6 Expected exactly one space between ')' and '{'.$('.hide-btn').click(function(){6 Missing space between ')' and '{'.$('.hide-btn').click(function(){7 Missing space between ':' and 'none'.$('.text').css({'display':'none'});9 Expected ';' and instead saw '(end)'.}) ESLint (6)1 ERROR: '$' is not defined. [no-undef]$(function(){2 ERROR: '$' is not defined. [no-undef]$('.text').css({'display':'none'});3 ERROR: '$' is not defined. [no-undef]$('.show-btn').click(function(){4 ERROR: '$' is not defined. [no-undef]$('.text').css({'display':'block'});6 ERROR: '$' is not defined. [no-undef]$('.hide-btn').click(function(){7 ERROR: '$' is not defined. [no-undef]$('.text').css({'display':'none'});
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달창 만들 때
선생님, 안녕하세요 모달창을 만들때 부모요소인 .modal에 포지션 속성을 왜 absolute를 넣는지 이해가 가지않아 여쭤봅니다. 부모요소니까 relative를 넣어야한다고 생각했었습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항, 갤러리 구성 중 궁금한것이 생겼습니다!
안녕하세요 선생님! 강의 잘 듣고있습니다 😄 갤러리, 공지사항 구성 중 .btn과 .tab의 사이를 겹치게 하기위해서 .btn span에 margin-bottom: -1px 을 주는데 margin-bottom에 마이너스값을 주면 위로 올라가면서 .tab부분이 딸려 올라가면서 겹쳐보이게되는 원리인가요? margin-bottom: -1px 의 정확한 원리가 알고싶습니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이번강의 다음에는 ?
웹디자인 기능사 강의로 입문 하였는데요 이번에 시험친 다음은 선생님 강의중 어떤 강의를 들어야 할까요? 면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작 들어도 괜찮을 런지요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
overflow:hidden와clearfix 차이가 궁금해요
clearfix가 아닌 overflow:hidden를 쓰는 이유가 궁금해요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
border 등을 넣는 위치
선생님, border, heigjt, width 등을 어디다가 넣어야할지 헷갈립니다. 예를들어 위 내용을 header에 넣어야할지 header > div 태그에 넣어야할지 또는 .btn에 넣어야할지 .btn > span에 넣어야할지 둘다 넣어야할지 잘모르겠습니다ㅠㅜ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
보더 vs 배경색
선생님, 와이어프레임을 잡는 것에 두가지 방법 중에 한가지만 제대로 알아도 괜찮을 지 여쭈어봅니다. 보더를 이용한 방법에만 초점을 맞춰 공부해도 될까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
보더를 이용한 세로 2컬럼
안녕하세요 선생님 선생님 강의를 들은 후 혼자 만들어봤는데 footer 부분이 이상해서 선생님 강의를 다시 들어봐도 이 부분이 해결되지않아 질문드립니다. 왜 오류가 나는것일까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
b형 버전 1번을 수정해서 b형 4번을 만들때 질문 있습니다.
영상 23:14 초 쯤에 b형 4번째 설명 하실때, b형 1번과 푸터 가로 크기만 변경하면 b형 4번을 만들 수 있다고 하셨는데요! width 를 변경하는게 아니라 html 코드 순서를 변경 해야 하는 것 아닌가요? 버전 1 <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> 에서 버전4를 만들려면 css 안고치고 <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="footer-logo"></div> </footer> 이렇게 순서만 변경하면 되는거 아닌가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css float, clear 속성
안녕하세요 선생님 float, clear 색상을 이용해 수업시간에 만든 것을 토대로 혼자 만들어보다가 의문이 생겼습니다. 부모요소에 border를 만약 1px 주고 width를 400px을 주고 자식 1,2요소에 각각 float:left 와 float:right를 줬다고 가정하면 자식1요소에 border를 1px 주고 width를 100px을, 자식2요소에 border를 1px 주고 width를 300px을 주면 border 두께때문에 안맞아 box-sizing 속성을 주면 자식 1, 2요소가 각각 왼쪽 오른쪽으로 두번째줄에 들어가야하는것이라고 생각했는데 생각처럼 안돼서 첨부사진과함께 여쭤봅니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css 포지션 속성 내용 중에서
부모요소, 자식요소를 나누어 자식요소를 원하는 위치로 정확히 보내는 내용부분을 공부하고 제가 이해한 부분이 맞는 것인지 여쭤봅니다. 그림 속에서 각각의 중심점은 점으로 표시한 부분들이 맞나요?? 아니면 모두 다 왼쪽 상단이 중심점인건가요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
span밑줄이 안없어지는 이유는요? ㅜㅜ
<!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="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo-header"></a> </div> <!-- Navigation --> <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="right"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide03"></a> </div> </div> <div class="items"> <!--news & gallery--> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none">운영위원장 후보자 추천<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> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery03"></a> </div> </div> </div> </div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns-01.png" alt="facebook"></a> <a href="#none"><img src="images/sns-02.png" alt="twitter"></a> <a href="#none"><img src="images/sns-03.png" alt="instgram"></a> </div> <div> <select> <option value="">패밀리 사이트</option> <option value="">여주군청 홈페이지</option> <option value=""> 한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <script type="text/javascript" src="script/jquery-1.12.4.js"></script> <script type="text/javascript" src="script/custom.js"></script> </body> </html> ----------------------------------------------- @charset 'utf-8'; body { background-color: #fff; color:#333333; margin: 0; font-size: 15px; } a { color:#333333; text-decoration: none; } .container { width: 1000px; } .container > div { height: 800px; float:left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header { position: relative; z-index: 10; } header > div { } .header-logo { height: 100px; line-height: 130px; } .navi { height: 400px; } .slide {} .slide > div { height: 350px; } .items { overflow:hidden; } .items > div { height: 200px; width: 33.3333%; float: left; box-sizing: border-box; } .news {} .gallery {} .banner {} footer { overflow:hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; text-align: center; } .copyright { width: 600px; padding-top:30px; } .sns { width: 200px; } .sns > div { height: 50px; box-sizing: border-box; } .sns > div:nth-child(1) { padding-top:15px; } .sns > div:nth-child(2) { padding-top:10px ; } /*slide*/ .slide { position:relative; } .slide > div{} .slide > div a { position:absolute; top: 0; left: 0; opacity: 0; animation:slide 10s linear infinite; } .slide > div a:nth-child(1) { animation-delay:0s; } .slide > div a:nth-child(2) { animation-delay:3.5s; } .slide > div a:nth-child(3) { animation-delay:7s; } @keyframes slide { 0% { opacity:0; } 5% { opacity:1; } 35% { opacity:1; } 40% { opacity:0; } 0% { opacity:0; } } /*Navigation*/ .menu { list-style:none; margin: auto; padding: 0; width: 90%; position: relative; } .menu li { text-align: center; } .menu li > a { background-color: #fff; border: 1px solid #333333; display: block; padding: 5px; transition:0.5s; } .menu li:hover > a { background-color: seagreen; color:#fff; } .sub-menu { position:absolute; width: 100%; top: 0; left: 100%; height: 300px; } .sub-menu a { background-color: seagreen; display: block; padding: 5px; transition:0.5s; color:#fff; } .sub-menu a:hover { background-color: #fff; color:#333333; } /*news & gallery*/ .tab-inner, .gallery-inner { width: 98%; margin: auto; padding-top: 5px; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span { display:inline-block; width: 100px; padding: 3px; text-align: center; border: 1px solid #333333; border-radius: 5px 5px 0 0; border-bottom:none; margin-bottom: -2; background-color: #fff; } .tab1, .tab2 { border: 1px solid #333333; height: 158px; padding:0 5pxx } .tab1 a { display: block; padding: 0 5px; border-bottom: 1px solid #333333; margin-top: 5px; } .tab1 a:last-child { border-bottom:none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 80px; margin-top: 30px; text-align: center; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
실시간 미리보기
선생님, 작업환경 가이드에대한 영상을 보았음에도 실시간미리보기 가 이해가 안가서 여쭈어봅니다. 로컬디스크에 저장하지않고 어디서 저장해야하나요?? 제 파일탐색기에서는 바로가기 가 보이지 않아 여쭈어봅니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
자식요소가 인라인블럭일때 아래 틈 없애는 방법 알려주세요
<body> <div class="parent"> <span class="child"></span> </div> </body> --------------------------------------- .parent { border: 5px solid red; width: 600px; overflow: hidden; text-align: center; } .child { background-color: gold; width: 200px; height: 200px; display: inline-block; } 일때 자식이 중앙정렬은 되는데 자식요소와 보더 사이에 틈이 있는데 이거 없애는 방법 있을거 같은데 안되네요 도와주세요 ㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
보더, 배경색
안녕하세요 선생님 드롭다운네비게이션 강의 보다가 마지막에 와이어프레임을 만든 후 연습하라고 해서 갑자기 궁금해져서요! 보더랑 배경색으로 만드는 2가지 방법이 있는데 좀 더 추천하시는 방법이 있나요? 개인적으로는 배경색으로 하는게 더 쉬울꺼 같은데 드롭다운강의 하시는거 보면 다 보더로 그려져 있는거 같아서요 *드롭다운 네비 마지막에 와이어프레임을 잘할줄알면 ~ ... 이라고 자신감을 주셔서 감사합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
active 클래스가 안먹혀요ㅠㅠ
html 부분:<div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> css 부분:.btn a{ border: 1px solid black; display: inline-block; width: 100px; padding: 3px; text-align: center; text-decoration: none; color: black; border-radius: 5px 5px 0 0; margin-right: -6px; border-bottom: none; background-color: lightgray; margin-bottom: -1px; } .btn a.acitve{ background-color: white; } 이렇게 작성했는데, 내용 부분 tab1, tab2는 바뀌는데 active 적용해서 공지사항이나 갤러리 배경이 하얀색으로 바뀌어야되는데 안바뀝니다ㅠㅠ