월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
안녕하세요 다시 질문드립니다.~~
앞전에 질문내용과 동일한데요. 공단에 문의해 보니까 css3 html5 유효성검사에 오류가 뜨지 않게만 하면 된다고 하던데요. 그럼 플렉서를 써도 되는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.tab2 img{width: }에서 이미지 크기 줄여도 갤러리 이미지 두줄로 됩니다.
.tab2 img{width: }에서 이미지 크기 줄여도 갤러리 이미지 두줄로 됩니다. 어떻게 합니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃을 만들어 봤는데 문제가 있어요.
제가 직접 레이아웃을 짜고 만드는걸 시도해 봤는데 아래와 같이 이미지가 들어간 박스가 보라색 박스 안으로 안들어가요. 집어넣고 싶은데 어떻게 해야 하나요? 아래는 소스 코드에요. ------------------html소스------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>occultcafeadytum</title> <link rel="stylesheet" href="css/style6.css"> </head> <body> <div class="container"> <header><h3>점술카페 아디툼</h3></header> <section> <div class="box1">타로</div> <div class="box2">사주</div> <div class="box3">손금</div> <div class="box4">관상</div> <article><img src="images/angel-01.jpg.jfif"></article> </section> <footer></footer> </div> </body> </html> ---------------------css소스----------------------- .container { width:1200px; border:1px solid red; text-align:center; } header { border:1px solid red; } section{ background-color:purple; height:400px; } section div{ background-color:gray; width:200px; border:1px solid red; } .box1{ height:100px; } .box2{ height:100px; } .box3{ height:100px; } .box4{ height:100px; } article { border:1px solid red; width:300px; height:300px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃에 푸터가 안떠요.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style5.css"> </head> <body> <div class="container"> <header> <article class="logo"></article> <article class="navi"></article> </header> <section class="box1"></section> <section class="box2"> <section> <article class="sub1"></article> <article class="sub2"></article> <article class="sub3"></article> </section> <footer></footer> </div> </body> </html> ------------------------------------------------- .container { border:1px solid red; width:1200px; margin:auto; } header{ background-color:skyblue; overflow:hidden; } header article { background-color:gray; width:300px; height:100px; } .logo { float:left; } .navi{ float:right; } .box1{ background-color:yellowgreen; height:300px; } .box2{ background-color:greenyellow; overflow:hidden; } .box2 article{ width:33.33333%; height:300px; float:left; } .sub1{background-color:darkgray;} .sub2{background-color:gainsboro;} .sub3{background-color:lightgray;} footer { background-color: skyblue; height:100px; } css와 html 소스구요. 똑같이 따라했는데 푸터가 안떠요. 왜그렇죠?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항에 a태그는 text-decoration, color값을 초기화하는 css를 미리 만들어 놓으신건가요?
완성 상태에서는 a태그가 가지는 파란색 글씨나 언더라인이 없으니, a태그는 text-decoration, color값을 초기화하는 css를 미리 만들어 놓으신건지... 위에 질문처럼...div로 작성했던 부분 중에 .items > article{ height: 200px; float: left; } 로 작업해서 옆으로 article news, gallery, shortcut를 나란히 옆으로 붙이면 되는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
container{overflow>hidden}안해도 되나요?
container에 border:1px solid #000 상태인데... 아래부분에서 float:left 하면 container 는 박스가 가늘게 만들어지고 아래부분 요소들은 다 밖으로 나오게 됩니다. 그래서 1.메뉴부분은 드롭다운 될때를 고려해서 height, 2.float:left 는 아래부분 박스에 clear:both; 3.container 처럼 여러 요소가 float되는 경우는 overflow>hidden 한다... 라고 이해해고 있었습니다. 이번 강좌에서 그부분은 그냥 지나치신건지...아니면 시험때 할필요없는 건지 여쭤봅니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
아래 크로스 브라우징 재질문 드립니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST 쇼핑몰</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.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> <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> </ul> <div class="side-bar"></div> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tab1"> <a href="#none" class="open-modal">SMS 발송 모바일 서비스 개선작업 안내입니다. <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다. <b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택 <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 class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery3"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery1"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="copyright"> <p>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</p> </div> <div class="sns"> <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="instagram"></a> </div> </footer> </div> <!-- Modal--> <div class="modal"> <div class="modal-inner"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈 로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라 서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인 증이 되어야 하며, 이 는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a href="#none" class="close-modal">닫기</a> </div> </div> <!-- Modal--> <script src="/script/jquery-1.12.4.js" type="text/javascript"></script> <script src="/script/custom.js" type="text/javascript"></script> </body> </html> @charset 'utf-8'; body { color: #222328; background-color: #fff; font-size: 15px; margin: 0; } a { color: #222328; text-decoration: none; } .container { width: 1200px; margin: auto; } header { height: 100px; position: relative; z-index: 1; } header > div { height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .side-bar { position: absolute; width: 100%; height: 200px; background-color: #000; left: 0; top: 100%; display: none; z-index: -1; } .slide { margin-bottom: 20px; } .slide > div { height: 300px; } .items { overflow: hidden; margin-bottom: 20px; } .items > div { height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; text-align: center; } .banner a img { width: 97% } .shortcut { width: 350px; text-align: right; } .shortcut a img { width: 97%; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-logo a img { margin-top: 25px; } .copyright { width: 800px; text-align: center; } .copyright p { margin: 0; padding-top: 25px; box-sizing: border-box; } .sns { width: 200px; text-align: center; } .sns img { margin-top: 25px; } /*Navigation*/ .menu { list-style: none; padding: 20px 5px; width: 97%; margin-top: 48px; } .menu li { width: 25%; float: left; 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; } .menu li .sub-menu { border-bottom: 1px solid #000; background-color: #000; display: none; } .menu li:first-child .sub-menu { border-left: 1px solid #000; } .menu li:last-child .sub-menu { border-right: 1px solid #000; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { color: #000; background-color: #fff; } /*news&gallery*/ .tab-inner { width: 97%; margin: auto; } .btn {} .btn a { border: 1px solid #000; padding: 5px; width: 100px; display: inline-block; margin-right: -6px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; background-color: #ddd; text-align: center; } .btn a.active { background-color: #fff; } .tab1, .tab2 { height: 155px; padding: 0 20px; box-sizing: border-box; } .tab1 { border: 1px solid #000; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:hover { color: royalblue; text-decoration: underline; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; text-align: center; display: none; } .tab2 a {} .tab2 a img { width: 110px; padding-top: 23px; margin-left: 10px; } /*slide*/ .slide { position: relative; height: 300px; width: 1200px; overflow: hidden; } .slide div { width: 3600px; font-size: 0; position: absolute; animation: ani 10s linear infinite; } .slide div a {} @keyframes ani { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /*Modal*/ .modal { position: absolute; width: 100%; height: 100%; background-color: rgba(221, 221, 221, 0.44); left: 0; top: 0; z-index: 100; display: none; } .modal-inner { background-color: #fff; width: 330px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px; border-radius: 10px; } .modal-inner h2 { text-align: center; background-color: royalblue; color: #fff; } .modal-inner p { line-height: 2; } .modal-inner a { float: right; margin-right: 20px; border: 1px solid #000; padding: 5px 10px; } 부탁드립니다 ..
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문 있습니다.
태그는 아래와 같이 입력했어요. 이렇게 입력하면 parent값은 height값이 없으니까 자동적으로 child값의 height값으로 해야 되는데 왜 자식요소와 부모요소 사이에 왜 공백이 생기죠? 강의에 나온데로 적었거든요. 그런데 노랑박스랑 빨간색 박스랑 공백이 생겨요 강의에는 그렇게 안되고 노란색 박스가 가득차는데도요 -----------------------html----------------------- <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style4.css"> <body> <div class="parent"> <div class="child"></div>' </div> </body> </head> </html> --------------------------css-------------------------
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
크로스 브라우징이 안됩니다..
첫번째 사진이 블라켓츠 실시간 미리보기 화면이고 두번째 사진이 크로스 브라우징 해봤을때 화면입니다. 크롬 엣지 IE 전부다 저렇게 나와요.. 실시간 미리보기할때는 정상적인데 뭐가 문제일까요
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
페이드 슬라이드 관련 문의
선생님 안녕하세요^^ 세로 2컬럼 최종본 제작영상 관련 질문이 있습니다. 페이드 슬라이드 부분에서 강의영상에는 .slide > div a에 opacity : 0 값을 주고 키프레임 0%일때 visibility : hidden으로 지정하였는데요. 최종본 소스 다운로드 자료에는 .slide > div a에 visibility : hidden값을 주고 키프레임에 5%, 40% 구간에 visibility값을 visible과 hidden으로 다시 지정하셨던데 혹시 어떠한 차이가 있는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
box-sizing태그에 대해서 궁금한점이 있습니다.
아래와 같이 box sizing을 안넣고 padding을 20px; 그리고 border를 10px를 줬을때 두번째 사진처럼 패팅이 먹히는데, 박스사이징을 보더박스로 한 경우에는 상하좌우로 20px; 패딩이 안먹히잖아요. 원래 그런건가요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드릴께요~~~^^
안녕하세요. 강의 항상 열심히 듣고 있는 학생입니다. 코딩웍스 강의중 플렉스에 대해서 공부하였는데요. 웹디자인기능사 시험을 볼때 플렉스를 이용하여 레이아웃(와이어프레임)을 만들어도 되는지 궁금해서 질문드립니다. 감사합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
W3C CSS 검사 서비스 검사 오류
복습 중에 navi는 하지 않고 W3C CSS 검사 서비스 검사 해 보았는데 1 해석 오류. 스타일 시트는 HTML 구문을 포함해서는 안된다. <!DOCTYPE html> 41 해석 오류 <html lang="ko">< head> <meta charset="UTF-8"> <title>JUST ?????????</title> <link rel="stylesheet" href="css/style.css">< /head>< body> <div class="container"> <header> <div class="header-logo"><a href="#none"><img src="images/header-logo.png" alt="header logo"></a></div> <div class="navi"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide1.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide2.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide3.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"><a href="#none"><img src="images/banner.jpg" alt="banner"></a></div> <div class="shortcut"><a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a></div> </div> <footer> <div class="footer-logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div> <div class="copyright"> ?????? : ??????????????? | ????????? : ????????? | ??????????????????????????? : ????????? ??????<br> ??????????????? : ??????????????? ????????? ???????????? 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns1.png" alt="sns1"></a> <a href="#none"><img src="images/sns2.png" alt="sns2"></a> <a href="#none"><img src="images/sns3.png" alt="sns3"></a></div> </footer> </div> <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)
width: 90%; margin: auto;를 .menu가 아닌 .navi{}안에 넣어도 됩니까?
menu를 보기 좋게 하기 위해 .menu{}에 width: 90%; margin: auto; 넣으라고 하셨는데 navi{}안에 넣어도 똑같이 되는데 그렇게 해도 됩니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
z-index를 header가 아닌 .navi에 주어도 됩니까?
navi가 위로 보이게 하기 위해 header에 z-index 주라고 하셨는데 .navi에 주어도 똑같이 위로 올라오는데 .navi에 주어도 됩니까?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
boder bottom 문의
선생님 안녕하세요^^ 말줄임처리하다가 막히는 부분이 있어서요. 공지사항 span으로 감싸고 말줄임 처리를 하면서 .tab1 a 에 border bottom을 줬는데 선이 정렬이 안되고 저렇게 출력이 됩니다..ㅠㅠ 어떤부분을 수정해야 하는지요 ㅠㅠ 문의 드립니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드립니다.
선생님, 안녕하세요. 다름이 아니라 브라켓의 emmet 기능을 설치했는데도 강의에서 선생님처럼 css 속성 앞글자만 쳐도 속성 목록이 쭉 나와야 되는데 저는 css 속성 앞 글자만 작성해도 속성 목록이 전혀 나오지 않습니다. emmet 기능 말고도 다른 확장 기능을 설치해야 되나요? 질문드립니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
목록서식 선택자를 태그선택자로 하면 원래 먹히지가 않나요?
혹시 이렇게 해도 되나? 싶어서 아래와 같이 클래스 선택자가 아니라 태그 선택자를 해봤거든요. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <ul class="menu"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </body> </html> 원래 위에 같은 경우에 ol과 menu에서 선생님 께서는 css 스타일에서 .menu로 해서 목록스타일을 변경하셨잖아요. 그런데 저는 .menu로 안하고 태그 선택자인 ol로 목록스타일을 변경해서 아래 css 방식으로 해봤는데 안되더라구요.. 원래 태그선택자로는 안되는 건가요? ol { list-style:none; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
실기 시험시 수험자제공파일에 완성본 이미지도 있습니까?
웹디자인기능사 실기 시험시 수험자제공파일에 완성시 어떻게 되는지 확인할 수 있게 완성본 이미지도 있습니까?