월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
sub menu가 밑으로 숨어서 보이지 않아요ㅠㅠ
<!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> <article class="header-logo"></article> <article class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-01</a> <a href="#none">SUB-MENU-02</a> <a href="#none">SUB-MENU-03</a> <a href="#none">SUB-MENU-04</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-01</a> <a href="#none">SUB-MENU-02</a> <a href="#none">SUB-MENU-03</a> <a href="#none">SUB-MENU-04</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-01</a> <a href="#none">SUB-MENU-02</a> <a href="#none">SUB-MENU-03</a> <a href="#none">SUB-MENU-04</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-01</a> <a href="#none">SUB-MENU-02</a> <a href="#none">SUB-MENU-03</a> <a href="#none">SUB-MENU-04</a> </div> </li> </ul> </article> </header> </div> <div class="right"> <section class="slide"> <article></article> </section> <section class="items"> <article class="news"></article> <article class="banner"></article> <article class="shortcut"></article> </section> <footer> <article class="footer-logo"></article> <article class="copyright"></article> </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> -----------------------------------------------------css .container { width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header { overflow:hidden; } header > article { border: 1px solid #000; width: 200px; } .header-logo { height: 100px; } .navi { } .slide {} .slide > article { border: 1px solid #000; height: 300px; } .items { overflow:hidden; } .items > article { border: 1px solid #000; height: 200px; width: 33.3333%; float: left; box-sizing: border-box; } .news {} .banner {} .shortcut {} footer { overflow:hidden; } footer > article { border: 1px solid #000; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 600px; } /*NAVIGATION*/ .menu { list-style:none; padding: 0; width: 90%; margin: auto; margin-top: 15px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display:block; padding: 5px; text-decoration: none; transition:0.5s; } .menu li:hover > a { background-color: #000; color:#fff; } .sub-menu { border: 1px solid #000; position: absolute; top:0; left: 100%; width: 100%; height: 200px; background-color: #000; display: none; z-index: 2; } .sub-menu > a { padding: 5px; display: block; text-decoration: none; transition:0.5s; color:#fff; } .sub-menu > a:hover { background-color: #000; color:#fff; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
html 에서 특수문자 '&'
선생님 안녕하세요. 공개문제 C3 을 하다가 네비게이션 텍스트 중 Q&A 라는 텍스트를 넣으면 브라켓이 오류로 잡는거같은데 어떻게 해야하나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
번개모양을 표시하는 우측 사이드바 자체가 없어졌습니다.
그래서 다시 지우고 깔아도 없는 것은 그대로 입니다. 어떻게 다시 번개모양 버튼을 활성화 시켜야 되죠?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
i 치면 image 자동으로 나오는게
선생님 ~! i라고 밑에 imanges/ 자동으로 뜨는게 안뜨는데 코드힌트 비활성화랑 관련있나요? 근데 활성화 해도 안떠서 다른걸 뭐 꺼둬서 그런건가 해서 질문드려요
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달 창 질문드립니다!
선생님 안녕하세요. 모달 팝업 지시사항에 2가지 종류가 있는데 배경을 어둡게 처리하고 띄우는것과 어둡게 처리하지 않고 띄우는것이 있는데 그냥 통일시키면 될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃 만들기 B형 관련 질문 드립니다.
footer-inner 부분의 임시로 만든 border가 아래 사진처럼 items 부분까지 영역을 잡아 버립니다. 간단한 것을 질문 드려 죄송합니다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> </footer> </div> </div> </body> </html> ===================================================== style.css .container{} .header-inner{ border: 1px solid red; } header{ width: 1200px; height: 100px; margin: auto; } header > div{ border: 1px solid blue; height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .content-inner{ } .slide{ width: 1200px; margin: auto; } .slide > div{ border: 1px solid green; height: 300px; } .items{ width: 1200px; margin: auto; } .items > div{ border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } .footer-inner{ border: 1px solid red; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer > div{ border: 1px solid green; height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copyright{ width: 1000px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
indent guides
안녕하세요 선생님 웹디 필기는 합격했고 실기위해서 강의 신청했어요 유튜브에서 html 기본강의 보고 있는데 브라켓에서 선생님이 설치하라는거 다 설치했거든요 그중에 indent guides도 설치했는데 라인이 안나와요 뭐가 잘못된걸까요? ㅜㅜ 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
22강 jquery 작동 관련 질문입니다.
다른 질문자 내용을 참고 했지만 안되어서 질문드립니다. 보이기를 클릭했을때 p 테그가 나타나지 않는 상태입니다. 보이기를 클릭했을때 이렇게 나옴니다, 폴더 구조는 script 안에 이렇게 넣어 두었습니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B타입 레이아웃에서 슬라이드 위치가..
.header-inner 와 .footer-inner가 들어가있는 B타입 레이아웃에서 .slide 에 마지막에 overflow:hidden; 속성을 주면 위치가 어긋나져 버립니다.. 왜 그런걸까요? 혹시 .content-inner 때문에 발생하는건가요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
position 속성 주는것과 안주는것
안녕하세요 선생님 이미지 슬라이드 시킬때 position 속성주고 left 로 이동시키는것과 position 속성 주지않고 margin-left 로 이동시키는것 실무에선 어떤걸 위주로 쓰나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
border 값이 늘어날때 어느쪽으로 향하는가요?
10.상세 디자인을 위한 CSS 박스모델 강의 부분.... >보더 값이 1px에서 10px로 변경했을때 보더의 두께가 padding 영역으로 향하는지 아니면 마진 영역으로 향하는지 아니면 양쪽방향으로 5px씩 늘어나는지요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이미지 3개를 가운데 정렬
선생님 안녕하세요. 갤러리에서 이미지 3개를 가운데 정렬할때 .gallery .tab 여기에 text-align: center; 라고 주셨는데 margin: auto 로는 왜 안먹히나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
기간이 무제한으로 늘어난게 맞나요?
선생님 안녕하세요~~ 인프런 운영팀에 질문해야하나 하다가...질문란에 올립니다. 기간이 무제한으로 바뀌어서 기쁜마음으로 여쭤봅니다
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
실시간 미리보기 반영
왜 저는 실시간 미리보기에서 제이쿼리가 동작하지 않을까요? index.html 파일 더블클릭하여 열었는데도 안돼요ㅠ 저장도 다했고 오타도 없는데요ㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 시험 보고 왔는데요~
폰트 패밀리 지정 안하는게 맞는거죠? 구글이랑 익스플로러의 폰트가 다르게 표시되서 맑은 고딕으로 지정하려다가 강의에 없던 내용이라 body {margin:0; font-size:15px; background-color:#fff; color:#333333; } 이렇게 배운대로만 코딩했어요. 준수사항에서 <제작된 사이트 메인페이지의 레이아웃, 구성요소의 크기 및 위치 등은 최신버전의 익스플로러와 구글 크롬에서 동일하게 표시되어야 한다> 라고 되어 있어서 폰트 패밀리는 지정 안했습니다..이게 신경쓰여요 ㅎ 빠른 답변 부탁드려요~^^
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
box-sizing: border-box
선생님 안녕하세요 강의에서 box 클래스안에 <div><div> <div><div> <div><div> 여기다가 box-sizing:border-box; 를 넣어주면 div의 border:width부분이 서로 겹치게 되는건가요? 그렇게 이해하면 될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 시험 보고 왔습니다.
안녕하세요. 오늘 시험을 보고 왔습니다. 세로 슬라이드 2번째 유형(서브메뉴가 옆에 나타나는 유형)과 좌우 슬라이드가 나왔는데, 시험 전에 주의사항 설명하면서 "슬라이드가 좌 또는 우 방향 중 한 방향으로만 움직여야 한다"라고 하시더라고요. 이미지가 끝까지 넘어가고 다음 이미지가 보이는 형식?을 말하신 것 같아요. 저는 시험 도중 제이쿼리 방식으로 슬라이드를 구현했는데, 감독관님께서 그거 보시더니 "슬라이드가 한쪽방향으로만 움직여야 한다"고 말씀하셨어요 ㅜㅜ CSS애니메이션을 이용한 방식도 그렇고, 제이쿼리 방식도 그렇고 강의에서 설명한 방법들은 다 양쪽으로 움직이던데.. 한쪽으로 움직이게 하려면 어떻게 해야하나요.. ---------------------- 추가 질문) 서브메뉴에 마우스 올리면(hover) 나타나는 효과 중에 배경색, 글자색 변경과 함께 글자 굵게 처리를 해줬는데 font-weight:bold; 만 적용되고, 서브메뉴의 배경색이랑 글자색은 안바뀌더라고요. 이건 또 어떤부분인지 아시나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 만들기 시작부분 부터의 html과 css 코딩파일을 얻고 싶습니다.
안녕하세요. 위의 다른 강의로 html과 css로 만든걸로 하니까 좀 다른것 같아서요. 해당 강의 부분의 html과 css 파일을 올려주시면 감사하겠습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
페이드인/페이드아웃 슬라이드가 동작하지 않아요.
페이드인/아웃 슬라이드 효과가 동작하지 않는데 틀린부분을 모르겠습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
갤러리 btn 부분 가운데 정렬되는 이유
안녕하세요. 다른 건 다 해결됐는데, 갤러리 버튼 부분이 사진처럼 가운데 정렬 되어있어요.. 코드 확인해주실 수 있을까요? (+ .btn span 에 속성을 주는 것이 아닌 .btn에다 display를 제외한 css 속성을 똑같이 주면 정렬은 잘 맞춰지는 대신 margin-bottom:-1px과 background-color를 줘도 공지사항/갤러리 버튼 밑에 선이 가려지지 않고 나타나는데 이건 또 왜그런가요?)