월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B타입 레이아웃 오류 ㅠ 도와주세요~
영상을 몇번이나 돌려봤는데 똑같은것같은데 왜 안될까요 ㅠ footer-inner 가 왜 저렇게 잡힐까요??? 오류를 못찾겠어요 ㅠㅠ 도와주세요~ ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
first-child가 왜 안먹힐까요..
div:last-child는 잘먹히는데 div:first-child가 안먹히네요 div:nth-of-type(1)은 잘먹힙니다. 알 수 있을까요..
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
border랑 겹치는 부분은
실습하다가 border랑 겹치는 부분도 안생기게 아예 바깥으로 하고 싶은데 제가 생각한거는 부모요소에 box-sizing : border-box를 주면 된다고 생각했는데 안되더라구요.. 어떻게 하는지 궁금합니다. (수정) 어떻게 할까 생각해서 1번박스를 예를 들면 top : 100%로를 -> top : (.parent의 높이값 + border값); left : 0을 -> left : (-border값);으로 주면 되더라고요 이경우는 브라우저 크기가 유동적으로 변할 경우 수정해야한다는 번거로움이있는데 px값 말고 다른방법으로 지정하는 방법이 있나요
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
display를 inline-block으로 하는이유
block요소는 다음줄에 표시되지만 inline-block으로 바꾸면 한줄에 배치된다고 하셨는데 전 강의에서 float : left로도 할 수 있었는데 둘 중에 어떤 게 더 효율적인 것인지 궁금합니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
20:03초에 a태그를 block요소를 바꿨을 때
블럭요소로 바꿨을 때 블록요소 특징이 width 100% 차지한다고 하셨는데 개발자도구를 이용해서 보니까 html width이 958px이고 a태그의 width값은 940px, border값 좌우 1px씩 = 2px, margin값 좌우 8px씩 = 16px 이더라고요 (합 958px) 왜 margin 값은 설정을 안했는데 자동으로 들어가 있나요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드립니다!
안녕하세요! 강의 듣는 중 궁금한 부분이 있어 질문드립니다. 질문 1) 제가 작성한 코드의 주석부분이 꼭 있어야만 하는 이유가 따로 있을까요? (*주석 처리한 부분은 제가 작성한 코드에는 없고 완성본코드에는 있는 태그들을 옮겨 적어 주석 처리 하였습니다.) (주석 1) body 태그 안 /* margin: 0; */ 와 /* line-height: 1.6em; */ (주석 2) slide 태그 안 /* width: 1200px; */와/* clear: both; */ 첫번째 주석의 경우 .content-inner 에 이미 부여한 width:1200px을 중복해서 주는 이유? (주석 3) .tab-inner .tab 태그 안 /* box-sizing: border-box; */ 질문 2) .btn 의 border-bottom 부분에 줄을 제거하고자 margin-bottom:-1px; 그리고 background-color:#fff;를 주었는데 아무런 변화가 없어서 완성본 코드와 비교해 보았습니다만 코드가 동일합니다.. 해당부분 적용이 안되는데 무엇이 문제일까요? (*관련내용 영상 타임라인 14:58 입니다.) 질문 3) <div>, <section>, <article>, <b>, <em>, <span> 태그가 각 어떤 역할인지 궁금합니다. 단순히 태그들을 폴더형식처럼 그룹으로 묶어주는 애들이라고만 이해하고있는데 어느 상황에서 저 태그들을 골라서 써야하는지 모르겠습니다.. (*div와 section, article의 경우 이전 영상에서 얼핏 이해 한 바로는 class 네임을 줄줄이 주지 않고자 section 태그를 넣어 div를 대신하여 사용하는정도로만 이해하고있습니다!) +추가질문 <section>과 <article>은 <ul> <li>와 같이 무조건적으로 같이 다니는 태그로 알고있는데 맞을까요..? 아래에 제가 작성한 코드 첨부드립니다. < HTML> <!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">로고</div> <div class="navi">네비게이션</div> </header> </div> <div class="content-inner"> <div class="slide"> <div>이미지 슬라이드</div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <div>공지사항</div> </div> <div class="tab"> <a href="#none">sns 발송 서비스 개선작업<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"> <div>갤러리</div> </div> <div class="tab"> <a href="#none"> <img src="images/gallery-01.jpg" alt="images-01"> </a> <a href="#none"> <img src="images/gallery-02.jpg" alt="images-02"> </a> <a href="#none"> <img src="images/gallery-03.jpg" alt="images-03"> </a> </div> </div> </div> <div class="shortcut">바로가기</div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo">copyright</div> <div class="footer-content"> <div class="sns">sns</div> <div class="familysite">familysite</div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> < CSS > body { /* margin: 0; */ font-size: 15px; color: #222; /* line-height: 1.6em; */ background-color: #fff; } a { text-decoration: none; color: #222; } .container {} .header-inner { background-color: #eee; } header { border: 1px solid #000; width: 1200px; margin: auto; height: 100px; } header > div { border: 1px solid #000; height: 100px; text-align: center; line-height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } /* content */ .content-inner { width: 1200px; margin: auto; } .slide { /* width: 1200px; */ text-align: center; line-height: 300px; /* clear: both; */ } .slide > div { border: 1px solid #000; height: 300px; } .items { overflow: hidden; /* margin-top: 20px; */ } .items > div { border: 1px solid #000; height: 200px; float: left; box-sizing: border-box; width: 33.33333%; } .news {} .gallery {} .shortcut { text-align: center; line-height: 200px; } .footer-inner { background-color: #eee; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid #000; height: 100px; float: left; box-sizing: border-box; text-align: center; } .footer-logo { width: 1000px; line-height: 100px; } .footer-content { width: 200px; line-height: 100px; } .footer-content div { border: 1px solid #000; height: 50px; line-height: 50px; } /* Tab Content */ .tab-inner, .gallery-inner { width: 97%; margin: auto; } .tab-inner .btn {} .tab-inner .btn > div, .gallery-inner .btn > div { border: 1px solid #000; padding: 3px; width: 120px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab { border: 1px solid #000; padding: 0 10px; height: 160px; /* box-sizing: border-box; */ } .tab-inner .tab a { display: block; border-bottom: 1px solid #ccc; padding: 3px; } .tab-inner .tab a:last-child { border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery-inner .tab img { width: 110px; } .gallery-inner .tab { text-align: center; padding-top: 25px; box-sizing: border-box; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
4분 55초 말 실수가 있으십니다.
웹디자인기능사 시험 보실 때 브라켓말고 vscode가 사용이 안된다고 하셔서 글 남깁니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
기능사 실기 시험 준비 문의 드립니다
안녕하세요 선생님, 혹시 실기범위 12개 중에서 가로고정형 1개, 가로100% 1개, 세로2컬럼 1개 이렇게 총 3강의를 보여주셨는데, 나머지 9개 는 자료같은건 스스로 아무 내용이나 만들어보고 이미지 아무거나 가져와서 만들어서 연습을 하면 될 까요? 따로 연습할 자료를 구할 수 있는 방법이 있는건지요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
@charset 'utf-8' 문의
안녕하세요 선생님 혹시 css시작할때 uft를 감싸주는게 "" 와 ' ' 중에 둘다 아무거나 써도 상관없을까요? ' ' 로 했을때 빨갛게 변하는건 상관없는지 질문드려요!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css시작부분
안녕하세요 선생님 위에서부터 차근차근 영상 봤는데 처음 보는 부분 인 것 같아서요(아니라면 죄송합니다ㅠ;;)이번 최종본에서 css시작할때 아래 부분이 포함 된것 같은데 이거는 모든 제작본(가로,가로100,세로컬럼) 에 다 공통적으로 외워두면 되나요? 또 color: #222328; 이부분은 다.요구사항 표 에 있는 기본텍스트의색 #333333 이걸 뜻하는 건지.. 문의드립니다! @charset 'utf-8' ; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a { color: #222328; text-decoration: none; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드에 마진버텀 질문이요
안녕하세요! 슬라이드랑 아이템스랑 딱붙어 답답해보이는걸 해결하고자 슬라이드에 마진버텀으로 외부여백을 주셨는데 그렇게 하면 전체 높이가 720px 이 되고 시험지 와이어프레임 부분엔 전체높이가 700px인데 늘어나도 관계없는건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer에서 .copyright div:nth-child 질문 있습니다!
선생님 가로고정형part에서는 footer에서 .copyright div:nth-child를 사용하여 와이어프레임을 설정 하였는데, 가로 100% part에서는 .copyright div 에 border 값을 줘서 확인 하셨는데 100%에서도 두 방법 다 사용하여도 상관 없을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
학습자료 관련 문의
■ 질문 남기실 때 꼭! 참고해주세요. 안녕하세요 선생님 코딩 왕초보 입니다 코딩 실기 준비중에 학습자료 관련해서 궁금한게 생겨 글 올립니다 다운로드 자료가 블라켓 중점으로 되어있는데 비주얼스튜디오코드 내용과 별반 다른게 없는건지? 헷갈립니다 해당 자료 중점으로 공부를 진행하면 될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
new&gallery span 부분라인이 왜 안맞을까요 ??
(사진)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
tab b 태그 정렬
tab a b 태그 왜 정렬이 어긋날까요 ? tab-inner .tab a b { float:right;} 도 되어있는데..
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
menu 작업시 속성이 아무것도 적용이 안되요 ㅠㅠ
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
유효성검사
유효성 검사시 오류 나오는 부분은 왜 나오는지 알수 있을까요 ?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
라이브서버
선생님 안녕하세요 open with live server 클릭시 비주얼스튜디오 화면이 분할되어서 뜨는게 아니라 새 창이 열리는데 어떻게 해결 할 수 있을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오 제이쿼리
안녕하세요~선생님 비주얼스튜디오로 연습중인데 제이쿼리가 왜 실행되지 않을까요 ????
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
라이브서버 실행이 왜 안될까요 ?
라이브 서버 실행시 실행은 안되고 이렇게만 뜹니다 ㅠㅠ 뭐가 문제일까요 ?