176만명의 커뮤니티!! 함께 토론해봐요.
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요.. 제이쿼리에서 바꿀 방법 없을까요??? 아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ /* product */ $('.sales-presentation').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정 draggable : true, //드래그 가능 여부 responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] });
SH
2024-09-05T09:56:15.388Z
댓글 2
좋아요 1
조회수 216
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다. 하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ 인클루드가 안되는 이유를 알 수 있을까요 ?
HTML/CSS javascript sass jquery scss
이지은
2024-09-03T09:09:09.077Z
댓글 3
좋아요 1
조회수 247
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
별도로 지정하지않은 상호작용이 필요한 모든 콘텐츠는 임시링크를 적용하고 탭키로 이동 선택할수 있어야 한다라는 기술적 준수사항에, 푸터의 패밀리사이트 항목들도 해당되나요?
라스트파이어
2024-08-30T15:55:11.369Z
댓글 1
좋아요 1
조회수 134
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
해당 부분만 흰색으로 양옆에 나오는데, 왜 그런걸까요 ?
디디
2024-08-30T09:13:18.572Z
댓글 1
좋아요 1
조회수 157
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
라이브서버로 열기를 해봐도 웹 브라우저가 열리지 않고 있습니다. 구글링 해서 파일명에 영어나 ., 띄어쓰기 한글 등이 들어가면 안되는 점도 숙지하고 작업했으며 설정도 다음과 같이 수정했고, 브라우저를 열어 직접 ip주소를 쳐 봐도 1번째 사진과 같이 뜨고 실행이 되질 않습니다ㅜㅜ 또 어떤 방법을 써봐야 할까요 선생님?
jjjjm
2024-08-28T07:25:27.502Z
댓글 2
좋아요 1
조회수 297
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
혹시 수험자 제공텍스트를 끊어써도 될까요? 제공된 수업영상에는 줄바꿈으로만 하셨는데 한 슬라이드에 제공되는 한 줄의 텍스트를 타입툴 여러개로 끊어써서 이동시켜도 되나하구요. 한 단어만 회전시키거나 다른 글씨체로 해도 되는지 궁금합니다!
라스트파이어
2024-08-27T16:07:09.602Z
댓글 1
좋아요 1
조회수 138
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D유형 최종본제작 - D1 갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요
유정
2024-08-26T11:02:02.052Z
댓글 1
좋아요 1
조회수 158
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
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자 이상 안올라 간다해서 댓글에 남길게요
2024-08-26T06:55:43.926Z
댓글 1
좋아요 1
조회수 204
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.
HTML/CSS javascript sass jquery scss
이지은
2024-08-25T13:45:22.080Z
댓글 1
좋아요 1
조회수 196
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
E유형 로고 작성하는 부분에 "심벌과 로고명이 포함된 완전한 형태로 디자인한다." 라고 되어있는데 심벌은 따로 이미지가 주어지는지 혹은 심벌로 따로 만들어야 하는지, 만약에 footer_logo 부분에도 심벌을 포함해서 만들어야 하는지 궁금합니다.
m20in
2024-08-23T01:03:55.232Z
댓글 2
좋아요 1
조회수 105
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
pc버전은 문제가 전혀 없는데 반응형이 되면 header에 준 position fixed가 이상해져요 그 아예 안되는 건 아니에요 반응형에서 아래로 내릴 때 만 fixed 가 안되고 스크롤을 위로 올리면 작동이 되는데 이문제를 어떻게 해결해야 할지 모르겠어요 이렇게 아래로 스크롤 하면 header 가 고정 되지 않고 사라져 버리고 스크롤을 위로 하면 나타나요 이게 원래 코드 이게 반응형 코드인데 뭐가 잘못 된 걸까요?
tkddnjs1018
2024-08-22T13:14:39.113Z
댓글 2
좋아요 1
조회수 326
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
.css({left : 0 })를 주석 처리해도 정상적으로 동작하는데 굳이 넣으신 이유를 알 수 있나요? 아니면 저 부분을 빼면 이상이 생긴다는 것을 보려면 코드를 어떻게 작성하면 좋을까요?
chobo
2024-08-22T03:39:36.284Z
댓글 1
좋아요 2
조회수 153
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
header_logo 부분에 "로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다." 부분이 있습니다. 그냥 포토샵 할 때는 200 x 40 비율로해서 그대로 작성하는지 궁금합니다.
m20in
2024-08-21T01:07:05.259Z
댓글 2
좋아요 1
조회수 143
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
클릭했을 때 content가 나오도록 구현하는 과정에서, jQuery를 이용하지 않고 css의 focus 클래스로 클릭했을 때 display:none 에서 display:block 으로 바뀌도록 하였는데 눌렀을 때 적용이 되지 않는 이유를 모르겠습니다.
lees8351
2024-08-20T07:18:42.612Z
댓글 1
좋아요 1
조회수 135
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
slide-items를 애니메이트해서 -1200픽셀만큼 이동시킨후 다시 left 0 은 무슨소린지 모르겠습니다 그러면 첫번째 이미지가 보여야하는게아닌가요 ? 첫번째 이미지가 보여진후 appendTo로 인해서 마지막 요소로 이동해야하는게 정상아닌가요..?
밀꾸
2024-08-16T03:10:26.642Z
댓글 1
좋아요 2
조회수 151
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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에대한 설명이 없어서 뭔지 모르겠네요.
밀꾸
2024-08-14T07:25:16.118Z
댓글 1
좋아요 2
조회수 123
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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; } 코드 상황은 이러한데 네비게이션 뒤로 자꾸 보더가 보이는데 이걸 어떻게 해결할 수 있을까요 ..?
밀꾸
2024-08-13T02:40:50.975Z
댓글 2
좋아요 1
조회수 172
미해결
웹디자인개발기능사 실기전체 (카톡질문가능)
안녕하세요 공지사항과 갤러리 html 강의를 시청하다가 실습을 하고 싶은데 어떤 폴더와 파일을 사용해야할지 몰라서 문의드립니다.
일반인의 취미생활
2024-08-12T11:45:09.260Z
댓글 1
좋아요 0
조회수 204
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
밀꾸
2024-08-12T03:31:02.668Z
댓글 1
좋아요 2
조회수 199
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
밀꾸
2024-08-12T01:48:26.130Z
댓글 1
좋아요 1
조회수 153
