월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 F3 오픈뱅킹 (23번) 유형 시험을 보고 왔습니다!
학습 질문은 아니지만 선생님께서 주변에 F유형 시험 보신 분이 없어서정보가 정확하지 않다는 것이 기억이 나서 오지랖 같아 보이지만 다른 수험생 분들과선생님께 도움이 좀 되고자 시험 끝나고 달려와 게시글을 작성합니다!이번 주 내내 이상하게 F유형이 마음에 걸렸었는데 오늘 딱 시험 보는 걸 직감했었나봅니다ㅠㅠ 강의대로.slide 안에 slide-image 와 slide-banner 로 묶어서 공부를 했는데, 시험지에서는 저희가 slide-banner 라고 칭한 부분을 지시 사항에서는 <바로 가기> 라 했고,content-inner 안에 있는 shortcut 부분을 시험지에서는 <배너> 라고 지시하고 있었습니다.그저 코드 묶는 이름만 달랐지만 F유형 준비하시는 분들은 덜 헷갈리셨으면 하는 맘에코드 명을 바꿔서 공부하는 게 어떨까 하는 생각이 들었어요!저도 중간에 '바로 가기' 지시 사항 읽으면서 평소처럼 slide-banner 로 작성하다가헷갈려서 그냥 지시 사항 요구한 이름으로 코드 이름도 통일을 시켰어요! 핑크색 박스 부분을 색칠한 부분에 대해서 말씀드릴 게 있는데요~ 기억하실지 모르겠지만..ㅠㅠ 제가 24.03.27에 F유형 slide-banner link 부분에 글자 입력하는 지시 사항이 있을 까봐 질문을 올린 적이 있습니다..! 불행하게도ㅠㅠ 제 예상처럼 시험 지시 사항에 각 엥커 마다 텍스트를 넣으라는 부분이 있었습니다.제공되는 텍스트 메모장에 삽입 하라는 텍스트가 있더라고요ㅠㅠ 그리고 총 들어가는 이미지는 레이아웃과 동일하게 5개였습니다.다만, 텍스트를 이미지 어디에 넣으라는 특정 지시는 없어서, 그래서 저는span 으로 텍스트를 입력해서 갤러리 이미지에 span을 넣은 것과 똑같이 display:block 처리를 해서 위아래로 넣고 배열하는 방식으로 만들었습니다.일러스트나 포토샵으로 이미지를 만드는 것이 아니라, 제공 된 이미지를 삽입 했어야 됐습니다..!배치를 하고 나니까 슬라이드 이미지 위에 뜬금없는 사진들을 붙여 놓은 것 같아서,저는 백그라운드 컬러를 주고 투명도 조절을 해서 슬라이드 이미지와 별개 부분인 아이콘처럼 보이게 만들었습니다. 그리고 공지사항 부분이요! 오른쪽에 선생님께서 ???ㅠㅠ 라고 하늘색으로 쓰신 부분 정말 공백이었어요!! 다만, 공지사항 부분에 엥? 하고 놀랬던 부분은, tab-inner 너비가 넓지 않을 수 있으니 공지 사항 부분에 em / b 태그를 이용해서 배치와 말 줄임을 공부하고 갔는데, 날짜 입력이 없었습니다! 그래서 편히 앵커만 넣고 블록 처리해서 중앙 배치해서 꾸몄습니다. 제가 실수한 부분은 푸터 메뉴에 보더 버텀을 안준 것과 메뉴 서브 백 width 크기를 해더 크기로 줬다는 것 두 가지인데, (A유형 sub-back처럼 만들어버렸어요ㅠ)다른 건 다 작동 잘 되고 스스로도 아 이 정도면 됐다하는 맘으로 잘 풀고 왔습니다!! ㅠㅠ 이러다 저 두 가지 문제로 떨어지면 너무 너무 창피하고 부끄러울 것 같습니다만..ㅠㅠㅠㅠ 그래도 스스로 많은 구조를 파악하고 만들 수 있다는 게 너무 뿌듯합니다.그리고 F유형이 아무래도 본 적 없는 유형이라 그런지..오늘 제가 간 시험 장에 12명이 시험 봤는데 6명이 중도 포기하고 나가셨어요..저는 모든 확인을 끝내고 제출하는 데까지 2시간 20분 정도 걸렸는데, 그 시간까지 저 포함 제출한 사람들은 3명이었고, 제가 교실 나올 때까지 3명이 남아있었습니다.4월 9일에 합격발표일인데 제발 붙었으면 좋겠습니다ㅠㅠ선생님 대면 수업이 아닌 온라인 수업이었지만 정말 많은 걸 배웠습니다ㅠㅠ감사합니다ㅠㅠ!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험장에선 인터넷이 사용 되지 않는데 작업 중 확인을 위한 Open with Live Server 어떻게 확인합니까?
시험장에선 인터넷이 사용 되지 않는데 작업 중 확인을 위한 Open with Live Server 어떻게 합니까? 확인해 보고 수정해야 하는데 완성한 후가 아닌 작업 중에 확인하고자 할 때는 어떻게 합니까?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F3번 오픈뱅킹 modal 창 질문있습니다.
F 유형에 대해 자꾸 질문 드려서 죄송합니다..ㅠㅠF1하고 F3번 modal 창을 만들면푸터 부분에 modal background-color 가 검정색으로 덮혀 지지 않은데 정상일까요?제가 잘못 만든 줄 알고 선생님께서 올려주신 최종본도 확인해봤는데쌤 최종본에서도 푸터 부분에 검정색이 적용 안되는 걸 확인해서요..!!쌤 코드랑 제 코드가 똑같아서 따로 코드는 올리지 않았습니다..이 부분이 문제가 되지 않는다면 이제 문제가 되는 유형이 없는 것 같아요..!!시험 하루 남아서 최종 점검 겸 질문 남깁니다ㅠㅠ 추가 ) Ai 답변을 보고 제 질문이 디자인 쪽으로 보여지는 것 같아서요..!의문점인 부분이 .modal 의 크기 값을 width:100 % , height: 100% 로 줘서창의 전체를 어둡게 덮게 만드는 건데,그 크기 값이 왜 height 100% 임에도 불구하고 footer에는 적용이 안되는 것 질문이었습니다..!
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
d,e유형 네비게이션 제작시 서브메뉴가 고정이 안됩니다
강의 de유형 네비게이션 7:55분초를 보면 선생님 서브메뉴는 고정되어서 잘 나오는데 제꺼는 고정이 안되고 자꾸 슬라이드 업 되어서 서브메뉴에 호버를 할수가 없습니다 제생각에는 엡솔루트 준 뒤로 이러는것 같은데..ㅠ코드올려드립니다 왜이러는걸까요 ㅠㅜhtml <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>D-1</title> </head> <link rel="stylesheet" href="./css/style.css" /> <body> <div class="container"> <div class="main-content"> <div class="left"> <div class="header"> <div class="header-logo"></div> <div class="menu"> <ul class="menu1"> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-img"></div> <div class="slide-banner"> <a href="#none"><img src="./images/banner-01.png" alt=""></a> <a href="#none"><img src="./images/banner-02.png" alt=""></a> <a href="#none"><img src="./images/banner-03.png" alt=""></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none" ><img src="./images/shortcut-01.png" alt="shortcut-01" /></a> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br /> <b>기간:2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none" ><img src="./images/shortcut-02.png" alt="shortcut-02" /></a> </div> <div class="news-gallery"></div> </div> </div> </div> <div class="footer"> <div class="footer-logo"> <a href="#none" ><img src="./images/footer-logo.png" alt="footer-logo" /></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="sns"> <a href="#none"><img src="./images/sns-01.png" alt="sns1" /></a> <a href="#none"><img src="./images/sns-02.png" alt="sns2" /></a> <a href="#none"><img src="./images/sns-03.png" alt="sns3" /></a> </div> </div> </div> <script src="./script/jquery-3.7.1.js"></script> <script src="./script/custom.js"></script> </body> </html> css @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* 전체레이아웃 */ .container { border: 1px solid red; } .main-content { border: 1px solid black; display: flex; } .main-content > div { border: 1px solid black; } .left { width: 200px; } .header { } .header > div { border: 1px solid red; } .header-logo { height: 100px; } .menu { height: 400px; } .menu1 { padding: 0; } .menu1 > li { position: relative; } .menu1 > li > a { background-color: #333; display: block; color: #fff; height: 40px; line-height: 40px; text-align: center; transition: 0.5s; } .menu1 > li:hover > a { border: 1px solid#333; background-color: #333; color: #fff; } .sub-menu { position: absolute; top: 0; left: 100%; width: 100%; display: none; } .sub-menu > a { display: block; text-align: center; height: 35px; line-height: 35px; background-color: #333; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #ffffff; color: #333; } .spot-menu { height: 50px; } .right { width: calc(100% - 200px); } .slide { height: 400px; position: relative; } .slide-img { border: 1px solid blue; height: 400px; } .slide-banner { border: 1px solid green; position: absolute; top: 0; right: 0; } .slide-banner > a > img { width: 180px; display: block; } .shortcut { border: 1px solid black; height: 200px; display: flex; align-items: center; } .shortcut-content { display: block; } .shortcut-content > b { font-weight: bold; } .news-gallery { border: 1px solid red; height: 250px; } .footer { display: flex; align-items: center; height: 100px; } .footer > div { text-align: center; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 250px; } .sns > a > img { width: 50px; border-radius: 5px; } js$(".menu1 li").mouseover(function () { $(this).children(".sub-menu").stop().slideDown(); }); $(".menu1 li").mouseleave(function () { $(this).children(".sub-menu").stop().slideUp(); });
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
플렉스 질문드려요
slide-banner에 플랙스를 주고slide-banner a img 에 width:100%;를 주면 왜 일렬로 배치될 수 있나요? ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F 유형 slide-banner 질문있습니다
돌아오는 토요일에 시험을 보는데, 모든 유형 다 만들 수 있어도 혹시 라도 실수할까 복습을 계속 하고 있거든요!그러다 문득 F 유형 slide-banner 각 이미지 옆에link 1,2,3,4 라고 적혀있는 글자 입력을 해야 할 경우 어떻게 넣는 게 좋을지 고민하다가 조언 듣고 싶어서 질문 남깁니다.갤러리에서 사진 밑에 span으로 글자를 입력 해야 하는데, 혹시 배너도 갤러리처럼 링크 설명 글자를 넣으라는 지시가 있을까봐 대비해서 가고 싶습니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
전체적으로 창을 줄이면 거기에 대한 반응을 안합니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/D image/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner slide-items"> <a href="#none" class="slide-item"><img src="images/D image/slide-d-01.jpg" alt=""></a> <a href="#none" class="slide-item"><img src="images/D image/slide-d-02.jpg" alt=""></a> <a href="#none" class="slide-item"><img src="images/D image/slide-d-03.jpg" alt=""></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbdsdkjskldjiojeoidjklcndslkchndsicjhdosicjewmfewfewfwedk <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/D image/gallery-01.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-02.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-03.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-04.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-05.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-06.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-07.png" alt=""><span>안녕</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>안녕ㅎ라새요 여러분</h2> <p> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </p> <a href="#none" class="close-modal">X 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> 슬라이드에 object-fit도 안먹고 숏컷, 탭 부분도 창에 따라 줄어들어야 하는데 짤리는데 뭐가 문제일까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D 유형할 때 마다 우측에 스크롤바가 생깁니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbds <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </div> </div> </footer> </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: #000; } a { text-decoration: none; color: #000; } .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { flex: 1; } /* header */ header {} header > div { border: 1px solid #000; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* slide */ .slide { position: relative; } .slide > div { border: 1px solid #000; } .slide-image { height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } /* shortcut */ .shortcut { height: 200px; display: flex; align-items: center; margin: 0 30px; gap: 50px; } /* news - gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { height: 120px; box-sizing: border-box; } .footer-logo { width: 200px; padding-top: 15px; box-sizing: border-box; } .footer-content { flex: 1; } .footer-content div { height: 60px; } .footer-link { padding-top: 20px; box-sizing: border-box; } .footer-link a, .footer-link span { color: royalblue; } .footer-link a:hover { text-decoration: underline; } .copyright { padding: 10px 0px; box-sizing: border-box; } 뭐가 문젠질 도저히 모르겠습니다..
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D E 유형 슬라이드 구현 방식
css 말고 제이쿼리로는 어떻게 못하나요..? abc 슬라이드 유형을 제이쿼리로 해서 제이쿼리로 연습했는데 영상엔 css 방식으로 나와 있어서 어떻게 해야할 지 모르겠습니다..
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F 유형 임의 지정 부분과 footer 부분 질문입니다
선생님, F 유형 공부를 하고 있는데 두 가지 확인하고 싶은 게 있어서 질문올립니다!content-inner 부분에 임의 지정이라는 것은D,E 유형에서 나온 세로 임의지정 calc(100vh-100px) 같은 높이값이랑 다르게 ABC 유형에서 slide / items 부분에 줬던 높이를 참고해서 제가 알아서 높이 값을 주면 되는걸까요? 문제는 안되겠지만 공개 시험지에서는 F4를 제외한 F1,2,3 유형은 footer 높이가 120px 로 되어있더라고요..! 강의에서는 F1 레이아웃인데 높이 값을 100px로 주셔서 다른 수험생들도 순간 멈칫할 수 있을 것 같아요. 수업 노트에 이 부분에 대해 올려주시는 게 좋을 것 같아 말씀드립니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오에서 타이핑이 이상하게 될 때 (글자간격이 벌어져요)
글자 간격이 벌어지면서 타이핑이 제대로 되지 않는 현상이 벌어집니다...이럴 때 어떻게 해결할 수 있나요?제가 뭘 눌러서 이런 현상이 벌어지게 된건지 모르겠습니다가끔 이런 현상이 종종 일어나는데 시험보다가 갑자기 이렇게 되면 당황스러울 것 같아서 질문드립니다. ㅠㅠ ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
a 태그에 넣는 것
a 태그 안에는 꼭 "#none"를 넣으라고 하셨는데,#만 넣는 걸로 코딩을 배워왔는데, 혹시 이렇게 되면 감점이 되는 걸까요? #none도 맞고 #도 맞는 건지 궁금해요! ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
[필독] D,E 강의 설명 중 필수 이론 04 가상 클래스 질문
안녕하세요 선생님,저는spot 메뉴에서 ' | ' 바의 역할이 단어 칸 나누기라고 생각해서지금까지 키보드 위에 있는 저 바를 html 에 입력하고a태그로 메뉴를 구성했었거든요,필독 사항 강의 에서도 반드시 필요한 것은 아니고, 코드 간결을 위해서 사용한다고 말씀해주셨는데, | 부분을 실무에서 코사용할 때 after를 사용하나요? 키보드에 있는 걸 쓰는 것을 쌤은 비추를 하시는지 궁금해서 질문 드립니다..!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드가 이상하게 넘어갑니다
<div class="content-inner"> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-01.jpg" alt="slide 01"></a> <a href="#none" class="slide-item"><img src="images/slide-02.jpg" alt="slide 02"></a> <a href="#none" class="slide-item"><img src="images/slide-03.jpg" alt="slide 03"></a> </div> </div> .slide-items { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-item { position: absolute; top: 0; left: 0; width: 3600px; font-size: 0; } setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500);제 컴퓨터가 이상한 건지는 모르겠는데 코드 확인 해봐도 도저히 다른 곳이 없는데 뭐가 문제일까요ㅠㅠ 사진이 툭툭 끊기면서 넘어가요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
단축키자료
단축키 자료 올려주신건 비쥬얼스튜디오에도 똑같이 적용이 가능한 부분인가요?시험전 준비영상도 봤는데 그 영상에서 말씀하신 단축키만 바꾸면 똑같이 써도 되는건지 궁금해서요. ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비 세로형 질문
서브메뉴가 슬라이드 뒤로 숨고 서브메뉴 배경이 꽉 차는 게 아니라 약간의 여백이 생기는데 왜일까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="navi"> <!-- navigation --> <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> </div> </header> <!-- header --> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <!-- slide --> <div class="items"> <!-- news --> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> <!-- news --> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> @charset "UTF-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* news */ .tab-inner { width: 97%; margin: auto; } .tab-inner .btn {} .tab-inner .btn a{ border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ccc; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .tab-inner .btn a.active { background-color: #fff; } .tabs {} .tabs div { border: 1px solid black; height: 155px; padding: 0 10px; box-sizing: border-box; } .tabs .tab1 {} .tabs .tab1 a { display: block; border-bottom: 1px solid black; padding: 5px } .tabs .tab1 a:last-child { border-bottom: none; } .tabs .tab1 a b{ float: right; font-weight: normal; } .tab2 { display: none; text-align: center; } .tab2 img { width: 120px; padding-top: 20px; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } /* navi */ .menu { list-style: none; padding: 0; margin-top: 30px; display: flex; } .menu li { float: left; width: 150px; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 3px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { padding: 3px; border: 1px solid #000; background-color: #fff; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500) // news $('.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') }) // modal $(".open-modal").click(function(){ $('.modal').fadeIn() }) $(".close-modal").click(function(){ $('.modal').fadeOut () }) // navi $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().fadeIn() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().fadeOut() }) 제이쿼리 부분이 좀 줄이 엉켰는데 양해 부탁드립니다...
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드가 바뀌는 모션은 보이는데 사진이 안바뀝니다
뚝뚝 끊기기만 하고 사진은 아예 안바껴요.. 모션만 보이고<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> <!-- header --> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <!-- slide --> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns-01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns-02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* 모듈 외 컨텐트 */ .header-logo { line-height: 130px; } .footer-logo { line-height: 130px; } .copyright { text-align: center; padding-top: 30px; } .sns { line-height: 130px; text-align: center; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('slide-item:first-child').appendTo('.slide-items'); }); }, 3500)좌우로 넘어가는 거 했을 때도 똑같은 현상이 나타났는데 뭐가 문제일까요..ㅜㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의를 보고 똑같이 코드를 쳤는데 a태그가 밑으로 떨어집니다 ㅠㅠ
■ 공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데 news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ혹시 잘못된 부분이 있는걸까요? <body> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none"> 문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> </div> </div> </article> <article class="gallery">갤러리</article> <article class="now">바로가기</article> </section> </body><css>* { padding: 0; margin: 0; position: relative;} a { color: inherit; text-decoration: none; display: inline-block;} ul,li,ol { list-style: none;} /*와이어프레임정렬*/ .items { border: 3px solid blue; max-width: 1200px; margin: 0 auto; display: flex; } .items div { height: 200px; } .news { width: 350px; background-color: lightblue;} .news .tab-inner { border: 5px solid salmon; } .news .tab a { border: 3px solid slateblue; } .gallery { width: 500px; background-color: coral;} .now { width: 350px; background-color: lightseagreen;} /*tab content*/ -출력화면-
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의 순서 질문드립니다.
선생님 안녕하세요. 수강생입니다.수업은 섹션1부터 차근 차근 따라가면 될까요? 안배우고, 몰랐던 부분들이 등장해서 인강을 어디서부터 어떻게 들으면 될지 여쭈어 봅니다.(비전공자라 코딩 지식이 아예 없습니다.)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
마지막 파트 기술적 준수 사항 관련 질문
■ 질문 남기실 때 꼭! 참고해주세요.btn 태그 안에 span 태그를 마지막에 a링크로 바꾸셨는데 별도로 구성하기 할 때도 동일하게 적용되는 사항일까요?