월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오코드설치...
강의대로 비주얼스튜디오코드 설치했는데 폴더를 만들어야 왼쪽창에서 마우스 오른쪽버튼 활성화되나요? 그부분에대한 어떤 설명도 없어 막힌상태입니다 아니면 초보가 들을수있는 강의가 따로 있나요? 제한모드는 뭔가요? 좀 자세한 설명부탁드립니다... 일단 강의화면이랑 제화면이 다른상태네요 코드사용법? 이런 폴더도 저는 없구요 설치해라는건 다 한 상태입니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험볼 때 extension 설치 다 해야 할까요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오코드사용법및 환경설정 3분26초에 강의끈킴
■47:16분 강의 인데 3분26초에 강의 끈킴- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
EditPlus 다운은 유효로 되어 있는데 무료로 다운 받는 방법 있을까요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 웹디자인 시험보고 왔는데요!
오늘 제가 웹디자인 실기시험보고왔는데요 문제는 A-3번이 나왔는데요 제가 네비게이션, 탭기능, 페이드 슬라이드 기능제작은 다했고 제가 당황했던건 포토샵버전이 cs3버전이여서 그것도 한글판이더라구요 그래서 처음에 당황해서 잘 못하다가 하다보니 얼떨결에 되서 올리긴 올렸는데 cs6버전처럼 사진열때 사진이 탭형태처럼 안나오고 하나씩만 나와서 각각 새로만들기 해서 사진 사이즈대로 만들어서 슬라이드,배너,바로가기에 사진 넣었고 그리고 이미지에 막대모양 색깔입히는게 안되서 그냥 텍스트글자만 넣어서 삽입했는데 혹시 디자인문제로 시험에 떨어지진 않을까요? 결론은 사진은 이미지 사이즈 맞게 들어가긴했고 기능들은 다 완벽히 구현했습니다. 용량도 체크했습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인실기시험 한가지만 더 여쭤보겠습니다
자꾸 질문드려 죄송한데요 제가 이제 드디어 내일 웹디자인 실기시험인데 비쥬얼스튜디오 코드 사용할려고 하는데요 비쥬얼 스튜디오도 기본적으로 에밋이랑 실시간 미리보기 라이브서버 에디터가 설치가 되있을까요? 만약 안되있으면 시험장에서는 인터넷이 안되서 에디터 다운을 못받는데 이럴경우 대처방법 있을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인 실기시험 효과 호버,배경색 질문있습니다.
제가 지금 퍼블리셔 국비학원생인데요 저는 내일모레 웹디자인기능사 실기시험을 보는데 요즘 학원에서 강사님이 웹디자인실기 연습시켜서 하고있는데 그 실기 공개문제에 공지사항,갤러리에 호버값은 원래 넣으라는 말은 없는데 저희 학원에서 강사님은 공지사항이나 갤러리 마우스 올렸을때 호버값주는게 좋다고 하시고 다른 수강생들은 공지사항에 배경색도 넣더라구요! 메뉴에 배경색이나 또 c타입에 왼쪽에 배경색도 주라고 하시는데 제가 디자인적으로 더 꾸며도 시험에 감점되거나 그런것은 없나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
포토샵으로 슬라이드이미지
슬라이드 이미지를 만드는대 제 컴퓨터에는 포토샵이 2021버전으로 되어있어서 올가미툴로 선택영역 선택후에 delete를 누르면 오류창이 뜨는대 이럴때는 어떤 방법을 사용해야 할까요?? 혹시나 시험장에도 2021 버전이면 멘붕일거같기도 하구... 급하게 문의 남깁니다ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션에 슬라이드 다운이 되지 않습니다.
오타도 없는데 슬라이드다운이 되지 않습니다. 내일이 시험인데 자꾸 같은 부분이 안되서 속상한 마음입니다... 자주 질문 드려서 죄송합니다. 네비게이션 관련 질문은 이번만 하고 하지 않겠습니다. 감사합니다... <!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> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="headerlogo"></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-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a 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="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></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> <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: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header div { /* border: 1px solid yellowgreen; */ height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { border: 1px solid green; width: 1200px; margin: auto; } .slide > div { height: 300px; } .items { /* border: 1px solid red; */ width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid red; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid blue; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid green; height: 50px; } .family-site { width: 200px; height: 100px; } /* slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { width: 3600px; 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; } } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { float: left; box-sizing: border-box; width: 25%; text-align: center; } .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; display: none; } .sub-menu a { color: #fff; display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color:#000; } .sub-back { background-color: #000; width: 1200px; height: 150px; position: absolute; left: 0; top: 100%; z-index: -1; display: none; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; width: 100px; display: inline-block; padding: 5px; background-color: #fff; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; } // Navigation $('.menu li').mouseenter(function(){ $('.sub menu').stop().slideDown() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 작성시 아래 슬라이드 밀림
네이게이션 만드는데 계속 슬라이드가 아래로 밀립니다. 계속 찾아봤는데 해결이 안되서 질문 올렸습니다. 자꾸 질문해서 죄송해요...ㅠㅠ 아직 연습이 많이 필요한 것 같습니다. <!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> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="headerlogo"></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-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a 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="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"> <!-- <select> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> --> </div> </footer> </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: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header div { /* border: 1px solid yellowgreen; */ /* height: 100px; */ } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { border: 1px solid green; width: 1200px; margin: auto; } .slide > div { height: 300px; } .items { /* border: 1px solid red; */ width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid red; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid blue; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid green; height: 50px; } .family-site { width: 200px; height: 100px; } /* slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { width: 3600px; 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; } } /* navigation */ .menu { list-style: none; padding: 0; } .menu li { float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; } .sub-menu { border: 1px solid #000; background-color: #fff; } .sub-menu a { display: block; padding: 5px; } .sub-back { width: 500px; height: 200px; background-color: #000; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; width: 100px; display: inline-block; padding: 5px; background-color: #fff; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css 질문
안녕하세요! 시험 응시 전에 궁금한게 있어 질문글 남깁니다:) CSS 코드를 작성하다보면 .content-inner {} 처럼 아무 속성이 없는 줄이 종종 생기는데요, 제출하기 전에 모두 지워주는 것이 좋을까요? 사소한거지만 확실하게 해두는 편이 좋을 것 같아서 여쭤봅니다!
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
배너이미지가 밑으로 내려갔습니다.
탭메뉴 열심히 만들고 있었는데 갑자기 배너 이미지가 갤러리 탭 밑으로 가버렸습니다. 원인을 찾다가 도저히 모르겠어서 질문 드립니다. 감사합니다. <!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> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="headerlogo"></a> </div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a 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="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"> <!-- <select> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> --> </div> </footer> </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: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { width: 1200px; margin: auto; height: 100px; } header div { border: 1px solid yellowgreen; height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { border: 1px solid green; width: 1200px; margin: auto; } .slide > div { height: 300px; } .items { /* border: 1px solid red; */ width: 1200px; margin: auto; overflow: hidden; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid red; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid blue; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid green; height: 50px; } .family-site { width: 200px; height: 100px; } /* slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { width: 3600px; 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; } } /* news & gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; width: 100px; display: inline-block; padding: 5px; background-color: #fff; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인 실기시험 탭메뉴 질문있습니다.
제가 다음주에 웹디자인 실기시험인데요 제가 다른기능들 네비게이션, 팝업, 슬라이드는 어려움없이 다 제작하는데 유독 탭메뉴가 가끔 실수해서 안되는경우가 있는데 다른기능 다 완벽히 구현하고 탭메뉴 구현못하면 시험에 떨어질까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이미지 슬라이드 여백없애는 font-size: 0 질문있습니다.
강사님 이미지 슬라이드 여백없애는 font-size: 0 질문있는데요 font-size: 속성은 폰트글씨 줄이는데만 사용하는걸로 알고있었는데 이미지 여백없애는데 font-size: 0 를 어떤 개념으로 주는건지 궁금합니다. 혹시 실무에서도 많이 쓰이나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
Navigation 창이 내려오지 않습니다.
다른분이 질문 올릴거 봤는데 저도 네이게이션 창이 내려오지 않습니다. transition도 제대로 입력했고, js 파일도 잘 연결 한 것 같은데 아무리봐도 모르겠어서 여쭤보게 되었습니다. 왜이럴까요ㅠㅠ <!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> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="header logo"></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-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a 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="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </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: 15px; } a { color: #222328; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { height: 100px; width: 1200px; margin: auto; position: relative; z-index: 10; } header > div { /* border: 1px solid green; */ height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid blue; height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid green; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid yellow; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid #000; height: 50px; } .family-site { width: 200px; } /* slide */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { /* border: 1px solid red; */ width: 3600px; 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; } } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { /* border: 1px solid blue; */ float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } /* .menu li > a:hover {} 꼭 li 옆에 hover 넣을 것 */ .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; 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 { background-color: #000; width: 1200px; height: 150px; position: absolute; left: 0; top: 100%; z-index: -1; display: none; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; background-color: #fff; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDwon() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹다지안기능사 용량 질문있습니다.
안녕하세요~ 웹디자인기능사 실기 제출파일 용량이 5메가가 초과되면 안되는데 제가 실습 다 하고 파일 총 용량이 5.31KB (5,439 바이트) 평균 이렇게 나오는데 이거 5메가 넘는건가요?? 인터넷에 검색해봐도 정확히 이해가 안되서 여쭤봅니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
헤더로고 포토샵 제작부분 질문있습니다.
A3,A4, B3,B4, C3,C4 유형에서 Header 폴더에 제공된 로고를 삽입한다. 로고의 색은 과제명(가.주제)에 맞게 반드시 변경하여야 한다. ※ 로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다. (가로세로 비율을 유지하며 크기변경 가능) 이렇게 제작하라고 나오는데 헤더 로고 원본이미지를 색상변경하는거고 가로세로 비율 종횡비을 유지하라는 말이 잘 모르겠는데 어떻게 해야될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달 창은 뜨는데 모달백그라운드 컬러가 안먹히는 이유를 모르겠어요ㅜㅜ
아래 css에서 문제가 있을까요??ㅜㅜ .modal { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .modal-content { background-color: #fff; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%,50%); width: 350px; padding: 20px; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.541); display: none; } .close-modal { float: right; border: 1px solid #000; display: inline-block; width: 50px; padding: 3px; box-sizing: border-box; text-align: center; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
브라우저에 아무것도 보이지 않습니다.
안녕하세요. 강의 보면서 연습하는 중에 차례로 잘 따라하다가 CSS 컨테이너에 red라인을 넣었는데도 브라우저에서 아무것도 보이지가 않습니다. 잘못 입력된건 없는 것 같은데 뭐가 원인인지 도저히 모르겠어서 문의 드렸습니다. - 인터넷에 CSS 링크 연결 오류와 관련해 검색 해보고 크롬 캐시도 삭제 해보고 HTML에 연결된 CSS 링크에 ?ver=1, ?afer를 붙이는 등 여러 방법을 썼는데 계속 안보입니다. 제가 뭘 잘못한건지... - 평소 연습 할 때 '[다운로드] 이론학습 및 모듈제작 실습 폴더' 열어서 연습하는데 이번에는 바탕화면에 폴더를 새로 만들고 시작을 했습니다. 그 과정에서 뭔가 잘못된건지... 답답한 마음에 질문 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML5 시멘틱 태그로 CSS 레이아웃</title> <link rel="stylesheet" href="style.css?ver=1"> </head> <body> <div class="container"> <header> <article></article> <article></article> </header> <section class="box1"></section> <section class="box2"> <article></article> <article></article> <article></article> </section> <footer></footer> </div> </body> </html> ------------------------------------------------ .container { border: 1px solid red; width: 1200px; } header {} header article {} .box1 {} .box2 {} .box2 article {} footer {} <폴더위치> <브라우저>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
주제 관련 문의합니다.
안녕하세요. 실기 시험 볼 때 안내되는 시험 주제의 사이트를 총 3개를 만드는 건지 아니면 하나를 만드는건지 궁금합니다. 시간은 총4시간인데 ABC 형을 총 3개를 만드는 것이 맞는건가요?