묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
수험자 제공 텍스트 , 끊어도 되나요?
혹시 수험자 제공텍스트를 끊어써도 될까요?제공된 수업영상에는 줄바꿈으로만 하셨는데한 슬라이드에 제공되는 한 줄의 텍스트를 타입툴 여러개로 끊어써서 이동시켜도 되나하구요.한 단어만 회전시키거나 다른 글씨체로 해도 되는지 궁금합니다!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D유형 최종본제작 - D1 갤러리 이미지
D유형 최종본제작 - D1갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
position: fixed; 가 안먹혀요..뭐가 문제일까요?
html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>starUp Mata : App Official Landing</title> <link rel="icon" href="images/logo_a.png"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.js"></script> <!--Custom csss & js--> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo_pc.png"></a> </div> <div class="gub"> <a href="#none">아비브소개</a> <a href="#none">제품</a> <a href="#none">이벤트</a> <a href="#none">리뷰</a> <a href="#none">문의하기</a> <!-- <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> --> </div> <div class="login"> <a href="#none">로그인</a> </div> </div> </header> <!-- welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.jpg"> <img src="images/slide-welcome-02.jpg"> <img src="images/slide-welcome-03.jpg"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em>3가지 타이핑 텍스트 자리</em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!-- ceo-access --> <section class="ceo-access"></section> <!-- banner --> <section class="banner"></section> <!-- feature --> <section class="feature"></section> <!-- vision --> <section class="vision"></section> <!-- faq --> <section class="faq"></section> <!-- review --> <section class="review"></section> <!-- focus --> <section class="focus"></section> <!-- guide --> <section class="guide"></section> <!-- news --> <section class="news"></section> <!-- footer --> <footer></footer> </div> </body> </html>1000자 이상 안올라 간다해서 댓글에 남길게요
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
header_logo 질문#2
E유형 로고 작성하는 부분에 "심벌과 로고명이 포함된 완전한 형태로 디자인한다." 라고 되어있는데 심벌은 따로 이미지가 주어지는지 혹은 심벌로 따로 만들어야 하는지, 만약에 footer_logo 부분에도 심벌을 포함해서 만들어야 하는지 궁금합니다.
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
반응형 fixed 안먹히는 문제
pc버전은 문제가 전혀 없는데반응형이 되면 header에 준 position fixed가 이상해져요그 아예 안되는 건 아니에요 반응형에서 아래로 내릴 때 만 fixed 가 안되고 스크롤을 위로 올리면 작동이 되는데 이문제를 어떻게 해결해야 할지 모르겠어요이렇게 아래로 스크롤 하면 header 가 고정 되지 않고 사라져 버리고스크롤을 위로 하면 나타나요이게 원래 코드이게 반응형 코드인데 뭐가 잘못 된 걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리로 슬라이드 작성 시, .css({left : 0}) 이게 왜 들어가는지 이해가 되지 않습니다.
.css({left : 0 })를 주석 처리해도 정상적으로 동작하는데굳이 넣으신 이유를 알 수 있나요?아니면 저 부분을 빼면 이상이 생긴다는 것을 보려면 코드를 어떻게 작성하면 좋을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
header_logo 부분 질문
header_logo 부분에 "로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다." 부분이 있습니다. 그냥 포토샵 할 때는 200 x 40 비율로해서 그대로 작성하는지 궁금합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
넷플릭스 어코디언 예제 질문
클릭했을 때 content가 나오도록 구현하는 과정에서,jQuery를 이용하지 않고 css의 focus 클래스로클릭했을 때 display:none 에서 display:block 으로 바뀌도록 하였는데 눌렀을 때 적용이 되지 않는 이유를 모르겠습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 슬라이드제작(2) left : 0 이 왜 들어가는지 모르겠습니다.
slide-items를 애니메이트해서 -1200픽셀만큼 이동시킨후 다시 left 0 은 무슨소린지 모르겠습니다 그러면 첫번째 이미지가 보여야하는게아닌가요 ? 첫번째 이미지가 보여진후 appendTo로 인해서 마지막 요소로 이동해야하는게 정상아닌가요..?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
4:30초경에 질문이있습니다.
setInterval(function () { $('.slide-item').animate({ left: '-1200px' }, function () { $('.slide-item').css({ left: 0 }); $('.slide-item a:first-child').appendTo('.slide-item'); }); }, 3500); 기존에 자바 개발자라서 코드의 흐름을 파악하는데 약간 어려움이 있습니다. 코드 순서로 따져봤을때, left로 -1200픽셀만큼 이동후 다시 left0으로 돌아오는데,, 이게 약간 이해가 안가는데 이런식이면 제자리 걸음이 아닌가 헷갈리네요. -1200픽셀만큼 이동후 다시 left 0..? left 0에대한 설명이 없어서 뭔지 모르겠네요.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
sub-menu에 백그라운드 색상을 화이트로 넣어도 뒤에 보더가 보여요.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/11_상단드롭다운1.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="header-navi"> <ul class="menu"> <li> <a href="#none">Menu1</a> <div class="subMenu"> <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">Menu2</a> <div class="subMenu"> <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">Menu3</a> <div class="subMenu"> <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">Menu4</a> <div class="subMenu"> <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> </div> <div class="content-container"> <div class="slide"> <div></div> </div> <div class="items"> <div class="gallery"></div> <div class="banner"></div> <div class="barogo"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-navi-copyright"></div> </footer> </div> </div> </body> </html> body { margin: 0; } .header-container { border: 1px solid black; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid black; height: 100px; } .header-logo { width: 200px; } .header-navi { width: 600px; } .content-container { display: flex; flex-direction: column; align-items: center; } .slide { width: 1200px; border: 1px solid black; } .slide > div { height: 300px; } .items { width: 1200px; display: flex; border: 1px solid black; } .items > div { border: 1px solid black; height: 200px; flex: 1; } .footer-container { border: 1px solid black; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid black; height: 100px; } .footer-logo { width: 200px; } a { text-decoration: none; color: black; } .footer-navi-copyright { width: 1000px; } /* Navigation */ .menu { list-style: none; padding: 0; } .menu > li { text-align: center; width: 150px; float: left; box-sizing: border-box; } .menu > li > a { border: 1px solid black; display: block; } .menu > li > .subMenu > a { display: block; padding: 5px; } .subMenu { border: 1px solid black; background-color: white; }코드 상황은 이러한데 네비게이션 뒤로 자꾸 보더가 보이는데 이걸 어떻게 해결할 수 있을까요 ..?
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
공지사항과 갤러리 html 폴더 및 파일 문의
안녕하세요공지사항과 갤러리 html 강의를 시청하다가 실습을 하고 싶은데 어떤 폴더와 파일을 사용해야할지 몰라서 문의드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
화면이 많이 짤리는데 이유가 뭘까요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/08_공자사항갤러리탭구성.css" /> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="header-navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <section class="items"> <article class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none" >SMS 발송 서비스 개선작업 <span>2020.01.09</span> </a> <a href="#none" >휴대폰 인증 서비스 개선 작업 <span>2020.01.07</span> </a> <a href="#none" >카드사 부분 무이자 할부 이벤트 <span>2019.12.31</span> </a> <a href="#none" >올앳 시스템 작업 안내 <span>2019.12.20</span> </a> <a href="#none" >휴대폰 결제 시스템 작업 안내 <span>2019.12.20</span> </a> </div> <div class="tab2"> <a href="#none"> <img src="/IMAGES/gallery-01.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-02.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-03.jpg" alt="" /> </a> </div> </div> </div> </article> <article class="banner"></article> <article class="barogo"></article> </section> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns-family"> <div></div> <div></div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous" ></script> <script src="/script/08_공지사항갤러리탭구성.js"></script> </body> </html> body { margin: 0; } .container { } .header-inner { background-color: #ddd; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; box-sizing: border-box; } .header-logo { width: 200px; height: 100px; border: 1px solid black; box-sizing: border-box; } .header-navi { width: 600px; height: 100px; border: 1px solid black; box-sizing: border-box; } .content-inner { display: flex; flex-direction: column; align-items: center; } .slide { border: 1px solid black; width: 1200px; box-sizing: border-box; } .slide div { height: 300px; box-sizing: border-box; } .items { display: flex; } .items > article { border: 1px solid black; height: 200px; box-sizing: border-box; } .news-gallery { width: 500px; } .banner { width: 350px; } .barogo { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { height: 100px; border: 1px solid black; box-sizing: border-box; } .copyright { width: 1000px; } .sns-family { width: 200px; } .sns-family > div { height: 50px; border: 1px solid black; box-sizing: border-box; } .tab-inner { width: 97%; margin: auto; } .btn { font-size: 0; } .btn a { font-size: 16px; border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; text-decoration: none; color: #000; } .btn a.active { background-color: #fff; } .tabs { } .tabs > div { border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1 { } .tab1 a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid black; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab1 a span { float: right; } .tab2 { display: none; justify-content: center; align-items: center; } .tab2 img { width: 110px; padding: 10px; } // tap Content $('.btn a:first-child').click(function () { $('.tab1').show(); $('.tab2').hide(); $('.btn a:first-child').addClass('active'); $('.btn a:last-child').removeClass('active'); }); $('.btn a:last-child').click(function () { $('.tab1').hide(); $('.tab2').show().css('display', 'flex'); $('.btn a:last-child').addClass('active'); $('.btn a:first-child').removeClass('active'); }); 코드 사항은 이러합니다. 근데 화면 축소를 하면 다보이는데 100%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) html 파일은 어딨나요 ?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
각 타입별 이미지 크기 제작 / 주조색&보조색
각 타입별 이미지 크기 제작할 때 가. A,B타입 (width: 1200px, height: 300px) 나. C타입 (width: 800px, height: 350px)로 제작하면 되는데 D,E,F유형에는 100%로 구성되어있는데 전체 몇 px로 구성해서 만들면되는지 궁금합니다. 주조색&보조색의 의미가 궁금합니다...
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
레이아웃을 혼자 플렉스로 하고있는데 레이아웃이 좀 보더를 벗어난거같은데 상관없나요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다감점사항인가요 ? 이런것두 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/02_레이아웃가로100.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="slide-container"> <div class="slide"> <div></div> </div> </div> <div class="items-container"> <div class="items"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-box"> <div class="footer-navi"></div> <div class="copyright"></div> </div> </footer> </div> </div> </body> </html> -------------------------------------------- .container { } .header-container { border: 1px solid red; } header { margin: auto; border: 1px solid black; height: 100px; width: 1200px; } header > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .header-logo { width: 200px; float: left; } .navi { width: 1000px; float: right; } .slide-container { } .slide { border: 1px solid black; margin: auto; width: 1200px; height: 300px; } .items-container { overflow: hidden; } .items { border: 1px solid black; width: 1200px; margin: auto; } .items > div { border: 1px solid black; width: 400px; height: 200px; float: left; box-sizing: border-box; } .footer-container { border: 1px solid red; } footer { overflow: hidden; border: 1px solid black; width: 1200px; margin: auto; } footer > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .footer-logo { width: 200px; float: left; } .footer-box { width: 1000px; float: right; } .footer-box > div { height: 50px; border: 1px solid black; } 이런식으로 짜도 상관없는건지 물어보고싶습니당.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
content-inner는 왜필요한건가요 ??
감이 좀 잘 안잡히는데.. contentinner를 없애고 해도 레이아웃이 잘 나와서,,,,
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
square에다가 포지션 absolute를 주고 수직중앙 수평중앙으로하려고했더니 span이 중앙이아닌 우측하단으로 취우쳐져있고 transform으로 수직중앙 시키고 키프레임 애니메이션으로 돌릴려고하니,, transform이 중첩되어있어서 또 걸리네요. flex를 꼭 사용해야할까요 ?
